Design a form

Abstract

How to create a form in the Form Designer using form elements.

Sitecore Forms enables you to quickly create forms using standard elements including:

  • A toolbar that provides easy access to functions and commands such as save and delete.

  • A form canvas for building the form.

  • A drop-down menu with additional save options such as Save as template.

  • A Design tab that contains the form elements you can use to build your form.

  • A Settings tab that contains form settings such as the CSS class for styling, the thumbnail image, as well as conditions and other advanced settings (performance tracking, AJAX enabled, robot detection).

  • A Performance tab that provides statistics on form views, abandonment rates, and error rates.

Forms dashboard

Before you start building your form, decide who the form audience is and what information you are trying to capture. Then, determine which questions you are going to ask and which form elements you want to include.

You can start with a blank form or build your form using a template. Although Sitecore Forms does not include predefined templates, you can use the Save as template command to create your own templates.

To create a form:

  1. On the Forms dashboard, click Create.

  2. To create a new form from scratch, click Blank form, or select a template to base your form on.

    On the Forms dashboard, click blank form or click a form template.

    Important

    If your form does not display on the dashboard, verify that you completed the post-installation steps when you installed your instance. To make Sitecore Forms work properly, you must rebuild your search indexes after installation.

You add a field to a form by dragging a form element from the Form elements pane onto the form canvas. After you have placed an element on the form canvas, you can change the settings for it on the General tab in the Form elements pane.

Note

When defining form element settings, you must add a meaningful Field name. The Field name is the actual Item name for the Sitecore definition item for the form field. Giving form elements meaningful names makes it easier to distinguish them in, for example, form field performance tracking.

To add a form field:

  1. In the Form elements pane, click the element that you want to add and drag it onto the form canvas.

    Drag the form to the canvas.

    A green line indicates a valid position for the element on the form canvas.

  2. To specify the settings for the form element, on the canvas, click the element to select it.

  3. To see the changes to the form, in the Form elements pane, on the Settings tab, define form element settings, and then click Apply.

    Note

    We recommend that you preview the form before publishing it on the website. The way the form displays in Sitecore Forms might not reflect the actual styling of the form on the webpage.

  4. To add a list to your form, in the Form elements pane, in the Lists section, drag the Dropdown list onto the form canvas.

    Dropdown list element
  5. To add a Submit button to your form, in the Form elements pane, in the Structure section, drag the Submit button element onto the form canvas.

    Add the submit button to the form.
  6. In the Details section, enter a name for your button and, in the Navigation step field, select Submit.

  7. To see the changes on the form, click Apply .

    Note

    To delete a form field, click the field that you want to delete to select it and then on toolbar click Delete.

  8. On the toolbar:

    • To save and name the new form, click Save.

    • To save and name a copy of the form, click the drop-down arrow and then click Save as.

    • To save the form as a template, click the drop-down arrow and then click Save as a template.