Sitecore Experience Manager

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.

The topic describes how to:

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 describe above

    • in your existing Mvc.Layout.cshtml, add a reference to Sitecore.ExperienceForms.Mvc.Html, then add @RenderFormStyles() and @RenderFormScripts() before the closing </body> tag. This will add the necessary references to the form stylesheets and JavaScript files. By using the Experience Editor you can now add the MVC Form component to add a form to a page.

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.

  3. In the Device Editor dialog box, from the drop-down list, click Layouts/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.

  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.

  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.


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.

  2. Click Add here.

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

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


    The form is added to the page: