Disabling the subject and description fields on the new request form in Help Center

Return to top
Have more questions? Submit a request

99 Comments

  • LodiseSam

    Do I need quotes around the ticketForm variable?  Without quotes, the if statement breaks all of my forms completely.  As in no fields at all.

    Second, the code works without the if statement, but does nothing with the if statement.  Can you take a look below and see if I am doing something wrong?  Maybe its not the exact correct variable id.  The url has "ticket_form_id=215063".  But i tried that too and same result.

    Code I am using:

    if ('ticketForm' == 215063) {
    $('.form-field.request_subject').hide(); // Hide subject
    $('.form-field.request_description').hide(); // Hide description
    $('#request_subject').val('test subject'); // autofill subject
    $('#request_description').val('test description'); // autofill description
    }

     

    Edit: In case any one else runs into this. The changes just weren't showing up in the preview.  Once i published it, it worked perfectly.  Code i went with is below:

    var ticketForm = location.search.split('ticket_form_id=')[1];

    if(ticketForm == 215063) {
    $('.form-field.request_subject').hide(); // Hide subject
    $('.form-field.request_description').hide(); // Hide description
    $('#request_subject').val('test subject'); // autofill subject
    $('#request_description').val('test description'); // autofill description
    }

     

    1
  • Jessie Schutz
    Zendesk team member

    Thanks for coming back to share your solution, Sam!

    0
  • Chris B

    Hi,

    I'm trying to hide a custom field using this method but not having much success.

    $(document).ready(function() {
    $('.form-field.string.optional.request_custom_fields_360000410968').hide();// Hide Custom Field
     
    is there more code than this needed, or is there something obvious that I've done wrong?
     
     
    0
  • Socorro Fernandez

    Hey Chris!

    Your code looks good but I believe you can accomplish what you need with just identifying the element within quotes. Give this a try:

    $(document).ready(function() {

    $(".request_custom_fields_360000410968").hide();

    });

    1
  • Chris B

    @Socorro Perfect, thanks!

    0
  • Terry Waldron

    Cheers Socorro , 

     

    Works perfect , thanks a lot

    0
  • 고혜경

    Hi Socorro, 

     

    I'd like to add multiple custom fields' value into subject. 

    How can I do ? 

     

    Thanks in advance ! 

    0
  • Socorro Fernandez

    Hi 고혜경,

    For this script example, I am going to use 2 open text fields and identify them both in the .change function so that any time either field value is updated, it is going to run the script and add the values of both fields to the subject field. We will want to create variables for each and then use + to put them together:

     

     $("#request_custom_fields_youropentextfieldone, #request_custom_fields_youropentextfieldtwo").change(function() {
    var fieldone = $("#request_custom_fields_youropentextfieldone").val();
    var fieldtwo = $("#request_custom_fields_youropentextfieldtwo").val();
    $('#request_subject').val(fieldone + fieldtwo);
    });

     

    Be sure to add your open text custom field number to where it says youropentextfieldone and youropentextfieldtwo

    If you want to add a space between the field values you will need to add the code for it. There may be another way to do this but I did it by adding " "  in between fieldone and fieldtwo in the script which would look like this:

      $('#request_subject').val(fieldone + " " + fieldtwo);

    if you add the space code, there is always going to be space even if only one field has a value added to it. For Example if only fieldtwo is updated with a value, you can expect one space and then the value of fieldtwo to be added in the subject field. If both fields are required on your form than it shouldn't be an issue :)

    Also, glad to hear the other scripts are working for others! 

    Thanks

    Edit: put code in code format 

     

    1
  • Marty Whitby

    I recently enabled Captcha verification and it broke the code that had previously worked. Has anyone else found this and is there a known fix? I can't see how the Captcha verification impacts the code.

    0
  • Socorro Fernandez

    Hi Marty,

    My assumption is that this option would only add on to the {{request_form}} placeholder on the new request page but not 100%.

    I was trying to recreate your issue by enabling or disabling Captcha but it does not seem to impact the the code from this article in regards to hiding/autofilling the subject/description fields, at least in the case of a trial vanilla instance.

    Does disabling Captcha unbreak the code?

    0
  • Jessie Schutz
    Zendesk team member

    Hey Marty!

    Do you have any other custom code in your Help Center? The most likely scenario is that there's other custom code that doesn't play nicely with Captcha. 

    If you're able, please feel free to post a screen shot(s) of your code so we can take a look. We have some coding gurus here in the Community and among our Community Moderators who might be able to help you figure out what's going wrong.

    0
  • John Norris

    I am using the code samples above and successfully hiding the subject, description, and attachment fields. I also use JavaScript found in another thread to conditionally show/hide based on the form selected. 

    I am running into an issue on one of my forms that has two RegEx custom fields. When the user input fails the RegEx, the form displays the error as expected but it also displays the fields that were originally hidden when the form page loaded.

    How do I prevent the hidden fields from displaying in an error condition?

    0
  • Socorro Fernandez

    Hey John,

    In the example of a .change script that hides fields based on a change in the identified field, if the user submits the form and comes back with the errors, it won't trigger the script on a .change function as the page is refreshing and keeping the values in the fields so no change happened on the identified element. Depending on what your script looks like, it may have another work around, feel free to post it here.

    A potential work around would be to add the script again in the .ready part of your js with out the function part of the code. This means that when the page would reload, it would run the script.

    For example, If I had a .change script referencing the form field to hide the description:

    $("#request_issue_type_select").change(function() {
    if ($("#request_issue_type_select").val() == "yourformidhere") {
    $('.form-field.request_description').hide(); // Hide description
    }
    });

     

    I could add that the following in the $(document).ready(function() { part of my js so it runs when the page reloads:

    if ($("#request_issue_type_select").val() == "yourformidhere") {

    $('.form-field.request_description').hide(); // Hide description

    };

    Another way to approach this is to add validation to your Regex field prior to submission and add alerts so the user has to have a correct value before being able to submit or focus away from the field. I tested this with a Regex Field validating zip code with a .change function of the Regex field. This means that after the user puts a value in this regex field, if it does not equal 5 numbers, it will display the alert of 'Please input a valid zipcode and when they hit okay, it will focus back to the field until a valid value is entered.

    Here is the script for reference:

    $("#request_custom_fields_360000490268").change(function () {

    var zipcoderegexfield = $('#request_custom_fields_360000490268').val();

    if(/\b[0-9]{5}(?:-[0-9]{4})?\b/.test(zipcoderegexfield)) {
    }
    else
    {
    alert('Please input a valid zipcode');
    $('#request_custom_fields_360000490268').select();
    }

    });

    Here is the template where you would want to update the bolded items:

    $("#request_custom_fields_yourregexfieldidhere").change(function () {

    var nameyourvariable = $('#request_custom_fields_yourregexfieldidhere').val();

    if(/regexvalidationcodefromfieldhere/.test(nameyourvariable)) {
    }
    else
    {
    alert('This is the alert message that will show if the validation fails');
    $('#request_custom_fields_yourregexfieldidhere').select(); //This will set the focus back to the field
    }

    });

    You could add more to this script to display on alert on a successful validation if you wanted. 

    Feel free to post your scripts here if you would like me to take a look if the above does not fit your needs.

    Thanks!

    0
  • deven

    Does anyone here know how to hide the Subject and Description fields until a selection is made in a custom field? 

    0
  • Socorro Fernandez

    Hey Deven!

    I would recommend a change script if you just would like the user to select any value on the drop down to then show the subject and description. Start by hiding the subject and description and then adding the script:

    $(".request_subject").hide(); // Hide Subject

    $(".request_description").hide(); // Hide Description

    $("#request_custom_fields_youcustomfieldidhere").change(function() { //Script will run if this field has a changes
    $('.request_description').show(); // show description
    });

    If you prefer to show the subject/description after a specific value is selected on your custom field, the following change script with an if statement can be utilized:

    $("#request_custom_fields_yourcustomfieldidhere").change(function() {   // Script will run if this field is changes
    if ($("#request_custom_fields_yourcustomfieldidhere").val() == "valueofcustomfield") {
    $('.request_description').show(); // Show description
    }
    });

    Feel free to let me know if you have any questions with these. Thanks!

    0
  • deven

    Thanks, Scott that worked! 

    0
  • Josh Turner

    I may have missed it but I don't believe anyone has asked this question yet. 

    - I am using one instance with a number of brands. The brands all have differing "names" for ticket priority. We are trying to have the users view the titles as "Emergency, Normal and Project" instead of "Low, Normal, High Urgent". I have seen a code used to modify the theme so that one of the fields is hidden but I was curious if there is code to edit the fields? Ill add example code from another's comment below. I essentially want to use the code below to hide one priority and then add code to edit the remaining 3. Thoughts?

    var ticketForm = location.search.split('ticket_form_id=')[1];

    if(ticketForm == 123456) {
    $('.form-field.request_subject').hide(); // Hide subject
    $('.form-field.request_description').hide(); // Hide description
    $('#request_subject').val('test subject'); // autofill subject 
    $('#request_description').val('test description'); // autofill description
    }

    0
  • Nicole Saunders
    Zendesk Community Team

    Hey Josh -

    You may want to cross-post your question in the Guide Themes and Customizations topic in the community, where it would have better visibility to other users. In the meantime, I'll ping our community moderators to see if any of them have any suggestions for you.

    0
  • Josh Turner

    Thanks Nicole!

     

    0
  • Nicole Saunders
    Zendesk Community Team

    You're welcome, Josh.

    0
  • Hari Hartas

    Hello All, 

    This is very helpful articles to help me in hiding some custom fields from our ticker form. I have one more follow up question, is it possible to hide custom field in widget? I have successfully hidden the custom field in web version, however the custom fields are still visible when I open widget. 

    Could you advice me how to workaround with this?

    Thank you

    0
  • Hari Hartas

    This is the screenshot.

    From the right hand side, I still have 3 custom fields that I want to hide from end-users since we will autofill it from our side. 

    Can you help me?

    thanks

    0
  • Brett Bowser
    Zendesk Community Team

    Hi Hari,

    Within the Support dashboard you should be able to navigate to Admin>Channels>Widget and choose the custom fields you'd like to display within your Web Widget. Screenshot below:

     

    I would recommend toggling off any fields you'd like to remove from your widget and then hit save at the bottom of the page. More information in our Using custom ticket fields and ticket forms with the Web Widget article which I've linked for you.

    Let me know if that doesn't get you what you're looking for.

    Thanks!

    0
  • Christer Bangen

    Would it be possible to hide the system field "description" until last "custom field" in the form is answered?

    0
  • Socorro Fernandez

    Hey Christer!

    You could hide the description field until the last custom field you have in a form was answered. The set up of the script will depend on how many forms you have and if you want this functionality across all forms or not.

    Here is a link to another post I did on this thread that should hopefully get you started:

    https://support.zendesk.com/hc/en-us/articles/115002860148/comments/360001344888 

    Let me know if you run into any issues or have any questions regarding your specific use case.

    0
  • Erin McBride

    Hey everyone!

    I don't believe this question has been asked yet, but if it had and I overlooked it I apologize.

    We have successfully been able to hide form fields and change the labels using the jQuery functions listed in previous responses. However, if a form has required fields and the user submits the form without filling out the fields the form reverts back and no longer shows our changes.

    We saw that when this occurs, the URL changes to "https://zengisticshelp.zendesk.com/hc/en-us/requests" regardless of which form was submitted. Since the URL no longer contains the form ID that we used in our if statement (ie. if (ticketForm == 360000435732) {} ) the changes are no longer applied to our form, which is causing confusion.

    Is there a way to get around this? Perhaps adding our jQuery if statement and functions to another file other than scripts.js?

    0
  • Socorro Fernandez

    Hi Erin,

    It sounds like you may only have change functions in your script so when the page refreshes, those scripts don't run because nothing changed on the fields you referenced in your scripts. The URL will change on the page refresh as you mentioned but this shouldn't impact your scripts, as long as the the scripts are referencing the fields.

    I answered an example of this on an earlier post but I am not 100% if it is applicable to you.

    I gave an example of how you would want to add an if statement to the .ready portion of the JS, in addition to the .change script.

    Here is the link to that comment, specifically looking at the first 2 code snippets in there:

    https://support.zendesk.com/hc/en-us/articles/115002860148?page=1#comment_360000915147 

     

    I am more than willing to explore this further with you to make sure we can get your scripts working as you need. Thanks!

    1
  • Erin McBride

    Hi Socorro,

    Thanks for your reply! I tried adding a version of what you suggested in your previous response but it did not work. Here is our current code within our .ready portion of the JS: 

    var ticketForm = location.search.split('ticket_form_id=')[1];


    if (ticketForm == 360000435732) {
      $('#request_subject_label').text('Customer Name');//Changes the subject label text to 'Customer Name'
      $('#request_description_label').text('Customer Address');//Changes the description label text to 'Customer Address'
      $('#request_description_hint').text("Please enter the customer's address above. A member of our support staff will respond as soon as possible.");//Changes the hint text to match the new label
      $('.request_custom_fields_360019821771').hide();
    }

     

    When the form is submitted without the required information, the URL changes from "https://zengisticshelp.zendesk.com/hc/en-us/requests/new?ticket_form_id=360000435732" to "https://zengisticshelp.zendesk.com/hc/en-us/requests" and because that form id is no longer present our changes are no longer applied.

    0
  • Socorro Fernandez

    Hi Erin,

    Thank you for the additional information!

    Since you are using the location.search.split for your variable, that in fact is looking for the url value and since the url changes when the page refreshes, this is why the scripts won't run again.

    Rather than using that variable referencing the url, you could reference the ticket form drop down ID. This code worked for me when putting in the .ready JS. The code in bold is where you put the ticket form ID: 

    if ($("#request_issue_type_select").val() == "360000435732") {
    $('#request_subject_label').text('Customer Name');//Changes the subject label text to 'Customer Name'
    $('#request_description_label').text('Customer Address');//Changes the description label text to 'Customer Address'
    $('#request_description_hint').text("Please enter the customer's address above. A member of our support staff will respond as soon as possible.");//Changes the hint text to match the new label
    $('.request_custom_fields_360019821771').hide();
    }

    Please let me know if you run into any issues with this script.

    1
  • Erin McBride

    That worked! You are a genius sir. Thank you very much for your help Socorro.

    1

Please sign in to leave a comment.

Powered by Zendesk