Create a form

  • Updated

To create a form on your website, you first create a form container and then add one or more form elements to it. The form elements can add, for example, a name field, an email field and a Submit button to the form.

Each form container has metadata that you can specify. The metadata contains information on the form such as title, description, included form elements, and confirmation message when the form has been submitted.

Video: Demo on how to use form metadata

 Video tutorial: Demo of post-processing actions with form metadata. (3:46 minutes)


  1. In the assets pane, select Forms to list the existing form folders or create a new folder for your form by clicking the plus icon + in the lower left corner of the assets pane.
  2. From a folder's context menu, select New Form and give it a name such as Coupon for contact information.
  3. Select the All Properties view. Adjust the properties as necessary in the Content tab:
    Property Description
    Form title Enter the name of the form.
    Description Describe what the function of the form will accomplish.
    Show a summary... Enable this check box to pop up a dialog box with summary information about what the visitor is about to submit from the form. You can also add a message to this summary dialog box, see Confirmation message below.
    Confirmation message Enter a message to display on the summary dialog box (enabled with the Show a summary... check box) along with the entered data on the form. When the user accepts the summary dialog box, the data is saved and can be viewed in Form Submissions view.

    Image: Example of summary dialog box with confirmation message

    To get the confirmation message styled like in the image above, you must have the Forms Samples installed.

    Display page after submission Select a page, such as a Coupon page, that you want to display after the form is submitted.
    Display message after form submission Enter a message that you want to display after the form is submitted.

    The message is not displayed if you select a page in Display page after submission.

    Allow anonymous submissions Enable to let a visitor submit form data, such as an online survey, without needing to log in; if disabled, a user must be logged in to submit the form.
    Allow multiple submissions from the same IP/cookie Enable to let a visitor submit the form more than once. This is useful if you want to test your form yourself.
    Show navigation bar if the form has multiple steps Enable to display a progress bar for multiples steps, such as for a long online survey.
    Allow access to the form data through the service API Enable to let a developer (or other app) get form submission data by using the Forms Service API. For information, see Using the Forms Service API in the Optimizely Forms Developer guide.
    Form elements Drag and drop form elements from the Form Elements gadget to this area or rearrange the order of the form elements by drag and drop. You can also do this in the on-page edit view of the form container. See Configuring a form element and Form element types.
    Category You can apply a category to content, but your website also needs customized functionality done by a developer to display the resulting outcome, such as in a filtering. See Creating categories.

    Image: New form container Content tab

  4. Select the Settings tab and adjust the properties as necessary:
    Property Description
    Metadata This hidden attribute lets a developer run custom code. For more information, see Rendering metadata in the Optimizely Forms Developer guide.
    Store form submissions Enable submitted data to be stored. If enabled, the data is permanently stored in storage. If not, data is temporarily stored in the visitor's browser session until the session is expired.
    Send email after submission You can customize your form to send the visitor an email after they have submitted the form.
    1. Select + to open the Create email template dialog box.
    2. Add a from and a to address, and an email subject. You can use placeholders to automatically fill in data from the form, such as #EMAIL#, #NAME#, #SUMMARY#, and so on. You can type these or select them from the Insert placeholder menu. Developers can create additional placeholders.
    3. Add a body text in the Message field and click Add.

      Image: Create email template dialog box

    For Optimizely Forms to send out emails, an administrator has to set up an email server, see Configuring your email server on Optimizely World.

    Trigger webhook after submission Select + to open the Add webhook dialog box. Data entered and submitted on the form is sent to the Webhook URL. Select the check box to send a POST request in JSON format (application/json); clear the check box to send data as a normal HTTP POST request (application/x-www-form-urlencoded).

    Image: Add webhook dialog box

    Image: New form container Settings tab

Forms examples

The following examples show how to create a variety of forms: