---
title: "Add a form to a webpage"
slug: "add-a-form-to-a-webpage"
abstract: "Insert your form in a web page in the Content Editor or the Experience Editor."
---
# Add a form to a webpage

With Sitecore Forms, you can easily create a new blank form or you can use a template. Using the Content Editor or the Experience Editor, you can then insert your form into a web page. The first step is to replace the default sample layout with an MVC layout you create. Afterwards, you can insert your form into the webpage.

By default, Sitecore Forms comes with basic `.cshtml` Razor files for all form elements (`Website/Views/FormBuilder/FieldTemplates`). You can customize these files or add new files as required.

<details>
<summary><h2>Add the MVC layout</h2></summary>

For Sitecore Forms to function correctly, you must first create and add the MVC layouts. See [MVC and renderings](https://doc.sitecore.com/xp/en/developers/91/sitecore-experience-manager/mvc-and-renderings.html "MVC and renderings").

> [!important]
> Form scripts and styles are stored in the `<root>/sitecore modules/Web/ExperienceForms` folder and are loaded by the `@Html.RenderFormScripts()` and `@Html.RenderFormStyles()` helpers.
>
> For scripts and styles associated with a form to be rendered correctly, you must use two layouts: `MVC Layout.cshtml` and `MVC OuterLayout.cshtml`. `MVC OuterLayout` will be used to add a reference to `Sitecore.ExperienceForms.Mvc.html` and to call the `@Html.RenderFormStyles()` and `@Html.RenderFormScripts()` helpers. This adds the necessary references to the form Javascript files and stylesheets.

To add the MVC layout:

1. In the Content Editor, go to `sitecore/Layout`, right-click **Layouts**, click **Insert**, and click **MVC Layout**.

    ![Layouts Insert MVC Layout](https://doc.sitecore.com/api/markdown-image/xp/en/developers/91/sitecore-experience-manager/images/FORMS-insert-MVC.png)

2. On the **Name** page of the wizard, enter a name and click **Next**.
3. On the **Location** page of the wizard, select a folder in the Sitecore content tree for the new file, for example, *Layouts*, and click **Next**.
4. On the **File Location** page, select the location where the new file is to be stored in the Sitecore webroot file structure, and click **Create**.
5. Open the `MVC Layout.cshtml` file and add `Layout = MVC OuterLayout.cshtml`. The `MVC Layout.cshtml` file now contains the following code.

    ```csharp
    @using Sitecore.Mvc
    @using Sitecore.Mvc.Analytics.Extensions

    @{
        Layout = "Mvc OuterLayout.cshtml";

    }

    <h1>@Html.Sitecore().Field("title")</h1>
    <div>
        @Html.Sitecore().Placeholder("main")
    </div>
    ```

6. Create and add the MVC OuterLayout.cshtml file to the Views folder of your website. It must contain the following code:

    ```csharp
    @using Sitecore.Mvc
    @using Sitecore.ExperienceForms.Mvc.Html
    @using Sitecore.Mvc.Analytics.Extensions
    @{
        Layout = null;
    }
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>@Html.Sitecore().Field("title", new { DisableWebEdit = true })</title>
        @Html.Sitecore().VisitorIdentification()
        @Html.RenderFormStyles()
        @Html.RenderFormScripts()
    </head>
    <body>
        @RenderBody()
    </body>
    </html>
    ```

</details>

<details>
<summary><h2>Insert a form in a webpage</h2></summary>

After you have added the MVC layout, you can insert your form in a webpage.

To add the form to the page:

1. In the Content Editor, go to your website, click the page where you want to insert the form and, on the **Presentation** tab, click **Details**.
2. In the **Layout Details** dialog box, click the default layout to change it (in the following example, Sample Layout).

    ![Insert a form in a web page](https://doc.sitecore.com/api/markdown-image/xp/en/developers/91/sitecore-experience-manager/images/537A8732A3B342748D16277934F53850.png)

3. In the **Device Editor** dialog box, from the drop-down list, click `Layouts/MVC Layout`.

    ![MVC layout](https://doc.sitecore.com/api/markdown-image/xp/en/developers/91/sitecore-experience-manager/images/DeviceEditor_MVCLayout.png)

4. On the **Controls** tab, remove the existing controls and then click **Add**.
5. In the **Select a Rendering** dialog box, go to `Renderings/System/Forms`, and click **MvcForm**.
6. In the **Add to Placeholder** field, enter main, and then click **Select**.

    ![Add to placeholder](https://doc.sitecore.com/api/markdown-image/xp/en/developers/91/sitecore-experience-manager/images/A1C6184C6DCB4CD4BDB2F85E949FC398.png)

7. In the Device Editor, on the **Controls** tab, click the MVC form control and click **Edit**.
8. In the **Control Properties** dialog box, in the **Data Source** field, select the form you want to add to the page, and click **OK**.

    ![Add the data source](https://doc.sitecore.com/api/markdown-image/xp/en/developers/91/sitecore-experience-manager/images/ControlPropertiesDataSourceForForms.png)

9. Click **OK** to close the **Control Properties** dialog box, click **OK** to close the Device Editor dialog box, and then click **OK** to close the **Layout Details** dialog box.
10. Save your changes and press F9 to publish the site.

    > [!note]
    > To publish, you must have created the main placeholder definition item and your page must be publishable.

</details>

<details>
<summary><h2>Add a form to a webpage in Experience Editor</h2></summary>

You can insert your form into your web page in the Experience Editor. To be able to do this you must make sure that you are using the MVC Layout for the page and the Mvc Form control is allowed for placeholders.

To add a form to a webpage in Experience Editor:

1. To add the Mvc Form control to the Placeholder Settings, in the Content Editor, navigate to `sitecore/Layout/Placeholder Settings` and click a placeholder, for example *main*.
2. In the **Data** section, in the **Allowed Controls** field, click **Edit**.
3. In the **Select Items** dialog box, click the Mvc Form, and click **OK**.

    ![Add the MVC control to the placeholder settings.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/91/sitecore-experience-manager/images/PlaceholderMain.png)

4. Save your changes.
5. Open the relevant webpage in the Experience Editor and click **Add a new component**.

    ![In Experience Editor, click add a new component.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/91/sitecore-experience-manager/images/9F296C11BA164BF6BE96E6168C463026.png)

6. Click **Add here**.
7. In the **Select a Rendering** dialog box, click **Mvc Form**, and click **Select**.

    ![Select the Mvc Form component](https://doc.sitecore.com/api/markdown-image/xp/en/developers/91/sitecore-experience-manager/images/B28C549F3F0A4C90A55D1D1D9F667AD8.png)

8. In the **Select the Associated Content** dialog box, select the form and click **OK**.

    ![Select your form and click OK.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/91/sitecore-experience-manager/images/EE6283AE2A9047888656841693942D2E.png)

    The form is added to the page:

    ![Form displays on page.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/91/sitecore-experience-manager/images/AA8D1826B5C0404BB8FCB21D41E34DB0.png)

</details>