Question
Can I add a disclaimer to a ticket form when a specific form is selected?
Answer
If you have multiple ticket forms, you may have some cases where you want to add custom disclaimers or notes to the ticket form, depending on which form your customers select.
jQuery is not provided by default. Make sure to import a jQuery library if you want to use jQuery statements in a theme in place of vanilla JavaScript. For more information, see the article: Importing or upgrading jQuery.
To add custom disclaimers
- Customize the JavaScript code of the help center theme.
- Place the code below anywhere in the script.js tab, as long as it is after
$(document).ready(function() {var selected = $('#request_issue_type_select option:selected').text(); if (selected == "Insert the name of your form to end users here") {
$('div.request_ticket_form_id').append('<p>Insert whatever disclaimer or note you want here!</p>');
} - If you want to add styling to the disclaimer, add an ID to the element, then style the ID as you'd like in the CSS of your template.
$('div.request_ticket_form_id').append('<p id="disclaimer">Enter whatever disclaimer or note you want here!</p>'); - Under style.css, enter the styling for your disclaimer. For example, use the code below to make your disclaimer red.
#disclaimer { color: red; }
Here is an example of how this looks like in the help center:
Disclaimer: This article is provided for instructional purposes only. Zendesk does not support or guarantee the code. Post any issues you have in the comments section or try searching for a solution online.
10 Comments
Many thanks for this very useful solution! The missing option to add text boxes to online forms is a massive limitation and this is a practicable workaround.
However, since we support several languages, I'd need to use it with a dynamic content placeholder. Is this possible? Simply replacing the HTML part of the disclaimer by a placeholder, for instance {{dc.placeholder_name}}, doesn't work.
[Edit: I solved it by simply making sure to use a different form name for each language and then assigning the corresponding text versions as suggested above.]
This doesn't work for me. I have added jQuery and placed the script in the script.js tab, after
$(document).ready(function() {I have replaced the "Insert the name of your form to end users here" with the name of my form.
Nothing changes.
When you select the form are you seeing any errors in the browser console?
Best,
Could someone update this article to reflect the latest Copenhagen theme code? script.js no longer contains this:
$(document).ready(function() {Thanks!
Hey Diana Iglesias Irvin, this should do the trick:
2nd step should be like this, add this code at the very end of your JS file:
$(document).ready(function() {var selected = $('#request_issue_type_select option:selected').text(); if (selected == "Insert the name of your form to end users here") {
$('div.request_ticket_form_id').append('<p>Insert whatever disclaimer or note you want here!</p>');
}
});
Also, please make sure to add at the end of your document head this one (cause the new Copenhagen doesn't have jQuery library by default):
Is there a way to add a disclaimer or note like this to the form that doesn't involve editing the theme template? We just switched from an old and outdated custom theme to Copenhagen in order to receive automatic updates, but it looks like if we implement something like this we'll become a custom theme again and lose that benefit.
This method is actually needed if you want custom disclaimers for multiple ticket forms. For this, it will really involve custom coding.
Would there be a character limit to this element? We're currently struggling to incorporate larger texts into forms.
Vlad How can you add this to the bottom of the form, between the attachment box and the submit button?
Or, how can I add it to the bottom of a field, but only display on certain forms? I have a field I need to do this to that is shared across almost all forms. BUT, I only need to add some text to it on one form.
You could make the disclaimer appear in multiple forms by adding additional checks in the if statement of the Javascript code example above -- for example:
if ((selected == "Form name 1") || (selected == "Form name 2")) {You could add several forms that way.
Please sign in to leave a comment.