R - How to Add Required or Custom Fields to a Widget or Web Form in Desk.com

Last Updated -

Desk.com gives you a flexible way to take customer questions with the "Contact Us" form. A few common ways customers like to personalize this form include:

  • Adding a custom field to your form
  • Adding a drop-down custom field to your form
  • Changing the subject of your Contact Us field to a drop-down field

Adding a Custom Field

Determine whether you want to add a case field (a field that's added to every case), or a customer field (a field that's added to every customer, but not every case).

For this example, we'll add a case field called "Order Number".

To add a custom field in Desk.com, go to Admin --> Case Management --> Cases --> Custom Fields. Click Add Field to add a field (you can choose between Text, Number, True/False, Date, and List types, and can have up to 25 custom case fields.)

Pay attention to the key name you enter in the case custom field dialog - you'll use it to reference the field in the Contact Us form. In this case, the label of the field will be "Order Number" and the key name "ordernumber."

Widget or Contact Us Form?

If you're using the Desk.com Email Widget (a form that you link from either Desk.com or from your web site), go to Channels --> Email --> Widgets and click Add Template.

Add the following code to your widget to display the field inline:

Here is the syntax for custom case fields:

<div class="input">
       <span class="form_label">Order Number:</span> {{ ticket_custom_ordernumber }} 
</div>
 
Here is the syntax for custom customer fields:

​<div class="input">
       <span class="form_label">Customer Type:</span> {{ customer_custom_customertype }} 
</div>


Desk.com will use the type of form field to write out an input field, checkbox, date picker, or select list depending upon which field type you pick. Use the format "ticket_custom_keyname" where key name is the key name you picked, e.g.

When you're finished, save the template and click the Default button to make this active or default widget.

If you're using the Contact Us form in Desk.com, you'll need to elect our Advanced Portal Templates feature to customize the Contact Us form. You can do this by logging into Desk.com as an account that has Billing Administrator privileges.

Then, visit Channels --> Support Center --> Web Templates and click Add Template.

Click Advanced Mode to enter the editor for the Contact Us page - if you haven't already elected the Advanced Portal Template Editor, you will prompted to add this feature.

(Note: if you don't have Billing Administrator rights and the feature has not been activated, you will not see the Advanced Mode button.)

Find the Email (New) section and add your field there, e.g. if your field is called "Order Number" and has a key name of "ordernumber"):

<div class="input">
       <span class="form_label">Order Number:</span> {{ ticket_custom_ordernumber }} 
</div>

Check out this video that shows you how to add a custom field to your email form

Adding a drop-down field to your custom field is similar to adding a custom field - just add a custom field of list type in the Admin Panel, add the field to the form as you do above and Desk.com will add the select field to your widget.

You can also style a field as a drop-down field manually. Let's say you wanted to offer options for color choice and wanted to store the color in a text field. If this field were called "color_choice", you could write:


<select id="ticket_custom_color_choice" name="ticket[custom_color_choice]">
       <option selected value="">Please select one</option>
       <option value="black">Black</option>
       <option value="white">White</option>
       <option value="orange">Orange</option>
</select>
 

Note: if the fieldtype in Desk.com for your custom field is set to list, the option values for your select options must match exactly to the case-sensitive values within the list field in Desk.com.

Changing the Subject to a Drop-down Field

In a widget or a contact us form in Desk.com, the subject field is written out by the code:

       {{ email_subject }}

Changing this code from an input field to a select field is easy; simply remove the email_subject call and add HTML as follows:

<select id="email_subject" name="email[subject]">
        <option select value="">Please tell us why you're contacting us</option>
       <option value="Kudos">I think you're great</option> 
       <option value="Having a problem">I'm having a problem</option> 
       <option value="Please contact me">I need someone to contact me</option> 
</select>

Adding the option with no value will preserve the existing functionality of the form that forces you to enter a value for the subject.

Adding a Required Field

  • Decide which fields you'd like to validate and then add a jQuery rule to require them using the element name of the html element to scope the selection, e.g.
     
    $("#customer_last_name").rules("add", { required:true, messages: { required: "! required" } });

Finally, wrap the entire set of rules inside of a document.ready() function to invoke them when the page is loaded.

Here's an example chat widget template that demonstrates adding validation for a custom field called "mytestfield" that's the first custom field in this Desk.com instance and two customer fields (last_name and first_name).

Find the template here: https://gist.github.com/6963a19c6a5c48674646

Related Articles