Customize BoldDesk Web Forms with Custom CSS & JavaScript
BoldDesk web forms allow administrators to tailor both appearance and behavior using Custom CSS and Custom JavaScript (JS). These customization features give you precise control over how embedded forms look and behave on your website without altering global BoldDesk settings.
This article explains the scope, limitations, procedures, examples, and best practices for safely applying custom code to BoldDesk web forms.
Please check the video tutorial for more insights.
Scope
- Custom CSS applies only to the web form where the CSS is saved.
- Custom JS applies only to the web form where the JavaScript is saved.
Operational Impact
- Custom CSS/JS changes the customer-facing web form experience.
- Incorrect CSS selectors, invalid CSS/JS syntax, or DOM assumptions can break form layout or behavior.
- If BoldDesk updates web form markup (DOM structure, class names), custom selectors may stop matching and require updates.
How to Add a Custom CSS
To add the Custom CSS, follow the steps below.
- Go to the Admin > Channels > Web Forms.
- Select the web form to which you want to apply the Custom CSS.
- Add additional CSS to override the existing styles of the web form.
- For example, you can add the style as shown below.
.widget-feedback-form-container .form-builder .phone-number-field {
display: none;
}
How to Add a Custom JS
-
Select the web form to which you want to apply the Custom JS.
-
Add the Custom JS for the web form.
-
For instance, use this as custom JS for changing static field Label
Example: this script will change the label text of field “How can we help?” to “Description”
var label = 'Description';
var element = document.querySelector(".description-field .custom-field-label");
element.setAttribute('data-title', `${label}`);
element.innerText = `${label}`;
- Any custom code you add to the web form is your responsibility. Please take care when making these modifications because they could cause an impact on your customer experience.
- When incorporating CSS or JS, please use proper syntax.
Frequently Asked Questions
-
Does Custom CSS and JS apply to all web forms?
No. They only apply to the specific web form where the custom CSS or JS is added. -
Can Custom CSS hide a field from customers?
Yes, if the CSS selector matches the field container in the embedded web form DOM. Example: hiding the Phone Number field using.phone-number-field. -
Why did my CSS selector stop working?
If BoldDesk updates web form markup (class names or DOM structure), selectors may no longer match. Update the selector to match the new structure. -
Why is my Custom JS failing with an error?
A common cause isdocument.querySelector(...)returningnull. If the selector does not match any element, subsequent operations on the variable will fail. -
Does custom code affect only the UI, or does it change underlying ticket data?
The provided examples affect web form UI rendering and label text. Any impact beyond UI depends entirely on the specific custom JavaScript written.
