Gravity Forms is a tremendously powerful plugin for WordPress and Help Scout is an awesome customer support system that also provides a service for handling documentation. What they miss, however, is a direct connection that allows site owners to provide customers with a way to search the Help Scout documentation before they can submit a support ticket submission form.

An ideal support ticket submission process goes like this:

  1. Customer enters keywords related to their issue
  2. Relevant search results are shown to provide customer with “self-help”
  3. If the answer is not found in the documentation, customer can proceed with opening a support ticket

As far as I know, there are very few (if any) documentation / support solutions that provide this flow out of the box. There are numerous ways to build it but they are often complex and time consuming. Most product owners and service providers simply allow customers to fill out a contact form to ask for help without providing them with a good way to try and help themselves.

To help provide a better support experience for our products, and to make it easier for customers to help themselves, my team and I decided to build a custom integration between Gravity Forms and Help Scout that would allow customers to enter a search query, see results, and then, only if no relevant results were found, be permitted to open a support ticket. You can see this in action on the Easy Digital Downloads support page and also on AffiliateWP’s support page.

affwp-support

Let’s take a look at how we can set up a similar ticket submission form to the one we use for Easy Digital Downloads.

Requirements

Setting this up requires the following:

Configuring the form

There are numerous ways the form could be configured so feel free to deviate from the steps below. I’m just providing a sample configuration that can work well.

First, install all of the required plugins and setup the Help Scout documentation sub-domain setting and shown in the installation instructions for Gravity Forms and the Help Scout Search Field plugin.

Next, create a new form and add a text field to it that has a class of helpscout-docs:

Search text field Search text field

The class name is required in order for the field to be made into a search field.

At this point you can preview your form and the search field will be functional.Help Scout docs search results

Now, if you wish, you can continue to add additional fields and set up conditional logic for those fields so that they only display after a search has been performed. I would recommend breaking the form up into two pages with the search field on the first page and the other form elements on the second page, that way you only need to add conditional logic to the page break instead of each and every form input field after the search input.

My form looks like this:

Form editor

The conditional logic for the page break:

Page break conditional logic

On the second page of the form, I have added the following input fields:

  • name
  • email
  • website
  • message

Depending on your own needs, you could add additional fields as well.

This gives us a fully functional submission form that includes documentation search.

GF Help Scout Docs Search Demo

That’s all there is to it! Now customers can search your documentation before opening a support ticket. This could potentially cut down your support ticket stats dramatically while also making customers happier since it is now easier for them to help themselves.

Huge thanks are owed to Zack Katz for his contributions to the plugin. My team and I wrote the initial version that worked for us then Zack came in and made it 10x more awesome, allowing us to release it as a plugin that anyone can use.

If you could like to contribute to the plugin or report an issue of any kind, you can find it on GitHub.

  1. Merv Barrett

    Super cool Pippin for making these instructions available. Help Scout has been a pivotal change for us and as we already use Gravity Forms combining the Docs… Thanks!

  2. Thomas

    Thanks for sharing this practical advice. I was always wondering how that worked and find it could indeed decrease not only support requests, but be helpful for users as well.

  3. Daniel Iser

    Wow, the timing of this article is beyond perfect. Went to bed having just finished our new support page wondering how I could add exactly this. Assumed I would just wake up and write a solution myself.

    So glad I subscribe to your blog feed directly. By tomorrow I woulda wasted a whole day and still not had this elegant a solution.

    Many thanks.

  4. Thomas Ehrig

    Thanks a lot and perfect timing, Pippin. I am currently switching over to use Help Scout for my theme docs as well, and this guide comes in very handy.

    Can you share any numbers on how much EDD and AffiliateWP support went down since implementing this?

    • Pippin

      Sorry for not seeing your comment earlier! I had some issues with Akismet automatically trashing a bunch of comments.

      It’s been hard to measure as we’ve been growing at the same time, which causes a natural increase in support.

  5. Ben

    Thanks for this cool addon Pippin! Is there anyway to specify multiple sub-domains? I have multiple products hence separate domains on HelpScout, however, the products are sold on the same website.

    • Pippin

      Sorry for not seeing your comment earlier! I had some issues with Akismet automatically trashing a bunch of comments.

      There isn’t in the plugin but it could be done manually. In the first version of the plugin (pre-release) we hard coded API requests to search in multiple collections. After each API request was done, we combined the results into a single response. That worked reasonably well.

  6. Daniel Iser

    Want to add that I used the following setup to streamline it a bit more.

    – I added a hidden field in the same page as the search field.
    – I set the page condition to check that field for the next button.
    – I added the following JS to my site which hooks in the new JS events in the GF – HS Search plugin to show the next button only after results have been found.

    `
    $(‘body’).on(‘gf_hs_search_results_found’, function () {
    $(‘#input_10_19’).val(1);
    $(‘#gform_next_button_10_18’).show();
    });
    `

    Hope that helps someone else.

    • Daniel Iser

      Lets try that again maybe with the code tag


      $('body').on('gf_hs_search_results_found', function () {
      $('#input_10_19').val(1);
      $('#gform_next_button_10_18').show();
      });

    • Pippin

      Awesome, thanks for posting!

    • Pippin Williamson

      I’m pushing out an update now that does this by default.

    • Daniel Iser

      Awesome, always good to be able to remove hacks cause they are inlcuded 🙂

  7. Daniel Iser

    Not a problem, just to clarify as I didn’t say before, this forces the user to wait for results before they can click next to submit a ticket.

    Sometimes results don’t return quick enough and by default the next button becomes enabled as soon as they type something into the search field.

    The above fixes that UX issue.

  8. Faheem Lashari

    My Website Messages All Sent To Spam Folder on Microsoft Emails
    Hello, after trying everything to avoid that my domains emails go to spam on Microsoft emails (outlook, hotmail, msn, etc…) what is the best solution ? Do you think that using GOOGLE APPS FOR WORK can resolve the problem ? Thank you so much for your help, I am so desperate !

    • danieliser

      Hey Faheem,

      You can look into sending your email via a provider such as sendgrid, mailgun, amazon ses etc. They can help insure your emails reach inboxes.

      Most all of them have WP plugins that will make integrating quick and easy.

  9. Collins Agbonghama

    I guess now is the time to start using Helpscout doc and migrate away from our custom built one.
    This technique will sure reduce number of support ticket.

    Thanks for sharing.

Leave a Reply

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match