Example: Create an email sign up form
3 min
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 information.
Video tutorial: Demo of an email form (5:20 minutes)
- From the assets panel, select the Forms tab.
- Go to a folder where you want to save the form, or create a 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 form container. The following image shows unedited elements for your new form.
Initial form container before editing
- 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:
- 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 checkboxes.
- 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 associate the form with a specific campaign with the predefined value.
- 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.
Form container after editing
- Publish the form container. It displays in your Forms list.
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.
Sample email form on a page
View your form submission
To view your test results, go to your Email sign-up form in the Forms gadget and select Form submissions from the context menu.
Form submissions menu item