Example: Create 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 do not like about their services.

Video tutorial: Create a dynamic form with dependencies (9:58 minutes)

The form contains three steps. The first step collects basic personal information (name and email address), the second step collects 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 depend 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 other options, Staff, Ambiance, or Drinks, on the first question.

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

Form elements and the form container must be published to be available.

1. From the assets panel, select the Forms tab.
2. Go to a folder where you want to save the form or create a 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:
   • 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 checkbox 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... checkbox.

   

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 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 checkbox.
   • Text – Label the form element Your email address. Select the Email checkbox.
   • 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 checkbox.
     • 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 a condition 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 panel and select Form submissions from the context menu. The Form submissions view displays data submitted from the form.

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