Disclaimer: Support tips are provided for instructional purposes only. Zendesk does not support or guarantee the code. Zendesk also can't provide support for third-party technologies such as JavaScript, jQuery, or CSS. Please post any issues you have in the comments section of the Support Tip and hopefully someone will be able to help you. Or you can always search for a solution online.
Question
Can I add a disclaimer to a ticket form when a specific form is selected?
Answer
For those who have multiple ticket forms that users can choose from to submit a request, you may have some cases where you want to add custom disclaimers or notes to the ticket form, depending on which form the user has select.
jQuery is not provided by default. Make sure that you import a jQuery library if you want to use jQuery statements in a theme in place of vanilla JavaScript. See Importing or upgrading jQuery for more information.
To add custom disclaimers
- In Guide, click the Customize design icon (
). - Click the theme you want to edit to open it.
- Click the options menu, then select Edit Code.
- Click script.js to modify the JavaScript.
- Place the following code anywhere in the 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 would like to add styling to the disclaimer, you can do so by adding an Id to the element, then styling 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 Edit Code > style.css, enter the styling for your disclaimer. For example you could use the code below to make your disclaimer red.
#disclaimer { color: red; }
Here is an example of what this looks like in the Help Center:
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.