Example: Creating a customer satisfaction survey

This example shows how to create a customer satisfaction survey which displays different form elements depending on how the visitor answers. The survey is for a coffee shop that wants to know what their customers like, and don't like, about their services.

The form contains three steps. The first steps collect basic personal information (name and email address), the second step is for collecting customer opinions, and in the third step, a visitor can participate in a photo challenge by uploading a photo taken at the coffee shop.

In the second step, which collects customer opinions, some form elements are dependent on another form element. This means that if a visitor answers "Food" to the question What's your favorite thing about the Coffee House?, an additional question is displayed. The additional question Which food you like in particular? is not displayed if the visitor picks any of the other options, Staff, Ambiance, or Drinks, on the first question.

The example uses the following form elements: Form step, Text, Text area, Multiple or single choice, Selection, File upload, and Submit button. See Form element types for more information.

All form elements and the form container itself must be published to be available.

1. From the assets pane, select the Forms tab.
2. Browse to a folder where you want to save the form, or create a new folder by selecting New Folder from the context menu.
3. From the folder's context menu, select New Form and give it a name such as Customer satisfaction survey.
4. Go to All Properties view and edit the form container settings as follows:

   Property	Configuration
   Form title	Give the form the title Customer satisfaction survey.
   Description	Enter the description Take our survey!
   Allow multiple submissions from the same IP/cookie	Enable this check box if you want to test the form yourself multiple times, or if you want to let visitors send in the survey more than once.
   Show navigation bar...	Select the Show navigation bar... check box.

   

5. Drag and drop the following form elements onto the Form elements section in the new form container. Change the elements as follows (add your own Tooltips and Placeholder text) and publish each element:

   Form element	Configuration
   Form step	Label the form step Basic personal information. (Name is what the form element is called in the CMS user interface; Step title is what is displayed to the visitor filling in the form.)
   Text	Label the form element Your name. Select the Required check box.
   Text	Label the form element Your email address. Select the Email check box.
   Form step	Label the form step Your opinions.
   Multiple or single choice	Adjust the settings of the form element as follows: Name the element: Best thing about the Coffee House Label text: What's your favorite thing about the Coffee House? Select the Required check box. Under Choices, select Use manual input and add the following items by clicking the plus icon + (set Value to the same as Choice): Choice: Staff Choice: Ambiance Choice: Food Choice: Drink
   Selection	Adjust the settings of the form element as follows: Name the element: Best food Label text: Which food do you like in particular? Select the Required check box. Under Choices, select Use manual input and add the following items by clicking the plus icon + (set Value to the same as Choice): Choice: The pizzas Choice: Fish & chips Choice: Tuna & mayo sandwich Choice: The velvet cake of course! In the Dependencies tab, set: This field will be to Shown If to All Add a condition like this:
   Multiple or single choice	Adjust the settings of the form element as follows: Name the element: Worst thing about the Coffee House Label text: What don't you like at the Coffee House? Select the Required check box. Under Choices, select Use manual input and add the following items by clicking the plus icon + (set Value to the same as Choice): Choice: Staff Choice: Food Choice: Drink Choice: Nothing, everything is perfect
   Text area	Adjust the settings of the form element as follows: Name the element: Food complaints Label text: You said you didn't like our food, why? In the Dependencies tab, set: This field will be to Shown If to All Add two conditions like this:
   Form step	Label the form element Competition.
   Multiple or single choice	Label the form element Do you want to participate in our photo challenge and win a dinner for two? (optional) Name the element: Photo challenge Label text: Do you want to participate in our photo challenge and win a dinner for two? (optional) Under Choices, select Use manual input and add the following items by clicking the plus icon + (set Value to the same as Choice): Choice: Yes Choice: No
   File upload	Label the form element Upload your photo here and set allowed file extensions and a maximum upload size. In the Dependencies tab, set: This field will be to Shown If to All Add a condition like this:
   Submit button	Label the button Submit your opinions.

6. Publish the form container.

   

7. Drag the Customer satisfaction survey form onto a web page and publish the page.

Test your form

To test your form, go to the page on the website and enter data into the form on the page in View mode.

1. In the first step, add a name and an email address. Click Next Step.
2. Select Food, and note that a new question is displayed, Which food do you like in particular?. Select one of the options.
3. Under What don't you like at the Coffee House?, select Food and note that a free-text field is displayed. Enter a comment in the text box and click Next Step.
4. Select Yes to participate in the photo challenge and upload a photo. Click Submit. When you submit the data, it is stored in Optimizely.

View form submissions

To view the results of your test, go to your Customer satisfaction survey form in the assets pane and select Form submissions from the context menu. The Form submissions view appears with data submitted from the form.

If you want to find all visitors who wanted to participate in the photo challenge, you can either sort the form submissions by clicking the Photo challenge column, or by searching for the answer Yes in that column: