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.
21 Comments
This is an awesome tip. Thanks for sharing!
Really great tip! Thank you for sharing! Maybe one more thing from me:
If you want to add more disclaimers to the page it's better to use Classes instead of IDs,
so this part from the code:
should be
and
#disclaimer { color: red; }to this
.disclaimer { color: red; }Great suggestion, Vladan! One thing to look out for when using classes is specificity issues. If you're using the Copenhagen theme, there's some default styling that will override
.disclaimer { color: red; }so, for the Copenhagen theme, you'd need to use something like
.form-field .disclaimer {color: red;}to have your styling show up in the form field!
Ahhh, good catch, Leah!
This looks super helpful.
One question, if I want this translated, can I use Dynamic Content to deliver the disclaimer text in different languages?
@Martin - That shouldn't be an issue. If your more advanced you can add the dynamic text into the Settings Panel and that way you could easily change the dynamic content without touching your code. I have an entire Dynamic Content section for this Zendesk site and set it all up in the Settings Panel so it could easily be modified or swapped out by someone non-technical. If you would like to see how that looks let me know and I'll post a screenshot.
I'm having some issues with this – I've changed the text in the following to be the name of the from but it doesn't seem to work. I'm wondering if this is because the from name is a dynamic content placeholder? Is it possible to identify by the Form ID instead of the name of the form?
Hi Martin,
So it is true that the Dynamic Content would not work within the modify.js. However, if you take that same code and put it in on the Ticket Form template within a JS code block, with the Dynamic Content form name, that should still allow it to process! The JS can still go through on that template, and that way it will process it with the proper Dynamic Content ticket form name.
@Wes Drury can you still upload a screenshot of how you've set up the settings panel?
Hey Martin,
If Wes is unable to provide a screenshot, I would encourage you to take a look at the following article which goes over using dynamic content: Providing multiple language support with dynamic content (Professional and Enterprise)
Hope this helps point you in the right direction!
Hey Brett
Thank you for the link!
I'll take a look at it and see if it can help with my problem.
Hello. I would love to be able to do this with a custom field, rather than the ticket form selector.
User selects from the drop down, and disclaimers are populated below the field as a result.
Is that possible?
I have the same question as Colin, but with dynamic text.
I can't comment on how to do this with dynamic text, but I did write a post here about how to observe changes in a custom field dropdown and then take an action when a particular option is selected. You might be able to use some of the code for your need to perform an action when an option is selected.
Hi Colin & Raul -
It's not the "cleanest" solution, but you could accomplish this by leveraging a required checkbox ticket field wherein the description is the disclaimer and the field is conditional based on the custom field dropdown choice.
The end result looks something like this:
Hope this helps!
Brandon
Thank you Brandon Tidd and Karen Snyder, I will try these out!
Hi,
The code is not working as expected. Can someone please help
Hey Shashank,
Could you provide the exact code you're using? That may help us troubleshoot this issue.
Thanks!
var selected = $('#request_issue_type_select option:selected').text();
if (selected == "Test Disclaimer") {$('div.request_ticket_form_id').append('<p>Insert whatever disclaimer or note you want here!</p>');}Hi, have just tried this article's instructions. No text shows and there is a javascript error in the browser js console.
Code used:
var selected = $('#request_issue_type_select option:selected').text();
if (selected == "Partnerships/Integrations Inquiry") {
$('div.request_ticket_form_id').append('<p id="request-form-disclaimer">test</p>');
}
JS console error:
script.js?digest=360172894738:33 Uncaught ReferenceError: $ is not defined
at HTMLDocument.<anonymous> (script.js?digest=360172894738:33)
Karolina I would guess the error is occurring because you are probably using a Templating API v2 theme, which does not automatically include jquery. This article explains how to include jquery in your theme.
Please sign in to leave a comment.