- How The HubSpot Service Hub Ticket Form Works
- Create Service Ticket Form In HubSpot
- Embed A Service Ticket Form In WPHubSite Site Builder
- Edit A Service Ticket Form In HubSpot
- Delete A Service Ticket Form In HubSpot
- Get The Embed Code Of A HubSpot Service Ticket Form
How The HubSpot Service Hub Ticket Form Works
If you want to let your customers create a new ticket in your HubSpot Service Hub directly from your website you’re in the right place. Every one of our client’s have a support box in their dashboard which goes to the WPHubSite support page. That page has a support form which creates a ticket inside HubSpot.
Pretty cool, huh?
Here’s what that looks like:
Once the support from is filled out, a new ticket is created in the HubSpot Service Hub. If the user has already used a HubSpot form then some information will be pre-filled. If the user has a record in HubSpot then the ticket will be attached to their record.
Even cooler, huh?
Now for the process of how we set this all up in HubSpot and WPHubSite.
Create A Service Ticket Form In HubSpot
The first thing you need to do is set up the ticket form inside HubSpot. That means you need to log into your HubSpot dashboard.
Step 1: Click on the Conversations drop-down.
Step 2: Click the Inbox option.
Step 3: Click on the Inbox Settings link and gear (it’s way on the bottom of the left side of the page).
Step 4: Click on the Forms option.
Step 5: Click on the Connect form button. This button is named wrong, it will let you connect an existing form AND create a new form.
Step 6: Choose the Create a new form option.
Step 7: Click the Next button.
Step 8: Click the form title and name it something that you will recognize. The exact name isn’t important, it’s just for your reference later on if necessary.
Step 9: Drag any contact properties you’d like to add to your form from this section to the form to the right (step 10 box). You can drag items above, below, and to the side of most form fields.
Step 10: Drag form fields around to arrange them how you’d like. You can also click on items to make them required or configure settings for each form item.
Step 11: Click on the Follow-up tab if you’d like to set up a follow-up email to send users who fill out your support form. If you don’t want a follow-up email, skip to step 17.
Step 12: Click on the Create follow-up email button.
Step 13: Select a user who the follow-up email will be sent from. You must already have this user set up.
Step 14: Provide a subject line for your support form follow-up email.
Step 15: Create the body of your follow-up email.
Step 16: Click Save.
The above is what a follow-up email looks like. If you have the right HubSpot plan then you can also add up to three follow-emails.
Step 17: Click on the Options tab.
Step 18: Write something that will replace the support form once it’s submitted. You can include important things to note such as when a response can be expected, any helpful next steps, etc. There’s no way to set a redirect page for support forms.
Option 19: Choose the language for any default form elements.
Option 20: Choose this option if you’d like a new contact created for any new email address. Even if the contact has filled out a form on your site it will not show their repopulated fields if you select this. It’s either this option for the option in step 22 but not both.
Option 21: Allows users to reset the form a reset form link.
Options 22: Choose to pre-populate fields into the support form if the user has filled out another form (or used chat) on your website. The ticket will then automatically be attached to their record.
Step 23: Click on the Style & preview button.
Option 24: This option is only available if you subscribe to some HubSpot plans. This option allows you to embed an unformatted form on your website so you can do the styling yourself instead of in HubSpot.
Option 25: Choose the look of the input options. this will automatically format all the fields and the button. Colors are up next.
Option 26 If you have the Marketing Starter or higher plan then you can make any changes to this section. There are also defaults for all forms in HubSpot that you can change even with the free plans. For that go to Settings (the gear icon in the top right) > Marketing > Forms. You can change the defaults in the Styles tab.
Option 27: Check how your form looks on different devices.
Step 28: Click the Update form button.
Step 29: If you have HubSpot Sales Starter then you can choose to automatically assign the ticket to the representative of your choice. This is great for assigning tickets to the most qualified rep if it’s a support form for a specific item.
Step 30: Since this is a ticket form the default is for this to be on and you can’t even turn it off. You can edit the ticket created, though (up next).
Step 31: Click on the Edit ticket link.
Step 32: Choose who this ticket should be assigned to. There are several options:
- No one: A ticket will just be created for a general team to work or assign as needed.
- Contact’s existing owner: If the contact is owned, they’ll get the ticket assigned no matter who owns it (yup, even sales).
- Specific user: Assign tickets from this form to a specific person in your organization.
Step 33: This option only shows up if you chose to assign the ticket to someone. If you have it, choose who should be assigned the ticket.
Step 34: Choose what pipeline the ticket should be assigned to. If you have multiple support pipelines then you can choose which one from here.
Step 35: Choose an option for what stage the ticket is in (New, Waiting on contact, Waiting on us, or Closed).
Step 36: Choose a priority for new tickets between Low, Medium, or High.
Option 37: Choose any other fields that you’d like to add to the ticket when it’s created. You’ll also have to configure any options if you add any.
Step 38: Click the Save button.
Step 39: Click the Save button. You can see this one back in the previous image.
Step 40: Hover over the ticket form you just created (there should only be one).
Step 41: Click on the Share Support Form option.
Step 42: Click on the Embed code tab.
Step 43: Click on the Copy button.
Now the code for your service ticket form is copied to your computer’s clipboard. If you do any other copying before embedding your service ticket form then you’ll have to copy it to your clipboard again.
If you’re ready to embed the form, move onto the next section.
Embed A Service Ticket Form In WPHubSite Site Builder
Ready to take the service ticket form we created in the last section and embed it on your website?
This process is really easy especially with the WPHubSite Site Builder drag and drop editor. You can incorporate the service ticket form anywhere in your website with the HTML module.
Here’s how.
Step 1: Log into your WPHubSite WordPress admin dashboard.
Step 2: Click or hover over the Pages option.
Step 3: You can either create a new Site Builder page or in this case we’re going to edit a current page to add the service ticket form so click on All Pages.
Step 4: Hover over the page you’d like to add the service ticket form to and click on the Site Builder link.
Step 5: Drag an HTML module into your canvas (I dropped it into the spot labeled 6).
Note: You may have to click on a + icon next to the Done button if you don’t have the editor anchored to one side such as is displayed here.
Step 6: This is where the HTML module was dragged in this example. You can place it wherever on your page you’d like.
Step 7: Paste your embed code into the HTML module. You don’t have to edit anything, just paste it.
Note: If you aren’t continuing from the previous step where we created the form and copied the embed code to your clipboard, get the embed code from your HubSpot support form or create your support form if you haven’t already.
Step 8: Click the Save button.
Step 9: Click on the Done button and then choose Publish from the list.
Note: You won’t see the form embedded the first time until you publish the page and refresh it. Once you do that if you go back into the Site Builder editor then you’ll see the form in the editor.
Step 10: Review the HubSpot service ticket form embedded in your page to make sure it’s where you want it and looks the way you’d like. You can always move around the HTML module in Site Builder if it’s not in the right place.
That’s it!
Your HubSpot service ticket form is embedded in the Site Builder page. Whenever someone fills out the form, a ticket will be created in HubSpot and will be assigned as you chose. If the contact has no record in your HubSpot CRM then one will be created.
Edit A Service Ticket Form In HubSpot
What happens when you want to edit a service ticket form in HubSpot? It’s not as simple as going into your forms and editing the one you created to be used as a support form. No, that would be too simple.
It’s still easy, though, and this is how you should go about editing your service ticket form in HubSpot. All of this is done in the HubSpot dashboard.
Step 1: Click the gear icon in the top right of your HubSpot menu.
Step 2: Click on the Conversations section to expand all options.
Step 3: Click the Inboxes link.
Step 4: Click on your Inbox.
Step 5: Click on the Forms menu item.
Step 6: Hover over the form you want to edit.
Step 7: Choose either to Edit Support Form or Edit Rules.
Notes: If you want to edit form fields, follow-up emails, or the look and feel then you’ll want to edit the form. If you’re looking to edit who the form is assigned to and other options for the created ticket then edit the rules.
That’s it for editing a support ticket form in HubSpot.
Delete A Service Ticket Form In HubSpot
If you’re no longer in need of the service ticket form you created in HubSpot, it’s easy to delete.
Here’s how you delete the support form.
Step 1: Click the gear icon in the top right of your HubSpot menu.
Step 2: Click on the Conversations section to expand all options.
Step 3: Click the Inboxes link.
Step 4: Click on your Inbox.
Step 5: Click on the Forms menu item.
Step 6: Hover over the form you want to delete.
Step 7: Click the Delete option. You may have to verify the deletion of your support form but that’s a simple OK or yes.
Now your support form is deleted from HubSpot.
Get The Embed Code Of A HubSpot Service Ticket Form
If you already created your form and need to get back to it in order to embed it into your WPHubSite website, this will get you there. You just need the embed code which can then be embedded anywhere in a page using Site Builder and the HTML module.
Here’s how you get the embed code.
Step 1: Click the gear icon in the top right of your HubSpot menu.
Step 2: Click on the Conversations section to expand all options.
Step 3: Click the Inboxes link.
Step 4: Click on your Inbox.
Step 5: Click on the Forms menu item.
Step 6: Hover over the form you want to embed.
Step 7: Click on the Share Support Form option.
Step 8: Click on the Embed code tab.
Step 9: Click on the Copy button.
Now you have the embed code in your clipboard and can paste it anywhere in your site including blog posts and pages using the Site Builder HTML module.