Change the text of the Submit a request link on your help center by editing the code in your theme.
The workflow includes the steps below.
Step 1: Verify the prerequisites
This change requires you to edit the theme code of the help center and is only available on Suite Growth plans or higher.
Step 2: Make a copy of the theme
To change the text of the Submit a request link on your help center, replace the text in the code that sets this text.
Before you make changes to your live theme, make a copy of the theme and update the copied version.
Step 3: Change the text
To change the text of the link
- In Guide, select the icon Customize design (
) in the sidebar
- On the theme you want to edit, select Customize to open the theme
- Select Edit code at the bottom of the page
- Select header.hbs and replace the following code:
{{link 'new_request' class='submit-a-request'}}
with the code
{{#link 'new_request' class='submit-a-request'}}Contact Us{{/link}}
Replace the text Contact Us with the text string you'd like displayed.
-
Select Publish to save the changes
The theme code will display the new text.
This change will only alter the display of the link on the home page and will not change any breadcrumbs on your site. If you would like this text to be updated wherever it is displayed, consider using Javascript or JQuery.
66 comments
Nick Sturrock
I found the simplest approach to change all instances of elements with text 'Submit a request' (in this case hyperlinks, page titles and breadcrumbs) in the Copenhagen theme was using the following Javascript, placed at the top of the script.js function inside the document.addEventListener('DOMContentLoaded', function():
3
Vovwe Muoghereh
Thank you @.... Your comment was exactly what I needed. I have next to no coding experience but was able to change the text by following your approach.
0
Yvey Colla
Hello,
I'm looking to add more fields to the Submit a Request Page in the Community section of our website.
In new_request_page.hbs I can see it's looking for {{request_form}} but where do I find the form to add new fields?
0
Jake Bantz
Hi Yvonne, ticket fields and forms are managed from within the Zendesk Support interface. Depending on your plan type, you can view what options are available by following the content attached to Designing and Optimizing your Ticket Forms.
I hope that is helpful to guide you through making the needed updates.
0
Lila Kingsley
Hello! I am wondering if I can make the "Submit a request" link send users to a special ticket form when clicked on specific articles...but send users clicking it anywhere else to the default ticket form as it does today.
From Jake's comment here, it appears you can set a specific ticket form for EVERY article...but what I want to do is a bit different, so hoping someone has some advice!
I believe it should be possible using if/else statements or is/isnt statements, but am having trouble constructing code that will work on the article page template. Below is code that I got to sort of work...but it only worked for the isnt block (the default form appeared on those articles) and not the is block (nothing appeared in the article footer on those articles).
CODE that partially works using sections
Note:
0
Ifra Saqlain
Hi Lila Kingsley,
You can achieve your point by doing this.
1). Check the section ID on article page.
2). Add the custom link for specific first ticket form of first section's articles.
3). Do same for specific second ticket form of second section's articles.
First_Ticket_Form_ID
Second_Ticket_Form_ID
Remove these strings and add the special ticket form IDs from the custom links:
3). Now, add the script code at the script.js file. This code is checking the form's ID of specific articles.
I can hide the dropdown by CSS but that's hiding by default for all ticket form so I have do like this.
Screenshot for the same:
here, Form_ID denotes the ID of that specific form where you want to hide the dropdown bar field. You will get the form ID in the searchbar.
4). When you have done with this, test well.
5). Example, I have two different sections with the articles and both section's articles contain different different ticket form because I have did the above code for two different section's articles.
Hope, you will get your point. If any confusion let me know, I can explain more :)
Thanks
Ifra
0
Lila Kingsley
Thanks Ifra, I appreciate your help!
One thing about the code for the article.hbs page though: I need
I'd prefer not to have to list all sections in the template code as that would be a maintenance headache. So I think I need nested IS/ISNT or nested IF statements + an ELSE statement. I've tried various approaches to this like the code in my original message above but nothing works--when article.hbs allows a save it either shows only one of the form links or NO form links.
0
Ifra Saqlain
I'll get back soon.
0
Ifra Saqlain
Hi, I have also tried working only nested isnt is working.
You can try this type:
Add regex for breadcrumb and check the category ID, If you would check the category ID then you won't need to check much IDs. By default your special form link would be hide.
Thanks
0
Lila Kingsley
@... Thanks again! I'm currently learning JavaScript so it's cool to see this code :) What is the $('.special-link') value you're setting specialForm to? I set the variables as written and did console.log() on them in the console, but I don't understand the results it returns for specialForm. Would it be the ticket form url for the users who click the submit request link on articles in the category/sections I want going to a new form (form A in my prior comment)?
And as a side note, I got the original section based code working using IS/ELSE using the structure posted by Chris in this comment
0
Ifra Saqlain
Cool that you got it finally.
$('.special-link') value you're setting specialForm to?
$('.special-link') - Class name
specialForm - variable
By default special form would be hidden and you are showing special form on specific articles by checking the category ID in the JS.
If those articles belong to that category then a special link would be. shown otherwise that would be hidden.
0
Lila Kingsley
Ah yes, I should have caught that...thank you @...!!!
I may investigate hiding the class '.form-field.select.optional.request_ticket_form_id' in CSS...I think we can update all our help center's contact form links to a specific form id and not use the generic helper {{request_callout}} or href="/hc/en-us/requests/new".
0
Craig Rich
Is there a way of changing the Channel Name when a user submits a request on the help center? Currently we get an email confirmation that says "Channel Web Form" and I would like to change this to make it clearer for tracking purposes (we have a number of different web forms across our business). Thanks all.
0
Dave Dyson
Hi Craig,
It's not possible to change how the channel is referenced within Zendesk, but assuming the email notification is being sent by a trigger (and presumably using the ticket.channel placeholder), I think you could use Liquid Markup in the trigger to detect that the channel is web form, and display a different text (whatever you want) instead of using the placeholder. For more information on using Liquid Markup, see Understanding Liquid markup and Zendesk Support
0
Allen Lai | Head of CX at Otter.ai
I'd like to change the URL to point to a custom form we created. How would I accomplish that by leveraging "article-more-questions" in the article_page.hbs template?
0
Ifra Saqlain
Hi Allen, you will have to follow the below simple steps:
1). Go to your script.js file
2). Now, you only need to copy and paste the below code at the bottom but under the DOM function.
See the screenshot of how I added it on script.js file:
If any issue, do let me know :)
Thanks
1
Chloe
Hi Ifra Saqlain,
We need as what Allen mentioned, to change the URL to our customised one. I done what you suggested by literally pasting your code at the bottom part of script.js file but it was not working (sorry that I am really a layman of coding and technical stuff). Maybe my format is wrong? Would you mind helping to take a look? Thanks a lot!
0
Ifra Saqlain
Okay don't worry, I'll fix it. I think you are out of
document.addEventListener('DOMContentLoaded', function() {
......
});
See how I added inside the
document.addEventListener('DOMContentLoaded', function() {
.....
});
Please have a look at the below screenshot:
Now, still having any issue, please share your HC public URL after setting the live your working theme, so I can figure out the issue :)
Thanks
0
Chloe
Oh yes, it works now Ifra Saqlain, thanks so much!
0
Ifra Saqlain
Awesome!
0
Ifechi Okobi
Hi Ifra Saqlain,
Please I want to do this for just the "Submit a request" button, how would I go about it?
Thanks in advance for your help.
0
Ifra Saqlain
Hey Ifechi, you just need to copy and paste the below code into your script.js file as I mentioned above.
For the article page - submit a request
Change the URL whatever you want, remove this one - https://support.zendesk.com/hc/en-us/articles/4408882823834?page=1#comment_4414491995034 - and add yours.
Thanks :)
Team Diziana
0
Ifra Saqlain
Hello Cris :)
You can add the attribute to open link on new tab.
In Jquery:
Screenshot:
Add Jquery CDN on document_head.js.
Screenshot:
By Javascript: Add the given line on script.js file.
Screenshot:
If any issue do let me know.
Thanks
Ifra
0
Ifra Saqlain
Happy to hear :)
0
Michael Laws
Hello. The original instructions updated the text for the link at the top. A second response seemed to aim at changing every instance of 'Submit a request'.
Different departments in my organization will use different forms, so I'd like to leave the link at the top and the list item (CompanyName > Submit a request) as they are. My goal is to change only the header text, and to change it per form ID so that each form can have its own header/title.
I know basically zero JavaScript, so please go slow with the response. Thanks ahead of time. :)
0
Ifra Saqlain
Hi Michael Laws,
You want something like this as in the given screenshots: Change the title for every form template.
First Form:
Second Form:
To get the above on your forms, copy the code and paste it at the bottom of your script file:
If any confusion feel free to ask :)
Thanks
Team
0
Brandon D.
I'm currently utilizing the method shared by Nick S. above and have implemented the following code:
Does anyone know if it's possible to use dynamic content in addition to this? That way "Contact Us" can be translated when a different language is selected?
I see that Zendesk automatically provides a translation, but I'd like to alter the wording a bit.
Highlighted below, you can see the 3 different instances where "Contact Us" is being translated:
Ideally, looking for a solution where I can implement Dynamic Content via 1 singular script that will replace, and translate, anywhere it's being referenced.
TIA!
0
Ifra Saqlain
Hi,
You can create DC and add DC placeholder in your code. See how I did.
i). Create DC.
Read this document to create : https://support.zendesk.com/hc/en-us/articles/4408882999066-Providing-multiple-language-support-with-dynamic-content
ii). Now, add DC placeholder into the JS code.
iii). Output
OR
Another way is:
https://support.zendesk.com/hc/en-us/community/posts/4409515211674-Help-Center-Change-default-placeholder-text-in-your-Search-Box?page=2#comments
If any confusion please ask :)
Thanks
0
Brandon D.
Hi Ifra Saqlain
Thank you so much for your quick response and help. After using your first method, I noticed that the "Submit a request" text did change over to "Contact Us" per my Dynamic Content rule, however, when I select Japanese as the language, it would still translate to the default translation of:
I was expecting, per my DC it should have been translated to:
Just to note and clarify, even without the script in place, when you change the language to Japanese "Submit a request" changes to: リクエストを送信
What finally worked was duplicating the code.
The top script references Submit a request, while the bottom references リクエストを送信
Submit a Request changed to Contact Us (English)
リクエストを送信 changed to 直接のお問合せ (Japanese)
0
Ifra Saqlain
Hey Brandon D.,
Now, you can try another way. Check the language using script code and add translations manually.
How to do,
i). Go to your new_request_page.hbs file.
ii). Add class name to your heading-
and, add template name at the top like this-
iii). Add element by it's class name like below.
$('h1.new-req-temp, a.submit-a-request').text('Contact Us');
$('.breadcrumbs li:nth-child(2)').text('Contact Us');
iv). Add the given code. Update the classes as per your classes of theme.
v). Make sure document_head.hbs file must has CDN of jquery.
Hope, it's worked for you.
Thanks
0