Insert a web form directly on a web page

Current version: 8.2

After an MVC (ASP.NET MVC) or non-MVC (ASP.NET Web Forms) form is created in the Form Designer, users can insert it onto a webpage using the Experience Editor or Content Editor.

However, developers and administrators can insert an existing web form directly onto a web page in the following ways:

Insert an existing form onto a page in the Content Editor

A web form is a Sitecore rendering, so you can insert it in the Content Editor.

To insert an existing form onto a page in the Content Editor:

  1. In the Content Editor, click the item that you want to add a web form to.

  2. On the ribbon, in the Presentation tab, in the Layout group, click Details.

  3. In the Layout Details dialog box, on the Shared Layout tab, select the relevant device, and then click Edit.

  4. In the Device Editor dialog, in the left pane, click Controls and then click Add.

  5. In the Select a Rendering dialog, navigate to Renderings/Modules/Web Forms for Marketers and select either Form or MVC Form, then in the Add to Placeholder section, enter the placeholder name and click Select.

  6. In the Device Editor dialog, click the new control, and then click Edit.

  7. In the Control Properties dialog, in the Data section, in the FormID field, click the drop-down arrow and navigate to the System/Modules/Web Forms for Marketers/Website folder, select the relevant web form, and then click OK.

  8. In the Device Editor dialog and Layout Details dialog, click OK, and then click Save.

    The selected form is now displayed on the website in the selected placeholder.

Insert an existing form onto a page as a web control

You can add a web form to a layout statically by using .aspx, .ascx, or .cshtml layouts.

To insert an existing form onto a page as a web control:

  • For an .aspx or .ascx layout:

    • Open an .aspx or .ascx file and add the following code to the namespace:

    RequestResponse
    <%@ Register TagPrefix="wffm" Namespace="Sitecore.Form.Core.Renderings" Assembly="Sitecore.Forms.Core" %>
    • Add the FormRenderer tag:

    RequestResponse
    <wffm:FormRender  FormID="<id of the form item>" runat="server"/>
  • For a .cshtml layout:

    • Open a .cshtml file and add the following code:

    RequestResponse
    @{ Sitecore.Mvc.Presentation.RenderingContext.Current.Rendering.Parameters["FormId"] = "<id of the form item>"; }
    @Html.Sitecore().Controller("Sitecore.Forms.Mvc.Controllers.FormController, Sitecore.Forms.Mvc")
    • Alternatively, you can also use the following code:

    RequestResponse
    @Html.Sitecore().Rendering("{F2CCA16D-7524-4E99-8EE0-78FF6394A3B3}", new { Datasource = "<id of the form item>" , UniqueId = "<unique id of the form rendering>"})

Insert an existing form onto a page using the code-behind class

You can add web forms depending on different conditions using the code-behind class.

To insert an existing form onto a page using the code-behind class:

RequestResponse
FormRender fr = new FormRender(); 
fr.FormID = "5D9E85F3-5E03-49A7-A136-93269DEA22A7";//form item id
Sitecore.Context.Page.GetPlaceholder("main").Controls.Add(fr);

This sample code inserts a web form with the specified ID into the Main placeholder.

Do you have some feedback for us?

If you have suggestions for improving this article,