How to build a support ticket system on WordPress using Gravity Forms and GravityView

GravityView takes the power and versatility of Gravity Forms and adds advanced capabilities, like displaying, filtering and exporting the data. This allows you to build dynamic web apps and business systems on WordPress. All without code!

Recently, some users have been writing in, asking us about whether it’s possible to build a support ticketing system on WordPress using GravityView. The truth is that any app that requires you to create, read, update, or delete data can be built using Gravity Forms and GravityView.

So in this tutorial, we decided to show you how to build a support ticketing system that can be used by a small business to track, manage and answer support requests.

Before we begin, a disclaimer is in order. A support ticketing system includes a lot of specialized features! That means this tutorial is longer and more complex than normal.

Now that that’s out of the way, let’s get started!

💡 Check out our live demo applications and get your own free trial site preloaded with all GravityKit add-ons!

Sneak peek

Here’s a sneak peek at our finished support ticketing system. This is the main support dashboard where tickets come in, sorted by date.

When support staff click “View ticket”, they will be taken to a page where they can see all the details of the ticket, and send replies.

Finally, support staff can update a ticket’s status and add tags to it from the front end.

Are you ready to see how we built it? Keep reading to find out!

What is a support ticketing system?

A support ticketing system is a tool used by companies to process and catalog customer support requests. Tickets, also sometimes called cases or issues, need to be properly stored alongside relevant user information. Ticketing systems are user-friendly interfaces that enable support staff to manage and reply to new cases!

Ticketing systems sometimes serve other functions too, like allowing companies to spot bugs in new releases, take feature requests, and answer pre-sales questions. Most companies that sell products or services use ticketing systems to interact with customers who have questions or require support.

How does a support ticketing system work?

A support ticketing system provides support technicians with a centralized dashboard for managing customer requests. When a customer writes in asking for support, their email is sent to the ticketing system where support staff can tag it, categorize it, assign it to other users and reply to the request.

Why build a support ticketing system on WordPress?

While there are several well-known ticketing solutions and WordPress ticket plugins available, not all of them are suitable for every business. On the other hand, building your own ticketing system on WordPress gives you the ability to customize it to match your business needs.

Ability to customize

WordPress is an open-source platform with thousands of free plugins and themes. Creating a ticketing system on WordPress gives you the ability to customize things as you see fit. You won’t get this kind of flexibility with an existing SaaS platform! 

Moreover, anything you build on WordPress, is yours. You have full control over the system and the data you collect. With a SaaS solution, you are dependent on them to safeguard your data.

More affordable

Most ticketing solutions charge a recurring fee to use their platform. While this is okay for large companies, many small businesses cannot afford to pay for these kinds of tools. WordPress is a free platform with free and affordable plugins, allowing you to save on costs.

Good for small businesses

Many small businesses have no use for an enterprise platform with all kinds of fancy bells and whistles. Instead, they require something simple and easy to use that’s going to enable them to solve support requests quickly and efficiently; this is where WordPress shines. 

Process for building a ticketing system using Gravity Forms and GravityView

Let’s go over the process for building a functioning ticketing system using Gravity Forms and GravityView. First, a heads up—this is going to be one of our longer and more complex tutorials to date. Having said that, this is a really powerful use-case, and once you are able to connect all the necessary pieces, you’ll see how powerful GravityView really is!

Instead of the usual form and View set up, we’re going to need two forms and two Views for the support dashboard and another View for the user dashboard (so two forms and three Views in total!). The first form will be for support requests, while the second form will be for replies and follow-up requests. 

The support dashboard will require two Views: the first View we’ll build will be for displaying support tickets, while the second View will display the replies and follow-ups to a specific ticket. 

• Form #1: support requests
• Form #2: replies to support tickets
• View #1: all support tickets
• View #2: replies to support tickets

Once we’ve got our forms and Views set up, we’ll put everything together into a cohesive ticketing system that’s powerful and easy to use. 

We’ll also need to make sure that our system includes all the traditional features of a support ticketing platform. After checking out some existing ticketing solutions, it’s clear that our ticketing system will need to have the following features:

• Send email notifications when a new ticket is created
• The ability to update the status of a ticket
• A way for support staff and customers to reply and follow up on requests
• A customer dashboard where users can see their active tickets
• The ability to close tickets, which should also remove the ability to reply
• The ability to tag, search and filter tickets
• The ability to add internal notes to a ticket, only viewable by support staff
• The ability to assign tickets to a specific user

Okay, take a sip of coffee and let’s get started! ☕

Creating the support form

The first step is to create the support form. This is the form that customers will use to submit support requests.

To create a new form, hover over “Forms”, click “New Form”, and select the blank form template. Now you can start adding fields to your form using the Gravity Forms drag-and-drop editor.

For this example, we’ll add the following fields to our form:

• What’s your issue? (“Drop Down” field)
• Name (“Name” field)
• Email (“Email” field)
• How can we help? (“Paragraph text” field)
• Status (“Drop Down” field)
• Tags (“List” field)

The final two form fields—“Status” and “Tags”—should not be visible to the user! These should only be visible to support staff who will have the ability to update the status of a ticket or add tags to a ticket.

The way we’ll accomplish this is by changing the field visibility settings. We can do that by clicking on the field to open the field settings, and clicking on the “Advanced tab”. Then we’ll change the visibility from “Visible” to “Administrative”. This will prevent the field from showing up in our form.

Although those fields won’t be visible in our support form, they will be visible to support staff when we create the View. This will allow them to update a ticket’s status and add tags to a ticket when required.

Before we publish our form, there’s one more thing we need to do. When a new ticket arrives, we want the status to be set to “Open” by default. To set this up, we’ll select “Open” as the default value in the “Status” Drop Down field by clicking on the check mark next to the field label.

💡 Pro tip: Wondering how we added those green, yellow, and red dots? We did so using emojis (here they are: 🟢 🔴 🟡).

Okay, that’s it. Here’s what our support form looks like on the front end.

Later, we will configure an email notification so that support staff are notified when there’s a new ticket. However, we can only do this once we’ve created the View. First, we need to build our second form.

Creating the follow-up reply form

Now that our main support request form has been created, we need to create another form allowing support staff to reply to tickets and customers to follow-up. This form will have the following 4 fields:

• Follow-up reply (“Paragraph Text” field)
• Attach file (“File Upload” field)
• Ticket ID (hidden “Single Line Text” field)
• User (hidden “Single Line Text” field)
• Customer email (hidden “Email” field)

The first two fields will be visible to both customers and support staff and will allow them to exchange messages back and forth until the ticket has been solved. The final three fields will be used to associate replies to a specific ticket (seeing as tickets are created through a separate form!).

We’ll need to use dynamic population to fill these fields with important information (i.e., the ticket ID and the name of the user). The reason for this will become clear later on, so if you’re feeling confused, don’t worry!

Let’s start with the “Ticket ID” field. Click on the field to open the field settings on the right. Open the “Advanced” tab, set the “Visibility” to “Hidden”, check “Allow field to be populated dynamically” and enter a parameter name (e.g., ticket-id).

You’ll need to do the same for the “User” field, just be sure to use a different parameter name.

And finally, do the same for the “Customer email” field.

Great! The “Ticket ID” field will allow us to associate replies with a specific ticket, and the “User” field will allow us to display the name of the user above each reply. Finally, the “Customer email” field will allow us to capture the customer’s email, so we can send them notifications when their ticket is updated.

We’re going to populate these fields dynamically using the parameter names—you’ll see how this is done in the next step.

Creating the support ticket dashboard View

The first View we need to create is the main View for displaying support tickets on the front end. We’ll need a separate View for showing replies, but we’ll create that in the next step. This is the dashboard visible to our support team, the customer will have a different View!

To create a new View, hover over “GravityKit” and click “New View”. Now give your View a name (“Support tickets”) and select your support request form as the data source.

For the View Type, we’re going to select the “DataTables Table” layout.

After selecting a View Type, you can start constructing your View using GravityView’s drag and drop builder. Start by adding fields to the Multiple Entries Layout—this will be the main dashboard page, where support staff will see a snapshot of all the new tickets.

For this example, well add the “Entry ID”, “Status”, “Date Created”, “Name”, and “What’s your issue?” fields. We’ll also add a link to the Single Entry page, titled “View ticket”. This will allow support staff to View a specific ticket in more detail.

The View also has a Search Bar widget at the top, which is added automatically upon creation. Let’s configure this next.

Configuring the Search Bar widget

The Search Bar widget allows users to search for entries in a View based on fields in the entry. We’ll go ahead and add four search inputs, allowing support staff to search for tickets based on keywords, emails address, issue type and the date it was submitted.

Feel free to add any other search inputs you want here.

Configuring the Single Entry layout

We’ll start by clicking on the “Single Entry Layout” tab at the top of the View editor. Now we can start adding fields here to display important information about each ticket. Here’s what the Single Entry layout will look like when we’re done:

We’ll start by adding the following fields:

• Entry ID (rename this to “Ticket #”)
• Link to Edit entry (rename this to “Update ticket”)
• Date Created
• Status
• Issue type
• Name
• Email
• How can we help?

Next, we’re going to add the “Tags” field. This is a hidden list field in our form that allows support staff to tag new tickets using keywords. To make the tags look more like tags, we’re going to add the field merge tag to a Custom Content field with a <div> wrapper—that way, we can style the tags field more easily using CSS!

Here’s what the tags look like after adding some custom styles:

The next fields we need to add to the Single Entry layout is the “Entry Notes” field. This will allow the support team to write comments on tickets that are only visible internally.

After that, the final step is to add the follow-up reply form, allowing support staff and customers to reply to tickets in a thread. We can embed the form inside a Custom Content field using the [gravityform] shortcode.

However, there are a few things we need to keep in mind:

1. The form should not show if the ticket status is set to “Closed”
2. The reply should be associated with the ticket number in question
3. The username of the user should show up in the reply so it’s obvious who sent the reply

Number one on the list is easy to achieve using GravityView’s powerful [gvlogic] shortcode. Using [gvlogic], you can show/hide information based on conditions that you set. 

In this case, we’re going to use [gvlogic] to only show the reply form if the ticket’s status is either “Pending” or “Open”. If the ticket has been closed, we’ll display a message to the user instead, asking them to open a new ticket if they wish to contact support.

Next, we need to ensure that replies are associated with the ticket in question! This is important because we’re using a single reply form for each ticket. To do this, we’ll use dynamic population to populate the hidden “Ticket ID” field with the entry ID of the ticket where the form is embedded.

We will also use dynamic population to populate the “User” field with the display name of the logged-in user who sent the reply, and the “Customer email” field with the customer’s email address. 

The final step will be for us to display the entire thread of replies to a ticket. However, we can only do this once we’ve created a View to display responses (we’ll do this in the next step!). For now, here is what our Single Entry layout looks like:

Note that when you add fields to a View, you can adjust the visibility settings. This allows you to make certain fields only visible to specific user roles. 

When you’re done configuring the Multiple Entries and Single Entry layouts, you can start adding fields to the Edit Entry layout.

Configuring the Edit Entry layout

The Edit Entry layout will allow support staff to tag tickets and update a ticket’s status. Any fields you add here will be editable from the front end.

The final step is for us to add an advanced filtering condition to exclude closed tickets from the View!

Adding an advanced filtering condition to exclude closed tickets

We don’t want closed tickets to still show up in the support dashboard so we’ll add an advanced filtering condition to exclude them. To do this, scroll down to the View Settings, click on “Filter & Sort” and then “Add Condition”. Now add the following condition:

💡 Pro tip: Learn more about advanced filtering in our free Gravity Guide course!

Here’s what our ticket dashboard looks like so far:

Creating a View to display ticket responses

So far we’ve created the two forms that we need as well as the main dashboard View. Now we need to create a new View to display ticket responses in a thread that we can add to the main ticket page.

Create a new View and give it a name (something like “Ticket responses”). Now, select your support follow-up form as the data source and choose the “List” layout as your View Type.

In the “Other Fields” section of the View editor, we’ll add the “Follow up reply” and “Attach file” fields from our form. 

We’ll also add a custom content field at the top to display the username of the user sending the reply. We can do this using the hidden “User” field that we added to our form when we created it. This field is dynamically populated using the {user} merge tag thanks to the shortcode we wrote above.

Finally, we’ll add another Custom Content field below all the other fields, containing a separator. This will help make it clear when one reply ends and another begins.

Finally, we need to ensure that replies are arranged from oldest to newest. To do this, we’ll sort by the date created, ascending.

That’s it! Now we need to embed this View inside our main dashboard View in order to show ticket responses.

Showing follow-up replies in the ticket entry

Start by copying the embed shortcode for your “Ticket responses” View on the right-hand side of the View editor.

Now, edit your main dashboard View and open the Custom Content field where you embedded your reply form. Paste the GravityView embed shortcode inside here at the top. After that, you’ll need to add a couple more parameters: search_field and search_value.

Using these parameters, we can filter the View to ensure that it will only display the replies relating to the ticket that the user is looking at. This is very important, because without this filter, it will show all replies to all tickets, which is not what we want!

• Search_field: Set this equal to the ID of the “Ticket ID” field in your form
• Search_value: Set this equal to the ID of the current ticket using the {entry_id} merge tag

This will filter the View such that it only display replies that match the ID of the current ticket.

That’s it! 

Putting it all together: finalizing the support ticket dashboard

Now we can finalize our support ticket dashboard! You can either embed your main dashboard View on a separate page, or access it directly using the View URL. Here’s what the main dashboard page looks like on the front end:

As you can see, all the “Open” and “Pending” tickets are displayed in a table on the front end. There’s also a search bar at the top allowing support staff to filter tickets by keyword, email, issue type and date.

When support staff click “View ticket”, they are taken to a page where they can View more information about that specific ticket, including the user’s full request. There’s also a “Notes” section for adding internal comments and a reply form for responding to the user.

They can also click “Edit ticket” to update its status or tag it appropriately.

We’ve done all the heavy lifting. All that’s left to do is add the notification emails and create the customer dashboard View.

Creating the customer dashboard View

We’re going to create a separate dashboard for customers, as we don’t want them to see things like tags or internal notes. We also only want them to see the tickets that they have created. 

To do this, we’ll clone our current dashboard View and remove the fields that we don’t want customers to see. We’ll also remove the link to the Edit Entry layout, as we don’t want customers to be able to edit tickets after they’ve been created.

Finally, we’ll add an advanced filtering condition to ensure that users only see the tickets that they created. To do this, we’ll scroll down to the View settings, click on the “Filter & Sort” tab and add the following condition.

That’s it! Now, customers will be able to View their tickets and follow-up with replies—all from the front end. You may want to embed this View inside the customer account page on your website. This way, customers can create, view and respond to support tickets from their account page.

Adding email notification messages for customers and support staff

It’s probably a good idea to add email notifications so that support staff and customers are notified when a ticket has been updated.

Support notifications

When a new support ticket is created, we want to notify our team via email. We can do this by creating a new “Notification” in Gravity Forms. 

To set up a notification, go to the form settings for your “Support request” form, click on “Notifications” and edit the default Admin notification. After entering in the “Send To” email address, scroll down to configure the notification message.

Here, we can use HTML to create a link to the ticket that was just created. All we need to do is use the GravityView URL structure together with the {entry_id} merge tag. 

Here’s an example of a URL that links to a single entry in GravityView. The number at the end is the entry ID. To create a link to the most recent ticket, all we need to do is replace the ID with the {entry_id} merge tag. So https://my.try.gravitykit.com/view/support-tickets/entry/1234/ becomes:

https://my.try.gravitykit.com/view/support-tickets/entry/{entry_id}/ 

Customer notifications

We can also configure email notifications that send to the user when their ticket receives a reply. To do this, we’ll add a new Notification to our support reply form. We’ll add the merge tag for the “Customer email” field to the “Send To Email” field. This will ensure that the notification is sent to the customer’s email address.

In the message body, we can put a link to the ticket, just as we did with the previous notification!

Then, we’ll use conditional logic to ensure it only sends when a new reply is added by a member of the support team.

That’s it. We have successfully built a support ticket system for WordPress using Gravity Forms and GravityView!

The final feature that you may want to implement is the ability to assign tickets to different users.

Enabling customers to reply via email (optional)

One potential downside to the support system we’ve built is that users will need to log in to the site and reply to support tickets from their dashboard page. For many users, it may be easier (and more convenient) for them to reply directly via email. Here’s the good news: this is possible to set up using Zapier!

If you’re not familiar with Zapier, it’s an automation platform that allows you to connect different apps and platform together and automate your business processes. Using “Email by Zapier”, we can create a “reply to” email address, that upon receiving an email, creates a new entry in Gravity Forms.

To set this up, create a Zapier account and add a new Zap. The app should be “Email by Zapier” and the trigger event should be “New Inbound Email”. Next, create a new, inbound email address.

Now, add an action. Search for Gravity Forms and set the event to “Create Entry”.

Next, you’ll need to link your Gravity Forms account with Zapier. To do this, first install the official Gravity Forms Zapier Add-On. After that, follow the instructions in Zapier to create a new API key and select the form you want to link (this should be your follow-up reply form).

After you’ve linked your account, you’ll need to configure the email itself. Simply select which email fields should be sent to which form fields.

When you’re done, test the integration to ensure it’s all working as expected.

The final step is to reconfigure your customer notification email and add your Zapier inbound email address as the “reply to” address.

You’ll also need to add the full message in the email notification so that the user can read it and respond from their email client. You can do this using Gravity Forms merge tags.

That’s all! Now when a user receives a notification that a reply has been submitted to their support request, they can read it and respond to it directly from their email client!

Bonus: Assigning tickets to different users

If you have a larger support team, you may need the ability to assign tickets to specific users. For this, you’ll need a hidden dropdown field in your support form with a list of support staff. You can then use the Advanced Filter and the {user} merge tag to filter Views such that support staff only see tickets assigned to themselves.

💡 Pro tip: For more information about listing entries assigned to a specific user, check out this handy article on our docs site.

Start building your ticketing system using Gravity Forms and GravityView

A ticketing system is a tool used by companies to process and catalog customer support requests. Ticketing systems are user-friendly interfaces that enable support staff to manage and reply to new cases!

In this post, we showed you how to build a WordPress support ticket system using Gravity Forms and GravityView. Using the data collection capabilities of Gravity Forms and the data management capabilities of GravityView, you can build a custom ticketing system that suits your business needs.