Add a form to a webpage


Insert your form in a web page in the Content Editor or the Experience Editor.

With the Sitecore Forms application, you can easily create a new form or use a template. You can insert your form in a web page in both the Content Editor and the Experience Editor. First, you must replace the default sample layout with the MVC layout and then you can insert your form in a webpage.


By default, Sitecore Forms comes with basic .cshtml Razor files for all form elements. Navigate to Website/Views/FormBuilder/FieldTemplates/ to edit the .cshtml files to make them match your requirements and/or add new ones.

To add the MVC layout:

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

    Layouts Insert MVC Layout
  2. Enter a name and click Next.

  3. In the Location dialog box, select the location where the item representing the new file should be stored in the Sitecore content tree.

  4. In the File location dialog box, add the MVC layout to the Views folder of your website.

    Add to views
  5. For form scripts and styles to be rendered, you must use two layouts: MVCLayout.cshtml and MVCOuterLayout.cshtml. First, open the MVCLayout.cshtml file and to refer to the outer layout that you will create in the next step, add Layout = MVCOuterLayout.cshtml

    @using Sitecore.Mvc
    Layout =
  6. Create the outer layout file. It must contain:

    • @using Sitecore.ExperienceForms.Mvc.Html

    • In the head section: @Html.RenderFormStyles()and @Html.RenderFormScripts()

    • In the body: @RenderBody()

    @using Sitecore.Mvc
    @using Sitecore.ExperienceForms.Mvc.Html
    @using Sitecore.Mvc.Analytics.Extensions
        Layout = null;
    <!DOCTYPE html>
    <html lang="en" xmlns="">
        <title>@Html.Sitecore().Field("title", new { DisableWebEdit = true })</title>
    <body style="padding-top: 70px;">

    If you work with an existing site, you can reference to MvcOuterLayout.cshtml as described above.

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

To add the form to the page:

  1. Navigate to your website and on the Presentation tab, click Details.

  2. In the Layout Details dialog box, click the default layout to change it.

    Insert a form in a web page
  3. In the Device Editor dialog box, from the drop-down list, click Layouts/MVC Layout.

    MVC layout
  4. On the Controls tab, remove the existing controls and then click Add.

  5. Navigate to Renderings/System/Forms, and click MvcForm.

  6. In the Select a Rendering dialog box, in the AddtoPlaceholder field, enter main, and then click Select.

    Add to placeholder
  7. On the Controls tab, click the Mvc form control and click Edit.

  8. In the Data Source field, select the form you want to add to the page.

    Add the data source
  9. Publish the page.

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

To add the Mvc Form control to the Placeholder Settings:

  1. In the Content Editor, navigate to sitecore/Layout/Placeholder Settings and click content.

  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.

To add a form to a webpage in Experience Editor:

  1. Open the relevant webpage in the Experience Editor and click Add a new component.

    In Experience Editor, click add a new component.
  2. Click Add here.

  3. In the Select a Rendering dialog box, click Mvc Form, and click Select.

    Select the Mvc Form component
  4. In the Select the Associated Content dialog box, select the form and click OK.

    Select your form and click OK.

    The form is added to the page:

    Form displays on page.