Creating a Simple Support Ticket System with Gravity Forms and Advanced Custom Fields (ACF)

In the process of migrating all of Creative Pixels Media’s clients and framework directly in to Whiteley Designs the question of a support ticket system was on the table. I typically work very closely with all of my clients and don’t intend scale to a point that would require a robust support system in the near future so I decided to scrap the HelpScout integration with Sprout Apps (sorry, Dan) and code something a bit simpler. Something that would work well and handle my needs for the foreseeable future, while still providing a simple to use interface for my clients.

I think this tutorial will be helpful for people in my situation that need an organized support system, including a “ticketing” system, but don’t want to incur the cost of one that requires monthly or yearly fees. As is such with most of my integrations, this will require Advanced Custom Fields PRO and Gravity Forms.

Here are the steps we will cover on this tutorial:

• Create the ACF Repeater to manage all support requests for each client
• Add the ACF Repeater field group to the User Edit page
• Create a shortcode to display the support requests on the front end of the site
• Create a Gravity Form to submit new support requests
• Create a function to automatically create a new ACF Row when the Gravity Form support request is submitted
• Show how to update and edit the support requests in each user account

Creating the ACF Field Group for your Support Ticket System

The first step of this project was to create a simple ACF Repeater that includes the following fields:

• Request Title – Self explanatory
• Status – Select field with options of Pending, Open and Closed
• Comments – Textarea for comments about the request
• Date – Datepicker for support request date set to m/d/Y format

To make this a bit simpler you can download this json file, use the ACF importer to import the field group and you’ll have everything you need. If you set it up yourself, just keep an eye on the field names and keys throughout this tutorial and update them with our specific names and keys. Additionally, you’ll need to set the location rules for the form to show if field group is “User Form” which will ensure it shows on the user edit screen (shown below).

Creating a shortcode to display your Support Ticket System fields

The next part of this project was to create a shortcode that would allow me to display the support fields easily based on the logged-in user. I have the following code in my core functionality plugin, but you could simply add it to your functions.php (remove the opening php tag) and it will function just the same.

<?php function supportShortcode( $atts ) {
     extract( shortcode_atts( array (
     ), $atts ) );
     $output = '';

     $currentUser = get_current_user_id();
     $currentID = 'user_' . $currentUser;
     $item_count = 0;

     ob_start(); ?>

     <div class="support-past-con">
     <?php if( have_rows( 'support_requests', $currentID ) ) : ?>

          <h4><strong>Support Tickets</strong></h4>

          <table id="wd-support-table" class="table table-hover">
               <thead>
                    <tr>
                         <th>Status</th>
                         <th>Subject</th>
                         <th>Date</th>
                    </tr>
               </thead>
               <tbody>

               <?php while( have_rows( 'support_requests', $currentID ) ) : the_row(); $item_count++; ?>

                    <?php // ACF Variables
                    $support_request_title = get_sub_field( 'support_request_title' );
                    $support_request_status = get_sub_field ('support_request_status');
                    $support_request_comment = get_sub_field( 'support_request_comment' );
                    $support_request_date = get_sub_field( 'support_request_date' );
                    ?>

                    <tr>
                         <td><span class="label label-<?php echo $support_request_status; ?>"><?php echo $support_request_status; ?></span></td>
                         <td>
                              <a class="expand-support" href="#"><?php echo $support_request_title; ?>  <i class="fa fa-caret-down"></i></a>
                              <span class="expanded-support"><?php echo $support_request_comment; ?></span>
                         </td>
                         <td><time><?php echo $support_request_date; ?></time></td>
                    </tr>

               <?php endwhile; ?>

               </tbody>
          </table>

     <?php else : ?>
          <p>No past support tickets.</p>
     <?php endif; ?>
     </div>

     <?php
     $output = ob_get_contents();
     ob_end_clean();
     return $output;
}
add_shortcode('support-info', 'supportShortcode');

Lets break down this code:

First we create a function called supportShortcode. This will contain all the code needed to render the support system repeater fields we created with ACF. Within the function we get the current user’s ID using get_current_user_id(). We then create a variable called $currentID that appends "user_" to the actual ID.

Next we render our fields using the standard markup provided by Advanced Custom Fields. Notice we include the $currentID variable after the repeater name to ensure we only get fields from the current logged-in user. The reason we added the "user_" before the ID is to ensure the code adheres the the ACF documentation provided for returning values from a user:

• Get values from user
• Creating a repeater

Next, we have some basic HTML to create a table and header and a loop for our support system repeater. Within the loop we create a row for each support request that includes all the information held in the variables within the repeater.

Next, we put the output buffer contents in to the $output variable with ob_get_content(), clean the output buffer and return the $output variable. This outputs everything from the code above. Finally, we add the shortcode using add_shortcode().

We now have a nice shortcode that we can use to output the support table as needed. Below is how the table looks (after some CSS of course):

Create a Gravity Form to submit new Support Requests

Next we will create a simple Gravity Form that users will use to submit new support requests. It has five fields:

1. Username – Hidden field with a default value of {user:user_login} that provides the user’s login info
2. Email Address – Email field for user’s email address
3. Date – Hidden field with a default value of {date_mdy}. This date field is used later and important
4. Subject – Text field for subject
5. Message – Textarea for support request details

The only tricky parts here are the username and date fields. You need to go to the ‘Advanced’ tab on each of those fields and set them to hidden and set the default values to the values I defined above. This will automatically populate those fields with the information we need, without the user needing to manually do anything. That simplifies it for the user and also helps remove any chance of user error.

That is all we need to do for the Gravity Form. You can set up our notifications however you’d like.

Making the Gravity Form submission add a new row to the Support Repeater

Next we will create a function that will automatically create a new support request within the support repeater when a form is submitted and set it as ‘pending’. So, not only will you get a notification from Gravity Forms when a new support request is submitted, a new row within your support system repeater will be created for you within that user’s account.

// Add support info upon new support submission
add_action("gform_after_submission_9", "wd_create_support_item", 10, 4);
function wd_create_support_item($entry, $form) {
     global $post;
     global $wp_query;
	$currentUser = get_current_user_id();
	$currentID = 'user_' . $currentUser;

	$support_subject = $entry['5'];
	$support_issue = $entry['4'];
	$support_date = $entry['6'];

     $row = array(
          'field_593ebdb948bd9' => $support_subject,
          'field_593ebdcb48bda' => 'pending',
          'field_593ebf6448bdb' => $support_issue,
          'field_593ed2e2c7f0c' => $support_date,
     );
     add_row( 'field_593ebd9f48bd8', $row, $currentID );
}

Lets break down this function:

We create a function called wd_create_support_item that is hooked in with gform_after_submission_9. This causes the function to fire after the form submission is complete. Note you need to change the 9 in that hook to the ID of the Gravity Form you have created.

Within this function we use the same method we did above to create the $currentID variable. We also create variables for $support_subject, $support_issue and $support_date using $entry['fieldID']. The fieldID references the ID of the specific field within the Gravity Form you created. So, if your fields are different you’ll need to modify the fieldID to ensure it corresponds with the correct form field.

Next we create a variable called $row to store an array of values. Each value uses a field key from the ACF repeater that will correspond with one of the fields submitted in the gravity form. View screenshot below to see how to find your ACF field keys:

Notice you need to match the appropriate field key with the variable associated with that field. For the ‘status’ field key we set a value of ‘pending’. This will automatically set the status of any user submitted support request to pending.

One other thing to note. We were careful to make sure we use the mdY date format within the Advance Custom Field repeater as well as the Gravity Form default value. This is important so the date is properly formatted when the row is created after a form submission.

Put this code in your functions.php file and each time a user submits a support request you will recieve a notification (based on your Gravity Forms Notification settings) and a new row will be added to that user’s support fields. To access/edit/update the support request simply visit the user’s edit page within the WordPress dashboard. From there you can update the status of the ticket and comment as needed.

Wrapping Things Up

While there are a lot of moving parts here the overall concept is relatively simple:

• We add a support system repeater field to the user edit page using Advanced Custom Fields
• We create a shortcode to display the support information on the front end as needed
• We allow users to submit new support requests, which automatically add to the repeater as a ‘pending’ request
• We can easily modify support request as needed

After this is setup it is very simple to manage. It probably isn’t the best solution for large scale sites, but in my situation it works as a great tool for me and my clients to quickly and easily keep everyone in the loop.

A few notes:

1. This system does not provide for any type of discussion “thread”
2. You will need to create your own CSS based on the needs of your site to display it as needed
3. This requires Advanced Custom Fields PRO which is not free
4. This uses Gravity Forms which is not free, but likely could be modified to work with other WordPress Form plugins