Filter form submission data by a field value with Views, Webform

If you are looking to display the data collected by Webform in a filterable, tabular format, this tutorial should help.  

What we will create is pretty simple. It looks something like this:

Figure 1. A contextual filter applied to a table containing Webform submission data.

A filter applied to a table containing Webform submission data

If your needs are more complex, you may want to look at the Data and/or Webform MySQL Views modules (note that as of this writing the latter module requires Webform 3.x, an older branch).

This tutorial assumes that you already have some familiarity with Webform and Views (especially Views 3.x). I'll provide the Views export at the bottom of this post.

Get ready

Required modules:

  • Views 3.x (using 7.x-3.8 for this tutorial)
  • Webform 4.x (using 7.x-4.0-beta3)

You will also need Chaos tool suite since Views depends on it.

  1. Enable modules.

  2. Create a new Webform and populate it with at least one select field. My form has 4 fields:

    • Application ID (type "Serial")
    • First name (type "Textfield")
    • Last name (type "Textfield")
    • City (type "Select options", values "Edmonton", "Calgary", "Red Deer")
  3. Save the form and do some test submissions so that we can use them to ensure our view is functioning properly.

Create your view

  1. Create a new view of type "Webform submissions", enable page display, and proceed to edit it.

  2. Set Format to Table. (You can use Format > Settings to further customize your table if needed.) 

  3. Under Page settings, enter a path such as views/%/submissions. "%" is a placeholder for the value(s) that we will use to filter our submissions.

  4. Add two "Webform submissions: Data" relationships - one for sorting and one for your filter.  Relationship essentially allow us to specify additional data that we want available to our view. I want to sort by Application ID and filter by City, so my settings look like this:

    IDENTIFIER "Submission Data - Application ID"
    WEBFORM NODE [node ID of webform]
    COMPONENT DATA "Application ID"
    ADMINISTRATIVE TITLE (under More) "Webform submissions: Data: Application ID"
    IDENTIFIER "Submission Data - City"
    WEBFORM NODE [node ID of webform]
    COMPONENT DATA "City"
    ADMINISTRATIVE TITLE (under More) "Webform submissions: Data: City"
  5. Now you can create a contextual filter that uses one of these relationships. Again, these are my settings:

    When the filter value is NOT in the URL Provide default value
    TYPE Raw from URL
    PATH COMPONENT 2
    USE PATH ALIAS checked
    When the filter value IS in the URL or a default is provided Override title (enter text to display when results are filtered, such as "Results for %1..." where %1 is a placeholder for our filter value.)
    ALLOW MULTIPLE VALUES (under More) If checked, will allow you to enter multiple values separated by "+" (e.g. edmonton+calgary)
  6. For every field that you want to display, add a new field of type "Webform submission data: Value"In my case, three will do: Application ID, Last name, and City. For each you will need to enter the webform node ID and select the field (e.g. "City") under Component data

  7. Add sort criteria. Select "Webform submission data: Data field" and point it to the relationship you created for this purpose. In my case it is "Submission Data - Application ID".

  8. Save your view.

Figure 2. View settings screenshot.

View settings screenshot

Stand back and admire your work :)

That's pretty much it. Now all you need to do is visit the page specified in your view (e.g. view/%/submissions) but replace "%" with you filter value (e.g. "edmonton"). If multiple values are allowed, enter more than one value separated by "+" (e.g. "edmonton+calgary"). 

Here is the Views export: view-application-submissions.txt

Notes

  • Your filter doesn't have to be based on a select type form component. It just seemed the most obvious choice for this tutorial.  

  • Instead of a contextual filter you can expose your filter to users by adding a relationship ("Webform submission data: Data field") to Filter criteria. Note that I could only get this to expose a textfield when I would rather have a pre-populated select element. 

Did this tutorial help you? I'd love to hear your comments.