---
title: "Add a form to a webpage"
slug: "add-a-form-to-a-webpage"
abstract: "Insert your form into a webpage using 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 webpage. 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.

> [!note]
> The contents of the *FieldTemplates* folder change from release to release.

![Default form elements for the website shown in the File Explorer.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/105/sitecore-experience-manager/images/FieldTemplates.png)

<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/105/sitecore-experience-manager/mvc-and-renderings.html "MVC and renderings").

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/105/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 for the new file, for example, *Layouts*, click **Create**, and then click **Close**.
4. Create and add the MVC Layout.cshtml file to the Views folder of your website.
5. In the content tree, click the *MVC Layout* item and, on the **Content** tab, in the **Data** section, change the path to refer to the `MVC Layout.cshtml` file.

    ![MVC Layout path](https://doc.sitecore.com/api/markdown-image/xp/en/developers/105/sitecore-experience-manager/images/MvcPath.png)

6. To render scripts and styles associated with a form correctly, add a reference to the `Sitecore.ExperienceForms.Mvc.html` in the `MVC Layout.cshtml` file and then add `@Html.RenderFormStyles()` and `@Html.RenderFormScripts()` helpers before the closing `</body>` tag. This adds the necessary references to the form JavaScript files and stylesheets.

    > [!note]
    > The code for script and style helpers must be after the placeholder where the form is rendered.
    >
    > The form scripts and styles are stored in the `<root>/sitecore modules/Web/ExperienceForms/scripts` folder and loaded by the `@Html.RenderFormScripts()` and `@Html.RenderFormStyles()` helpers.

    The `MVC Layout.cshtml` file now contains the following code.

    ```xml
    @using Sitecore.ExperienceForms.Mvc.Html
    @using Sitecore.Mvc
    @using Sitecore.Mvc.Analytics.Extensions

    <!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()
    </head>
    <body>
        <h1>@Html.Sitecore().Field("title")</h1>
         <div>
             @Html.Sitecore().Placeholder("main")
         </div>
         @Html.RenderFormStyles()
         @Html.RenderFormScripts()
    </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 into 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 a form and, on the **Presentation** tab, click **Details**.
2. In the **Layout Details** dialog box, click the default layout to change it (in this example, Sample Layout).

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

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

    ![MVC layout](https://doc.sitecore.com/api/markdown-image/xp/en/developers/105/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 **Mvc Form**.
6. In the **Add to Placeholder** field, enter main, and click **Select**.

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

7. In the **Device Editor**, on the **Controls** tab, click the **Mvc Form** control to select it and then click **Edit**.
8. In the **Control Properties** dialog box, in the **Data Source** field, click **Browse**, 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/105/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 the Experience Editor</h2></summary>

You can insert your form into your webpage in the Experience Editor. 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 the placeholders you want to add the form to.

To add a form to a webpage in the Experience Editor:

1. To add the **Mvc Form** control to the **Placeholder Settings**, in the Content Editor, go to *sitecore/Layout/Placeholder Settings* and click a placeholder, for example *main*.

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

2. In the **Data** section, in the **Allowed Controls** field, click **Edit**.
3. In the **Select Items** dialog box, go to *Layout/Renderings/System/Forms*, double-click **Mvc Form** to move it to the **Selected** list and click **OK**.
4. Save your changes.
5. Open the relevant webpage in the Experience Editor and click **Add a new component**.

    ![In the Experience Editor, click add a new component.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/105/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/105/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/105/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/105/sitecore-experience-manager/images/AA8D1826B5C0404BB8FCB21D41E34DB0.png)

</details>