Optimizely Apps & IntegrationsCreating a form

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.

  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:
    PropertyDescription
    Form titleEnter the name of the form.
    DescriptionDescribe 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 messageEnter 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 submissionSelect a page, such as a Coupon page, that you want to display after the form is submitted.
    Display message after form submissionEnter 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 submissionsEnable 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/cookieEnable 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 stepsEnable to display a progress bar for multiples steps, such as for a long online survey.
    Allow access to the form data through the service APIEnable 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 elementsDrag and drop form elements from the Form Elements gadgetSmall application component that is responsible for its own rendering and behavior, accessible from the dashboard or the panes in the Optimizely user interface. A gadget can contain functionality that you can use within the gadget interface or link away to other products integrated in Optimizely (for example, a direct link to CMS / Pages where you can use the classic editing view features). 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.
    CategoryYou can apply a categoryCMS: A built-in Optimizely property. You apply a category to content, but you need to build the functionality to display the filtered results. Commerce: A grouping of purchasable products. (Same as node.) 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:
    PropertyDescription
    MetadataThis hidden attribute lets a developer run custom code. For more information, see Rendering metadata in the Optimizely Forms Developer guide.
    Store form submissionsEnable 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 submissionYou 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 submissionSelect + to open the Add webhook dialog box. Data entered and submitted on the form is sent to the Webhook URLData hub that gathers information from form data through API calls.Information at the data hub can process form data and route information to a specific support center, a customer representative, or other destination.. 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: