Add a form to a webpage

Abstract

Insert your form into a webpage using the Content Editor or the Experience Editor.

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.

For Sitecore Forms to function correctly, you must first create and add the MVC layouts. See 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
  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
  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.

    @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>

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
  3. In the Device Editor dialog box, on the Layouts tab, click the drop-down list, and select Layouts/MVC Layout.

    MVC layout
  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
  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
  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.

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.
  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.
  6. Click Add here.

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

    Select the Mvc Form component
  8. 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.