How to Add a Custom Label Above the Form Dropdown in BoldDesk
This guide explains how to add a custom label above the form dropdown in your BoldDesk Customer Portal using Custom JavaScript. By implementing this script, you can display a label such as “Choose a form:” to make the form selection clearer and more intuitive for your customers.
Why Add a Custom Label?
- Improves usability: Helps customers understand what the dropdown is for.
- Enhances accessibility: Provides clear context for screen readers.
- Customizable: You can change the label text to match your brand tone.
Steps to Implement
Follow the steps below to add a custom label above the form dropdown in your BoldDesk Customer Portal.
1. Navigate to Custom JavaScript Settings
-
Go to Admin → Customer Portal → Customization → Custom JS in your BoldDesk admin panel.
2. Add the JavaScript Snippet
Insert the following code in the Custom JS section:
const formWrapper = document.querySelector('#form_type_wrapper');
if (formWrapper) {
const newLabel = document.createElement('label');
newLabel.className = 'custom-field-label';
newLabel.textContent = 'Choose a form';
formWrapper.parentNode.insertBefore(newLabel, formWrapper);
}
Explanation of Code:
document.querySelector('#form_type_wrapper')selects the form dropdown wrapper.createElement('label')creates a new label element.insertBefore()places the label above the dropdown.
3. Save and Verify
- Click Save.
- Refresh your Customer Portal page.
- You should now see the label “Choose a form” displayed above the form dropdown.
Before and After Customization
Before
After
Once saved, the label will appear above the form dropdown, improving clarity for customers when selecting forms.
- You can customize the “choose a form” text to your preferred wording to better suit your requirements.
- To remove the custom label, delete the custom JavaScript added within the customer portal customization settings.
Frequently Asked Questions (FAQs)
Q1: Can I style the custom label above the form dropdown?
No, you cannot add style to this label.
Q2: Will this affect other forms?
No. The script targets only the element above the form field and not the form.
Q3: Can I add multiple labels?
No, you cannot add multiple labels at the same time.
