Introduction

Zendesk has ticket forms but they are limited in scope and functionality. In this tutorial we will learn how to create a dynamic ticket form in FormCrafts that creates new ticket / requests in your Zendesk account.

1. Create an new account

Signup on FormCrafts and create a free account. On the FormCrafts dashboard click on New Form -> Blank to create a new form. You don't have to begin with a blank form though. If you click on Template you can view a host of support templates, and you can begin with one of those templates instead.

If you are using a template you can skip Step 3 below.

New blank form screen
New blank form screen

2. Enable Zendesk on your form

On the form edit screen click on the Addons button on the top-left corner, and go to the Support tab. Here we can Enable the Zendesk addon. In the pop-up you have to enter the Zendesk login credentials to give FormCrafts access.

Enable Zendesk addon
Enable Zendesk addon

3. Add fields or use the form wizard

(If you used a template to create your form you can skip this step.)

There are two ways to go about adding fields to your form. You can use the Add Field button on the top-right corner and manually add fields, or you can use the form wizard.

Manually add form fields

We will use the Add Field button on the top-right corner to manually add the following form fields.

  1. A One-Line Input field labelled Your Name
  2. An Email field labelled Your Email
  3. A Checkbox field labelled How Important Is Your Issue?
  4. A Comment field labelled Describe the Issue
  5. A File Upload field labelled Attach Files
  6. A Submit button

We need to set the correct options for our checkbox field. Edit the field, and look for Autofill next to Options List. Clicking on an item here allows you to fetch field options from Zendesk and auto-create them in your current field.

Zendesk ticket forms: choice field
Zendesk ticket forms: choice field

Options under Options List follow this format:

value==text

The string before == is the value (which is submitted to Zendesk) and the string after == is the text (which is what the customer sees).

Our Zendesk ticket form should look like this now:

Zendesk ticket form - basic
Zendesk ticket form - basic

Use the form wizard

If you don't want to manually add fields you can use the Form Wizard feature. It allows you to auto-create a ticket form based on your Zendesk ticket fields. Once we have enabled the addon, we should see a Form Wizard button.

Using the Zendesk form creation wizard
Using the Zendesk form creation wizard

When you click on Form Wizard you would be able to select the fields you would like in your form. The wizard would create a Zendesk ticket form based on those fields and also map each FormCrafts field to its respective Zendesk counterpart.

Our Zendesk ticket form should now look like this:

Creating a Zendesk ticket form
Creating a Zendesk ticket form

You can change the appearance of your form by clicking on Styling on the top-left corner. You can also edit the fields and change the text.

4. Map form fields to Zendesk

We have a functional form and we have enabled Zendesk on the form. However we aren't ready to go yet. The last (and important) step is to link form fields to their respective Zendesk counterpart. If you used the form wizard above this has already been done for you, but if you added fields from a scratch or used a template this is something you would do now

You can map form fields to Zendesk fields under the Addons sidebar. Our mapping should look like this:

Zendesk ticket form field mapping
Zendesk ticket form field mapping

Note that we have mapped Response Summary to Comment. This would summarize our ticket form answers, neatly format them, and add them to the Zendesk ticket body.

5. Show Zendesk ticket ID on submit

Optional step. When the customer submits our Zendesk ticket form we show them a 'thank you' message. We can customize this message to include the ticket ID, among other things.

Edit the thank you message to include the tag [Zendesk Ticket ID] so users can see their ticket ID when they submit the ticket.

Zendesk ticket form thank you message
Zendesk ticket form thank you message

When you are ready, click Preview on the top-right corner. You can now submit the form and it should create a new Zendesk ticket.

View ticket ID on Zendesk ticket form
View ticket ID on Zendesk ticket form

Advanced ticket form features

Update existing tickets

In the above tutorial we learnt how to create a new ticket. You can also use FormCrafts to update an existing ticket in Zendesk.

Firstly, add a hidden field in your form and label it Ticket Id.

Next, when configuring the Zendesk addon change the action from Create to Update. Now map the Ticket Id field to Ticket Id. Our mapping should look like this.

Zendesk ticket form to update an existing ticket
Zendesk ticket form to update an existing ticket

We have mapped the hidden ticket Id field to Ticket Id in Zendesk. How to we populate the ticket Id in this hidden field? One way is via URLs. You can include the Id in the URL of the page where the form is embedded, like this:

https://example.com/contact-form?field32=xxxxx

Here field32 is the Id of the hidden ticket Id field. The last thing you need to do is go to Settings -> Others and check the option, Pre-fill fields from URL attributes

Conditional logic

This is one of the biggest reasons to use FormCrafts over default Zendesk forms. Here's a good example of a Zendesk ticket form with conditional logic.

The form presents the user with 4 assistance options: Booking, Complaint, Feedback, or Other. If the user selects Booking the form shows Booking-related fields. If the user selects Complaint the form shows complaint-related fields.

You can also use conditional logic to create a ticket only when certain conditions are met. For example, we only want to create a Zendesk ticket when the user selects Complaint. If the user selects Booking we will email the booking team at booking@example.com.

Multi-step forms

Sometimes you need to ask for a lot of information before creating a ticket. A lengthy form will appear daunting to your users. FormCrafts allows you to split your form over multiple pages.

You can also:

  1. Have a cover page for the form
  2. Show form page progress
  3. Show overall form progress, updated with each field

Styling and customization

You can add any length of descriptive text to your form. You can add images anywhere. Your form can have a thumbnail logo and a full-sized logo. You can have image-selection fields. You can modify the colour scheme. You can edit the thank you message, the email confirmation, and loads more.

Zendesk ticket form templates

Creating ticket forms starting from blank can be exhausting. We have a collection of well-curated Zendesk ticket form templates. You can use any of these templates as a starting point.

To use a template, go to your FormCrafts dashboard and click on New Form -> Use Template.

Other Information

If your tickets are not making it to Zendesk you can view the error logs.

Learn how to embed forms on your Zendesk help center.