How can I make a text custom field dependent on a list custom field value?

Last Updated -

Introduction

Desk's Dependent Dropdown feature allows you to dynamically adjust dropdown options based on prior dropdown selections. For example, if a customer selects Billing from your 'Support Category' dropdown, perhaps you only want the 'Support Sub-Category' dropdown to display billing related sub-categories such as 'Order Status' or 'Request Refund.'

But what if you want to show or hide a text custom field — such as 'Order ID' — based on a dropdown selection? While not supported by the product, you can achieve this with a bit of custom JavaScript code on your contact form.

Step-by-Step Guide

Step 1 – Setup Your Custom Fields

For the purpose of this scenario, let's say you have two list custom fields (Category, Sub-Category) and one text custom field (Order ID).

First, ensure you've properly set up these dependent dropdowns so that the correct sub-categories per category are shown (here is how). Next, ensure the text custom field you wish to use is created (here is how).

Step 2 – Add Fields to Your Form

Access your Desk contact form code. If you're using a widget, follow this guide. Otherwise, if you're using a web theme, use this guide.

In your form code, we're going to place the text custom field directly beneath the list (dropdown) custom field that reveals it.

Step 3 – Add JavaScript Logic

At the bottom of the form code, use the following JavaScript to power the show/hide logic.