The following example shows how to create a single form to collect contact information from a visitor (name, email, and additional optional information). It uses the following form elements: Text, Number, Text area, Hidden visitor profiling, Hidden predefined value, Reset button, and Submit button. See Form element types for more information.
Video tutorial: Demo of an email form (5:20 minutes)
- From the assets pane, select the Forms tab.
- Browse to a folder where you want to save the form, or create a new folder by clicking the plus icon +.
- From the folder's context menu, select New Form and give it a name such as Email sign up.
- Drag form elements onto the new form container. The following image shows unedited elements for your new form.
- Hover over a form element to see the element's context menu. Select Edit from the context menu.
- Change the elements as follows (add your own Placeholder text) and publish each element:
Element Configuration Text Label the field First Name and select the Required check box. Text Label the field Last Name and select the Required check box. Text Label the field Email Address and select the Required and Email check boxes. Number Label the field Phone number and select the Positive Integer check box. Text area Label the field Comments. Hidden visitor profiling Select Geo: Region Code. This field is used for internal purposes only and is not displayed to the visitor. Optimizely will log where each visitor (who fills in the form) is located. Hidden predefined value Enter Campaign-123 in Predefined value. This field is used for internal purposes only and is not displayed to the visitor. You can use the predefined value to associate the form with a specific campaign. Reset button Label the button Clear. Submit button Label the button Submit form.
The Email sign up form should look something like the following image.
- Publish the form container. It appears in your Forms list.
- Drag and drop the form onto a web page and publish the page.
Test your form
To test your form, enter data into the form on the page in View mode and click Submit form. When you submit the data, it is stored in Optimizely.
View your form submission
To view the results of your test, go to your Email sign up form in the Forms gadget and select Form submissions from the context menu.