The Web Widget (Classic) allows you to customize the information displayed in your contact form in a number of ways. In this article, we'll discuss the following customizations:
- Adding custom ticket fields to the Web Widget (Classic) default contact form
- Removing the name field in the default contact form and ticket forms
- Making the name field in the default contact form and ticket forms a required field
- Using different ticket forms with the Web Widget (Classic)
This article includes the following topics:
Related article:
Adding custom ticket fields to the default contact form
Customers on any Support plan can choose to display one, two, or all visible, editable custom ticket fields to the Web Widget (Classic) contact form. On some usage plans, you can choose any number of custom ticket fields to display in the default contact form. For information on custom ticket fields, see Adding custom fields to your tickets and support request forms.
System ticket fields, such as the Priority field, are not supported in the Web Widget (Classic). They appear in the default contact form (and any other ticket form), when accessed from the help center, but do not appear in the Web Widget (Classic). Reordering fields is supported in the Web Widget (Classic) using the ticket forms, but not in the contact form.
Regular expression (Regex), Date, and Multi-select custom fields cannot be used in the Web Widget (Classic).
To display custom ticket fields in the default contact form
- In Admin Center, click
Channels in the sidebar, then select Classic > Web Widget.
- In the Basics tab, select the Contact form checkbox and click the
Custom ticket fields drop-down.
- Select the custom ticket fields you want to display in the contact form, or select Select all.
- Click Save.
Enabling multiple ticket forms in the Web Widget (Classic)
If you're on a Zendesk Suite or Support Enterprise or Enterprise Plus plan, you can use multiple ticket forms in the Web Widget (Classic). For a list, and for general information about how ticket forms work, see Creating ticket forms to support multiple request types.
Ticket forms allow you to customize the fields displayed in your contact form based on the type of request a customer makes. In order for this feature to work, you must have more than one ticket form created.
To enable ticket forms in your Web Widget (Classic)
- CIn Admin Center, click
Channels in the sidebar, then select Classic > Web Widget.
- In the Basics tab, select the Contact form checkbox and then select the Ticket forms checkbox.
- Click Save.
With ticket forms are toggled on, when a customer clicks the Leave us a message button, they're asked to select a form that matches their needs, from a list of all of your active ticket forms:
When they make a selection, the contact form displays fields specific to that ticket form.
Customizing field descriptions in Web Widget (Classic)
You can add custom ticket fields and their descriptions to the default contact form in the Web Widget (Classic). To make these appear, you must select the field from the Custom ticket fields option in the Web Widget (Classic) admin settings.
However, keep in mind that system fields, such as the Priority field, are not supported in the Web Widget (Classic). This is regardless of plan type. They appear in the default contact form, and any other ticket form, when accessed from the help center, but do not appear in the Web Widget (Classic).
Ticket forms are not available on all usage plans. If available on your plan, you can also include custom fields and their descriptions in ticket forms. To make custom ticket fields and their descriptions appear, you must enable the Ticket forms option in the Web Widget (Classic) settings.
You can create and edit ticket field descriptions from the Ticket Fields admin page. For more information about ticket fields, see About ticket fields.
To add a field description
- In Admin Center, click
Objects and rules in the sidebar, then select Tickets > Fields.
- Click the name of the field that needs a description.
- In the For end users section, click Editable.
- Enter a description for the field, then click Update field.
Advanced customization: Contextual ticket forms
You can craft more customized experiences for your users by limiting the forms the end user sees based on the web page they're currently viewing, by modifying the zESettings object in the Web Widget (Classic) JavaScript API. For information on working with the API, see Advanced customization of Web Widget (Classic).
In the code for the web page you want to modify, update the zESettings object to include the ID number of the ticket form(s) you want to surface. Your Ticket Forms ID is listed in the URL in the Ticket Forms admin page.
To locate a ticket form ID number
- In Admin Center, click
Objects and rules in the sidebar, then select Tickets > Forms.
- Click the name of the form you want to hide, or to use as your standalone form.
- Take note of the form ID in the address bar:
Use the following examples to modify your website code.
To display a single ticket form:
<script type="text/javascript">
window.zESettings = {
webWidget: {
contactForm: {
ticketForms: [
{ id: ###### }
]
}
}
};
</script>
To display two ticket forms:
<script type="text/javascript">
window.zESettings = {
webWidget: {
contactForm: {
ticketForms: [
{ id: ###### },
{ id: ###### }
]
}
}
};
</script>
Add additional IDs to the zESettings object as needed.
Advanced customization: Pre-populating text fields
You can use new settings to pre-fill certain fields. You can use different strings for different locales, or use one string for all locales by using an asterisk (*) for the locale. This is similar to other customizable text strings like Contact Form title.
To pre-fill a system field like 'subject' and/or 'description' , update the zESettings object as shown below.
Example: Prefilled description text
Use the following code:
<script type="text/javascript">
zESettings = {
webWidget: {
contactForm: {
fields: [
{ id: 'description', prefill: { '*': 'This is prefilled description text' } }
]
}
}
};
</script>
Example: Prefilled custom field:
Use the following code:
<script type="text/javascript">
zESettings = {
webWidget: {
contactForm: {
fields: [
{ id: #####, prefill: { '*': 'Desired text' } }
]
}
}
};
</script>
In this code block, id: #####
is the custom field identifier.
You can elect to always prefill a particular field in all of your forms, or prefill it separately in specific forms.
Code example: Different text for the same field in different forms:
<script type="text/javascript">
window.zESettings = {
webWidget: {
contactForm: {
ticketForms: [
{
id: ###TicketFormID###,
fields: [
{
id: 'description',
prefill: {
'*': description
}
}
]
},
{
id: ###TicketFormID###,
fields: [
{
id: 'description',
prefill: {
'*': 'different description'
}
}
]
}
]
}
}
};
</script>
32 comments
Elijah
Are there any plans to support multi-select ticket fields in the web widget? Not being able to use all ticket fields in the web widget is a major drag.
1
Manny Ordoveza
I cannot see a "custom ticket field" in the widget customization settings.
1
Avery Tritch
I don't have any option in Channel -> Widget to add Custom Ticket Fields to the Contact Form. Where can I activate this?

2
Elaine
You should be able to add a checkbox custom ticket field on the widget by making sure of the following:
As a guide, please do check the screenshot below on what it's supposed to look like:
Hope this helps! Keep safe!
1
Roman Alekseiev
Is it possible to set assignee from Web Widget?
I tried to set id of assignee custom field but it still assigns ticket to whole group. Maybe it is because of triggers, I do not know
0
Jim
I'm afraid to say that it's not possible to set the ticket's Assignee using the Web Widget, at this time. The only functionality that can help you route or assign automatically the ticket to a particular assignee, is the use of Trigger. We encourage you to submit feedback regarding this, by visiting this link.
Best,
Customer Advocacy Team
0
Adam Prince
We have SLAs tied to assigned Priority values, we can make that an available field in the form shown through the Web Widget?
0
Diogo Maciel
https://support.zendesk.com/hc/en-us/articles/4408822236058-About-triggers-and-how-they-work
0
Brandon Jones
So what if we want to make it so that the web widget does not display certain forms unless someone is logged into our site and their site login username (email address) matches their Zendesk login username (email address)?
Example, we have our HC code edited so that only logged in users with certain user tags can see certain forms. Is there a way to make the classic web widget mirror this?
1
Mihir Zalavadiya
In the Form Can we give read-only permission in custom field??
If yes how?
1
Nara
Thanks for writing in. At this time with the Classic Web Widget out-of-the-box, there is no way to offer different ticket forms based on specific end-user credentials. That said, it is possible to surface specific forms in the widget's code itself using custom code, via the ticketForms section of the Web Widget's Settings Reference here. However, custom scripting on the page will need to be implemented outside of ZD in order to determine what forms to then surface based on the end user's credentials which falls outside of our scope of support here.
1
Raphaël Péguet - Officers.fr
Hi Zendesk Team,
It would be nice to write/explain in the field creation interface that it is not possible to add this kind of fields (date, multiple selection, regex) in the web widget. We have to do it to know it..
Best regards,
1
Chad Susa (Gravity CX - Zendesk Partner)
Good point Raphaël Péguet - Officers.fr. I wonder if a list exists somewhere of what fields work in the classic web widget. Maybe hidden in the help centre.
Nice clear article listing what works and doesn't that will help us self solve rather than spend time building the form, checking in the widget, not seeing the field appear, spend 30 mins researching why it doesn't appear (with no clear answer) and then possibly raising a ticket. Perfect chance to enhance Zendesk Self Service.
0
Anne Ronalter
the following sentence has now been added to the article stating which fields do not work:
"Regular expression, Date, and Multi-select custom fields cannot be used in the Web Widget (Classic)."
0
Usman Saeed
Can i change the custom field label name using this script like prefill?
0
Dave Dyson
No, you can't change a field label that way, but you can use JavaScript to change the label in a ticket field -- here's an example that changes the labels of the Subject and Description fields, but you can do the same for a custom field by substituting
for=request_custom_fields_{id}_label
with the id for that custom field (no brackets), in place offor=request_subject
: Rename the "Subject" and "Description" labels on the Request form0
Usman Saeed
Thank you @...
I can change the custom field label for help center ticket form using this line of code: $('label[for=request_custom_fields_30057292]').html("Rename label");
But i want to change the custom field label for web widget.
here is the code i use to change the description and custom field hint
For web widget how can i change the custom field label using above script.
0
Christopher Kennedy
The hint property allows you to specify the field's description, but it won't change the field's title/label within the widget. You may set the Title shown to customers value in the ticket field's settings to display your desired field title to end-users.
0
Usman Saeed
Christopher Kennedy Thanks for reply.
Can I change the field's title/label using web widget script? like we do change hint/description for any field.
0
Christopher Kennedy
It's not possible in a script using the Web Widget APIs. The widget will display the title of the field from admin settings.
0
Usman Saeed
Christopher Kennedy Thanks for the update.
Any reason why we can't change custom field title/label for end users using Web Widget API Script.
0
Christopher Kennedy
0
Usman Saeed
Okay Thanks for the Help Christopher Kennedy
0
Christopher Kennedy
0
mfg
You can custom a limited number/selection of forms by adding the snippet for the widget to a different brand.
We have 10 forms total. Brand A has 8 forms associated with it. We only want to focus on 3 of them to show up in the Help Center widget. I created a Brand B that we don't actually use, associated those 3 forms with it, and used the snippet for the Brand B widget to embed it on Help Center A.
You'd probably want to have a trigger in place to change the brand back to A, and will need assignment triggers updated if you're using brand as a condition, but this allows you to have the subset of forms you're customizing for.
Nara
0
Ester Marlasca
I don't think this article is up to date anymore, the edit section of the web widget looks completely different.
0
Aimee Spanier
Hi, Ester Marlasca. Can you confirm for me that you're using the older Web Widget (Classic), and not the messaging Web Widget?
Comparing the Zendesk Web Widgets includes some ways you can tell the difference.
0
Milena Rusanova
Hi,
We would like to add some additional information to the request, but not give the end-user the option to delete or modify it.
For example, if the customer wants to contact support with the web widget, because he has encountered an error on our website, we would like to send the error code to the support agent.
Can I use the web widget script with "prefill" to add information to a custom ticket field that is not displayed to the end user?
Or make a field read-only, so the customer will still see it in the widget, but won't be able to delete the content?
I tried to add a text field with settings "Customer can View", but it does not appear in the widget.
Does this mean we won't be able to prefill it?
Thanks!
0
James G
Once you confirm the that type of widget you are using is Classic and still not able to see the settings mentioned in this article, feel free to send us a ticket so we can further check - Contacting Zendesk Customer Support
Hello Milena,
Yes, you can use the method in this section Advanced customization: Pre-populating contact form text fields of the article to achieve it. However, please be advised that hiding a custom ticket field in the contact form within the Web Widget (Classic) is currently not supported. Here's a feedback about that - Feature Request: Hide ticket fields in web widget. Lastly, one of the requirements for adding a custom ticket field to the contact form is that customers should be able to edit it, and setting it to "Customer can view" means the ticket field cannot be added to the contact form hence we won't be able to prefill that field.
0
Kaitlin Hilts
I don't have the web widget option. Under 'Classic', I just see 'Mobile SDK'
0