Example: Create an email sign up form

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 icon 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.
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.
Publish the form container. It displays in your Forms list.
Drag and drop the form onto a web page and publish the page.