Creating Static Embedded BoldDesk Web Widget with Only Required Fields
This article explains how to configure a static, embedded BoldDesk web form that creates tickets using only the fields required for your workflow. It also shows how to exclude default fields (such as the Phone Number) that are not relevant to your process. This approach is ideal when you want a clean, controlled form layout that matches an external sample form and avoids unnecessary inputs.
Use Case
In some workflows, users expect:
- A static embedded Web Widget (not dynamic or auto-changing),
- Only specific fields to be visible,
- No default fields such as Phone Number, Category, Priority, or Type,
- Tickets to be created automatically upon form submission.
BoldDesk supports this requirement through custom ticket fields and Advanced Web Form Customization.
Prerequisites
Before configuring the web form, ensure:
- You have Administrator access in BoldDesk.
- Required custom fields (for example, Organization and Reason for Contacting TJ Tours & Travels) are already created. Explore How to Add a New Custom Field to a Ticket Form in BoldDesk.
Step-by-Step Configuration
Create the Required Custom Ticket Fields
- Navigate to Admin → Ticket Fields.
- Create all workflow-specific fields (for example):
- Organization
- Reason for Contacting TJ Tours & Travels
- Save and add the fields to the relevant ticket form.
Configure the Web Widget
- Go to Channels → Web Widgets & Ai Agent.
- Create or edit your form.
- Select Contact Form with Ticket Fields as the form type and select the preferred AI Agent.
- Add the required default ticket form.
Hide Unnecessary Default Fields (Custom CSS)
To remove default fields that should not appear (Category, Type, Priority, Phone Number), add the following under Advanced Customization → Custom CSS:
.widget-feedback-form-container{
.categoryId,
.typeId,
.priorityId,
.phone-number-field{
display: none !important;
}
}
This ensures only explicitly required fields are visible to end users. You may also modify the field names in the forms and fields to your preferred titles. For example, you can change “category” to “departments.”
Renaming Field Labels (Custom JavaScript)
If you need to rename a default field label (for example, changing “How can we help?” to “Message”), add the following under Advanced Customization → Custom JS:
var container = document.querySelector('.widget-feedback-form-container');
var helpLabel = container && (
container.querySelector('.product-header.description-field .custom-field-label[data-title="How can we help?"]') ||
Array.from(container.querySelectorAll('.custom-field-label'))
.find(function (el) {
return el.textContent.trim().startsWith('How can we help?');
})
);
if (helpLabel) {
helpLabel.textContent = 'Message ';
helpLabel.setAttribute('data-title', 'Message');
}
Check out this visual for more insights.
For a complete walkthrough on adding Custom CSS and JS, explore Advanced Settings for Configuring Contact Us Web Form. This script updates the label without impacting ticket creation or field mapping.
For guidance on embedding your web form in the customer portal, explore Embedding Web Widgets in BoldDesk Customer Portal Using Custom JS.
Final Result
After completing these steps:
- The web widget is fully static and embedded.
- Only the required workflow fields are displayed.
- Unwanted default fields are hidden.
- Ticket submissions behave normally and are created in BoldDesk.
Troubleshooting
A hidden field is still visible in the widget
- Confirm the CSS was added under Advanced Customization → Custom CSS for the correct web widget.
- Confirm the selectors match the current widget markup (
.categoryId,.typeId,.priorityId,.phone-number-field).
Ticket routing or automation behaves unexpectedly after hiding fields
- Check whether any automation rules depend on Category, Priority, Type, or Phone Number values being supplied via the form.
- Re-enable the field display (remove the selector from CSS) if the workflow requires the field to be user-provided.
The “How can we help?” label did not change to “Message”
- Confirm the script was added under Advanced Customization → Custom JS.
- If the widget UI changed, the selector targeting
data-title="How can we help?"may require adjustment (source notes that UI updates can require selector changes).
Frequently Asked Questions (FAQs)
1) Can I completely remove default fields instead of hiding them?
No. Default system fields cannot be deleted, but they can be hidden safely using Custom CSS, which does not affect ticket creation.
2) Will hiding fields affect ticket routing or automation?
No. Hidden fields do not interfere with workflows unless those fields are required by an automation rule. Ensure automations do not depend on hidden inputs.
3) Can this Web Widget be embedded on any website?
Yes. Once configured, the BoldDesk web widget can be embedded on the customer portal and any external website using the provided embed code.
4) Is JavaScript required for field customization?
JavaScript is optional and only needed for label updates or advanced UI behavior. Field visibility can be managed with CSS alone.
5) What happens if BoldDesk updates the widget UI?
Custom CSS and JS rely on widget class names. If the widget UI changes in the future, minor adjustments to selectors may be required.