Add Optional or Required Custom Fields to Your Contact Form

Last Updated -

Overview

Whether you're editing your Support Center contact form, your email widget, or your chat widget, it's possible to add one or more case or customer custom fields to your form. You can also make these fields required fields.
 

Prerequisites

  • Administrator access level or above.
  • Understanding of HTML and/or CSS.
  • Have your site whitelisted for Scripting. If you are unsure if this is already enabled Email Support
  • Familiarity with Liquid to easily customize the appearance of Desk.com Support Center. For more information about Liquid, see List of Liquid Variables.

 

Step 1: Create the custom field

For this example, we'll add a "Category" case custom field and "Favorite Color" customer custom field. Both will be a "list" type custom field, but feel free to use text, number, date, or true/false type for your custom fields.

To create a Case Custom Field, go to Admin > Cases > Cases > Custom Fields > Add Field.

We'll start with creating a case custom field named "Category" with a key of "category". The custom field Name is the name your internal agents see for this field. The Key is what your contact form code will reference.


Add your list custom field Data values. In this example, we are adding the Support, Billing, Sales and Other data options. Data values can be added by clicking the green "+" sign.

Once the Data values are added, the Edit Case Custom Field window should look like this:

 

The next step is to create a Customer Custom Field. Go to Admin > Cases > Customers > Custom Fields > Add Field.

Below is another example but for the customer custom field named "Favorite Color" with a key of "favorite_color". This will also be a "list" type custom field. For this example, the customer custom field and Data values have been added so should look like this:


 

At this point, you should have 2 new list type custom fields. The next step involves adding the necessary code to display the fields in your email or chat form.


Step 2: Edit your contact form using Desk.com Admin

Next, decide which contact form you want to add your custom fields to. Depending on which contact form you wish to edit, follow the corresponding steps below:

For the Support Center Contact Form, go to Admin > Channels > Support Center > Web Themes > Edit .
 


For the Email Widget, go to Admin > Channels > Email > Email Widget > Edit.
 


For the Chat Widget, go to Admin > Channels > Chat > Chat Widget > Edit.
 


This will take you to the theme list page for the theme type you selected. The theme marked 'Default' is the current live theme. You can either create a new theme or edit an existing theme.

If you are adding custom fields to your Support Center contact form (email), open the theme you wish to edit, then at the top click on the Advanced Themes tab.
 


On the left-hand side, click on Email (New) tab to view the form code. For the email and chat widget themes, simply click the theme title to view the form code.

Step 3: Add the custom field(s) to the form code

Now that you have your contact form open within the editor, copy the code below and place it between the code for the other fields, relative to where you want the newly created custom field to appear in your form.

Take note in the sample code below, where we are referencing the Category custom field now as ticket_custom_category when we named the key category when the custom field was created.

Here is an example of what the "Category" case custom field should look like once added to the form:
 

Now let's add the "Favorite Color" customer custom field. Again, copy the code below and place it accordingly in between the code for the other fields, relative to where you want the field to appear in your form.

Take note in the sample code below, where we are referencing the Favorite Color custom field now as customer_custom_favorite_color when we named the key favorite_color when the custom field was created.

Here is an example of what the "Favorite Color" customer custom field should look like once added to the form:



 

Note: If you receive an error that you need to have your script whitelisted when saving any of the themes, please Email Support.

Step 4: Make the field required (if you want to)

If you want to require the custom field to be filled out, place the following JavaScript code at the bottom of your contact form theme: 

If you're making a List custom field required, the first option of your list, even if it's " " (a space), "---", or "Please select an option" — isn't technically blank. So some special code is required to ensure your top option's value is blank. For this trick, see the sample code below.

Sample code

Below is an example of both a case custom field and customer custom field, with both required. This example allows you to require the fields individually and set a custom validation message for each field:

Below is an example of both a case custom field and customer custom field, with both set as required fields using JavaScript. This is a simpler solution that can be used when you don't need a custom validation message for each field and you're okay with having all drop-downs required: