Optimizely Apps & IntegrationsExample: 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.

Image: Additional question displayed depending on previous selection

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.

You can use the projects feature to keep track of all items and to multi-publish them.

  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:
    PropertyConfiguration
    Form titleGive the form the title Customer satisfaction survey.
    DescriptionEnter the description Take our survey!
    Allow multiple submissions from the same IP/cookieEnable 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.

    Image: Form container settings

  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 elementConfiguration
    Form stepLabel 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.)
    TextLabel the form element Your name. Select the Required check box.
    TextLabel the form element Your email address. Select the Email check box.
    Form stepLabel the form step Your opinions.
    Multiple or single choiceAdjust the settings of the form element as follows:
    • Name the elementBest 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
    SelectionAdjust the settings of the form element as follows:
    • Name the elementBest 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:

        Image: Condition on best food element

    Multiple or single choiceAdjust 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
      • ChoiceNothing, everything is perfect
    Text areaAdjust the settings of the form element as follows:
    • Name the elementFood 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:

        Image: Condition on Food complaint element

    Form stepLabel the form element Competition.
    Multiple or single choiceLabel 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:

        Image: Condition on File Upload element

    Submit buttonLabel the button Submit your opinions.
  6. Publish the form container.

    Image: Form preview

  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.

Image: Form submissions

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:

Image: Search form submissions