Add a form to a webpage

Abstract

Insert your form in a web page in 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 web page. 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.

For Sitecore Forms to function correctly, you must first create and add the MVC layouts. See MVC and renderings.

Important

Form scripts and styles are stored in the <root>/sitecore modules/Web/ExperienceForms folder and are loaded by the @Html.RenderFormScripts() and @Html.RenderFormStyles() helpers.

For scripts and styles associated with a form to be rendered correctly, you must use two layouts: MVC Layout.cshtml and MVC OuterLayout.cshtml. MVC OuterLayout will be used to add a reference to Sitecore.ExperienceForms.Mvc.html and to call the @Html.RenderFormStyles() and @Html.RenderFormScripts() helpers. This adds the necessary references to the form Javascript files and stylesheets.

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 in the Sitecore content tree for the new file, for example, Layouts, and click Next.

  4. On the File Location page, select the location where the new file is to be stored in the Sitecore webroot file structure, and click Create.

  5. Open the MVC Layout.cshtml file and add Layout = MVC OuterLayout.cshtml. The MVC Layout.cshtml file now contains the following code.

    @using Sitecore.Mvc
    @using Sitecore.Mvc.Analytics.Extensions
    
    @{
        Layout = "Mvc OuterLayout.cshtml";
    
    }
    
    <h1>@Html.Sitecore().Field("title")</h1>
    <div>
        @Html.Sitecore().Placeholder("main")
    </div>
    
  6. Create and add the MVC OuterLayout.cshtml file to the Views folder of your website. It must contain the following code:

    @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>
        @RenderBody()
    </body>
    </html>
    

After you have added the MVC layout, you can insert your form in 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 the form and, on the Presentation tab, click Details.

  2. In the Layout Details dialog box, click the default layout to change it (in the following example, Sample Layout).

    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. In the Select a Rendering dialog box, go to Renderings/System/Forms, and click MvcForm.

  6. In the Add to Placeholder field, enter main, and then click Select.

    Add to placeholder
  7. In the Device Editor, on the Controls tab, click the MVC form control and click Edit.

  8. In the Control Properties dialog box, in the Data Source field, 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 web page in the Experience Editor. To be able 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 placeholders.

To add a form to a webpage in Experience Editor:

  1. To add the Mvc Form control to the Placeholder Settings, in the Content Editor, navigate to sitecore/Layout/Placeholder Settings and click a placeholder, for example main.

  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.
  4. Save your changes.

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

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