Skip to main content

Insert a web form directly on a web page

Abstract

Insert a form on a page through the Content Editor, web control or code-behind class.

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.

    24D4B291E7B24A6D833009735ED2006F.png

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

    D64813B3A87B433C950B50F21447D0D7.png

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

    FD37110241294D46A3E46C33CC9A33BC.png

  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.

    16374B95C0A34C1B96CCBAA5C2955490.png

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

    D39F723CBBAC4B75B9838FFF5C1F6DB4.png

  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.

    6CEC639F4B9A43AA8B03E5781CBE0D0B.png
    B61CCAFCAA834ECAB888D279DBB8DB4D.png

  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:

    <%@ Register TagPrefix="wffm" Namespace="Sitecore.Form.Core.Renderings" Assembly="Sitecore.Forms.Core" %>

    • Add the FormRenderer tag:

    <wffm:FormRender  FormID="<id of the form item>" runat="server"/>

  • For a .cshtml layout:

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

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

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

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.