Add a form to a webpage

Last updated Thursday, November 2, 2017 in Sitecore Experience Platform for Content Author, Marketer
Keywords: Web forms

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:

Add the MVC layout

To add the MVC layout:

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

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

  2. Add the MVC layout to the Views folder of your website.

    Add the MVC layout to the Views folder of your website.

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

    Picture 9

  4. 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="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 style="padding-top: 70px;">
        @RenderBody()
    </body>
    </html>

Insert a form in a webpage

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.

    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.

    In the Device Editor dialog box, 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 Mvc Form.
  6. In the Select a Rendering dialog box, in the Add to Placeholder field, enter main, and then click Select.

    In the Add to Placeholder field enter main.

  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.

    In the Data Source section, select the form.

  9. Publish the page.

Add a form to a webpage in Experience Editor

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.

In the Allowed Controls field add the MVC Form control.

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.

    Click MVC Form and click Select.

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

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

    The form is added to the page:

    The form is added to the page.

Send feedback about the documentation to docsite@sitecore.net.