Changing the {{t 'submit_a_request'}} to the form title

Hey Chris,  you want to show your current form name as a title instead of Submit a request, so you have to add this simple two-line script code to your script.js file.

1). Add jQuery Library to your document_head.hbs file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Screenshot for the same:

2). Go to your script.js file and paste it at the bottom.

$(document).ready(function(){

var getText = $('.nesty-input').text();
$('.new-req-title').html(getText)

});

Screenshot for the same:

3). Go to your new_request_page.hbs file, add div with the class-name and remove {{t 'submit_a_request'}}.

 Solution with only JavaScript code:

1). Go to your script.js file and paste only given two lines code at the bottom but under the DOM function.

var getText = document.querySelector('.nesty-input').innerText;
document.querySelector('.new-req-title').innerText = getText;

 Screenshot for the same:

2). Go to your new_request_page.hbs file, add div with the class-name and remove {{t 'submit_a_request'}}.

Output is:

If any confusion, do let me know :)

Thanks

Team Diziana

@ifra

I have done that and one form looks fine but on another its added a "-" into the name of the form which I have checked on admin and its all correct their

I believe the issue is the claim type as its picking that up as it is also a nested input?

Managed to fix it using the following 

var getText = $('.request_ticket_form_id .nesty-input').text();

I don't have that kind of field in my forms, so I couldn't see that, but no worries, you have fixed it now.

Fixing with parent class-name:

But happy to see that your main purpose with the title of the forms is working.

Hi @ifra, I'm trying to edit the title on my form and followed the steps above, but it doesn't seem to be showing the title on the Form. I want to change the 'Submit a request' to 'Submit feedback'. 

I see the title as it's loading and then the form's tip covers it. Did I enter the code in the right place? 

Hi Joanne Giang, you added the title on right place, may be there is some CSS issue because you are using Bootstrap classes so it covers the title.

You can inspect the form using dev tool. 

Hi,

I crated form in the admin panel. How to use that form in hbs file?

@Swapnali Padale, 

I'm attaching a screenshot you can see there--Tickets > Forms > Click Add FormsYou will get a list of forms > Select your new form >After ad dng click Save

Form will add to your dropdown bar > Go to New Request Page > Click dropdown bar and you can there is your form which you added > click that and that will be shown.

If any confusion drop a message :)

Thanks

Hi @swapnali, 

It seems that you would like your form to be visible to your end-users in the submit a request form. To add to what Ifra has suggested, you may check the option Editable for end users to allow users to use this specific form in Guide.

Hi @ifra & @arianne,

Thanks for suggestion. 

I followed your steps. But the thing is I want to show form on home page. Is it possible to write code to display form on home page by writing code in home- page.hbs or is there any other way to show form on home page?

Hi @swapnali

I'm afraid that what you are looking to do requires custom coding which is out of scope for what we support in Advocacy. Sharing with you this article you may find helpful: Customizing your help center theme 

As a workaround, you may offer the form in either the web widget classic or the messaging widget. The widget can be added on to the help center. 

Using custom ticket forms with the web widget (Classic)  

Hi @arianne,

I am not familiar with this but need to create the section which include the form on home page as shown in screenshot.

Please have a look and suggest me whether we can do this or not. 

@swapnali, 

See my comment in this thread

https://support.zendesk.com/hc/en-us/articles/4408839332250-Customizing-your-help-center-theme?page=5#comments

where I'm loading the request-list on home-page.

i). Add the given code to homepage.

<div id="home_container" class="container"></div>

 <script>
   document.getElementById("home_container").innerHTML=sessionStorage.getItem("page1content");
 </script>


Screenshot:

ii). Add the given code to your new_request_page.hbs page.

<script>
  var pageContent = document.getElementById("main-content").innerHTML; 
  sessionStorage.setItem("page1content", pageContent);
</script>


Screenshot:

Make sure classes and IDs are the same as in my code. Test and let me know if there are any issues.

Hi Ifra,

I followed the steps you described in your post (this is for renaming “Submit your request” for something else but it didn't work for me, the title is gone. 

1). Add jQuery Library to your document_head.hbs file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2). Go to your script.js file and paste it at the bottom.

$(document).ready(function(){

var getText = $('.nesty-input').text();
$('.new-req-title').html(getText)

});

3). Go to your new_request_page.hbs file, add div with the class-name and remove {{t 'submit_a_request'}}.

Published the changes but not only I don't see Submit your Request, I can't see the new title I entered either. Did I miss something else?

Thanks.