Sitecore Experience Management

Add a form to a webpage

Abstract

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. Add the MVC layout to the Views folder of your website.

    Add to views
  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

    
    @using Sitecore.Mvc
    
    @using
    Sitecore.Mvc.Analytics.Extensions
    
     
    
    @{
    
    Layout =
    "MvcOuterLayout.cshtml";
    
    }
    
     
    
    <h1>@Html.Sitecore().Field("title")</h1>
    
    <div>
    
    @Html.Sitecore().Placeholder("main")
    
    </div>
    
    
  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>
    

Note

If you work with an existing site, and therefore an existing layout, you should apply the following two steps to the View file referenced in their layout:

add the reference @using Sitecore.ExperienceForms.Mvc.Html

and in the head section: add @Html.RenderFormStyles() and @Html.RenderFormScripts().

Doing 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.

    537A8732A3B342748D16277934F53850.png
  3. In the Device Editor dialog box, from the drop-down list, click Layouts/MVC Layout.

    C088BCE4722545D7B31550114C662501.png
  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.

    A1C6184C6DCB4CD4BDB2F85E949FC398.png
  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.

    45DCB87C289F4739859F7511DEF109AB.png
  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.

7818ED2FB1FA4CDF962AC2AA4403009F.png

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.

    9F296C11BA164BF6BE96E6168C463026.png
  2. Click Add here.

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

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

    EE6283AE2A9047888656841693942D2E.png

    The form is added to the page:

    AA8D1826B5C0404BB8FCB21D41E34DB0.png