Recent searches


No recent searches

Changing attachment label in request form.

Answered


Posted Mar 14, 2022

Is there a way to change the "attachment (optional)" label on the request form, to something else? 


1

19

19 comments

image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hey Ayub Mohamud, Just copy and paste it at the bottom of your script.js file

var label = $('label[for="request-attachments"]').html("ADD ANY TEXT HERE");







Note: Remove "ADD ANY TEXT HERE" and write your text, you can add here DC variable for multiple language support

 

Thanks

 

3


Hey Ifra Saqlain is it still up to date ?

Doesn't seem to work for me with Copenhagen theme.

Cheers for any update :)

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hi Max,

Use this line of code:

var label = document.querySelector('label[for="request-attachments"]').innerHTML = "ADD ANY TEXT HERE";

0


Hi Ifra Saqlain

Thank a lot if works perfectly !

Any way to also add a description to this field ? 😁

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

@Max, add this code to add description div:

var div = document.querySelector('label[for="request-attachments"]');
var p = document.createElement('p');
p.textContent = 'This is some data that will be appended to the div element';
div.appendChild(p);



Screenshot:

 

Output:

 

1


Ifra Saqlain

You're awesome ! is there any chance to link this description to a condition (e.g. if field is xxx then show this description, and if field is yyy then show this other description).

The finality is to ask for different attachments according to the previous values entered in the custom fields.

-------

As you seem to be an expert in Guide, I've seen other comments of yours on this topic and I was wondering if you've been able to find a solution to the last questions ?

We also have a form A for organizations A and a form B for organizations B. We're hiding the forms for the other organizations so that they can just see one, so I wanted to remove the dropdown menu because it only shows one form which is a bit of a bad UX.

If you can help on that would be awesome. Here is the piece of code I used for that

Many thanks !

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hi,

You can hide form selection dropdown using this code, add your organization where you want to hide dropown field:

var orgs = HelpCenter.user.organizations;
for (var i = 0; i < orgs.length; i++) {
if (orgs[i].name != 'Your_Organization_Name') {
$(".request_ticket_form_id").hide();
}
}

 

and, I can provide the solution based on form selection but field selection, page does not load and due to this nothing will update.

1


Hey Ifra Saqlain

Doesn't seem to work for me, I still see the dropdown form selector

I've added this to script.js

var orgs = HelpCenter.user.organizations;
for (var i = 0; i < orgs.length; i++) {
if (orgs[i].name != "FDC_62") {
$(".request_ticket_form_id").hide();
}
}

What if I want this behavious for all my users (and all organizations). Do I still need to define a "if" ?

I just want to remove the dropdown selector for everyone

Thanks

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Max can you share that public URL of your theme? so I can see the issue and try to fix that.

0


Ifra Saqlain

That Guide is unfortunately not public .. only for authenticated users.

Any other option ? 🫤

0


Do we know if we can limit any specific attachment type on this attachment add or drag drop ???

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hi Sandesh Kamath, if possible then explain some more about the query.

0


This is excellent and just what I was looking for.

I do have a couple of questions though....

1. Could I format the appended text - change color etc?

2. Is there a way to have the Attachment element as being conditional. I.E - only display it if a user checks the box of a field in the form?

0


image avatar

Brandon (729 Test)

Zendesk LuminaryUser Group LeaderThe Humblident Award - 2021Community Moderator

Hey John Kenny

Yes, both of these should be possible.  

To change the format of the text you're appending to a Zendesk custom field using JavaScript, you can use jQuery to target the specific label and then apply HTML with the desired styling.

Let's say you want to append text to a label for a custom field and make that text bold. Here's how you could modify your current code snippet:

javascriptCopy code
var label = $('label[for="request_custom_field_12345"]'); // Replace with your actual custom field ID label.html(label.html() + "<strong> ADD ANY TEXT HERE</strong>");

This code retrieves the current HTML of the label, appends the bold text, and then sets the new HTML back on the label.

If you only need to change the text content without appending anything, you can directly set the HTML like this:

javascriptCopy code
var label = $('label[for="request_custom_field_12345"]'); // Replace with your actual custom field ID label.html("<strong>ADD ANY TEXT HERE</strong>");

And if you want to add a class to the label for CSS styling:

javascriptCopy code
var label = $('label[for="request_custom_field_12345"]'); // Replace with your actual custom field ID label.addClass('your-custom-class'); label.html("ADD ANY TEXT HERE");

Then, in your CSS, you would define .your-custom-class with the desired styles.

Remember to replace "request_custom_field_12345" with the actual ID of your custom field. You can typically find this ID by inspecting the HTML of your Zendesk form and looking for the id attribute of the custom field's <input>, <select>, or <textarea> element.

Making the attachment required conditional is a little bit more complex since it is a default field.  

In Zendesk, you can't natively hide the attachment field since it's a default part of the ticket form and isn't controlled in the same way as custom fields. However, you can use JavaScript (along with jQuery if it's included in your Zendesk theme) to conditionally hide the attachment field based on the selection made in another custom field.

Here's a general approach to doing this with jQuery:

  1. Add a Trigger to the Custom Field: You'll want to listen for changes on the custom field that should trigger the show/hide action.

  2. Conditionally Hide the Attachment Field: Based on the value of the custom field, you will show or hide the attachment field.

Here is an example of how the code might look:

javascriptCopy code
$(document).ready(function() { // Replace 'custom_field_12345' with your actual custom field's ID var customFieldSelector = '#request_custom_field_12345'; // Function to show/hide the attachment field function toggleAttachmentField() { var selectedValue = $(customFieldSelector).val(); // Replace 'value_to_hide' with the value that should hide the attachment field if(selectedValue === 'value_to_hide') { $('label[for="request-attachments"]').hide(); $('#request-attachments').hide(); } else { $('label[for="request-attachments"]').show(); $('#request-attachments').show(); } } // Initial check in case the form is pre-filled or when the page loads toggleAttachmentField(); // Set up the change event listener $(customFieldSelector).change(toggleAttachmentField); });

You'll need to ensure that this JavaScript is included in your Zendesk theme templates so that it runs when your pages load. You will also need to replace the placeholder values such as custom_field_12345 and value_to_hide with the actual ID of your custom field and the value that should trigger the hiding of the attachment field.

Note: Modifying the default behavior of Zendesk forms can have unintended consequences, such as confusing users who expect to see an attachment field or causing issues with ticket submission. Make sure to thoroughly test any changes you make to ensure that they provide a smooth experience for your users and that you're compliant with any Zendesk terms of service.

Hope this helps!

0


Thanks Brandon

I am trying to get this to work by adding your script to the script.js file.

I have jQuery already in my theme.

I have a dropdown menu - say field ID 54321

If the value is Yes I want to hide the attachment field, but this doesn't appear to work.

Here is my code below taken from what you kindly provided:

 

  $(document).ready(function() { // Replace 'custom_field_12345' with your actual custom field's ID 
    var customFieldSelector = '#request_custom_field_54321'; 
    // Function to show/hide the attachment field 
    function toggleAttachmentField() { var selectedValue = $(customFieldSelector).val(); 
    // Replace 'value_to_hide' with the value that should hide the attachment field 
    if(selectedValue === 'Yes') { $('label[for="request-attachments"]').hide(); $('#request-attachments').hide(); } else { $('label[for="request-attachments"]').show(); $('#request-attachments').show(); } }
    // Initial check in case the form is pre-filled or when the page loads 
    toggleAttachmentField(); 
    // Set up the change event listener 
    $(customFieldSelector).change(toggleAttachmentField); });

0


image avatar

Brandon (729 Test)

Zendesk LuminaryUser Group LeaderThe Humblident Award - 2021Community Moderator

Hey John Kenny

I'm pretty sure you're going to need to use the tag associated with the value 'Yes' 

If(selectedValue === 'my_yes_tag') 

Try that and let us know if it resolves your issue

0


Thanks for all this helpful information.

I have another question: Is it also possible to edit the "Add file or drop files here" text?

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hi Jessica Strozyk,

 

You can try this code:

  document.querySelector(".upload-dropzone span").innerHTML = "<a href='#'> Hello World!</a>";

0


Hi Ifra Saqlain,

Thanks, that worked. Unfortunately, it broke the language selection that we have in the footer – it was not possible to select a different language anymore. Any idea why?

I used dynamic content instead of the text:

document.querySelector(".upload-dropzone span").innerHTML = "<a href='#'>"{{dc.add_file}}"</a>";

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post