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

Have more questions? Submit a request

56 Comments

  • Brett - Community Manager
    Comment actions Permalink

    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
    Comment actions Permalink

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

    0
  • Socorro Fernandez
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

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

    1
  • Socorro Fernandez
    Comment actions Permalink

    Happy to hear it!

    Feel free to reach out if you need to tackle any others. Thanks again for sharing!

    1
  • Paul Bendzko
    Comment actions Permalink

    All the above really helped me a lot, thanks. Hiding and again displaying the Description field is working fine now.

    What i try do is to simply only display a Text, if a certain point in a dropdown has been picked.

    E.g. when i have a tickbox or a word in a dropdown i want to display an info text only - is there any way?

    Thank you!

    0
  • Alex Gillum-Webb
    Comment actions Permalink

    Hi Socorro,

     

    First of all thanks for your input here, its helped me greatly. I'm trying to get the field validation for a serial number in a submit a request form. Its working, however i'm unable to get focus back on the input box after clicking ok on the alert - it moves on to the next box.

    Code section:

     $("#request_custom_fields_360002836618").change(function () {
    var serialno = $('#request_custom_fields_360002836618').val();
    if(/[0-9][0-9]-[A-Z].[0-9][0-9][0-9][0-9]/.test(serialno)) {
    }
    else
    {
    alert('Please input a valid Product Serial Number');
    $("#request_custom_fields_360002836618").select(); //This will set the focus back to the field
    }
    });

    I've tried with focus too, which hasn't helped - as I understand, the script pauses until ok is clicked on the alert - been wracking my brain but can't find a way around it.

     

    Any pointers would be most appreciated!

     

    Cheers

     

     

     

    0
  • Socorro Fernandez
    Comment actions Permalink

    Hi Alex,

    You are most welcome and glad to hear posts are helping out!

    It sounds like even the field fails the validation through the script and though we get the alert, its allowing users to still move on to the next field. This would be true because the script is looking for another change and the field did not change after the initial run of the script.

    A work around may be that we go ahead and clear the field if the validation fails so the user would need to add another value which will then have the script will run again. This would also allow the user to access other fields and so they are not locked to the serial number field and could go back to it when they are ready.

    All I am adding to your script is the line in bold which clears the field:

    $("#request_custom_fields_360002836618").change(function () {
    var serialno = $('#request_custom_fields_360002836618').val();
    if(/[0-9][0-9]-[A-Z].[0-9][0-9][0-9][0-9]/.test(serialno)) {
    }
    else
    {
    alert('Please input a valid Product Serial Number');
    $("#request_custom_fields_360002836618").val('');
    $("#request_custom_fields_360002836618").select(); //This will set the focus back to the field

    }
    });

     

    If you do not want this experience, please let me know and we can figure something out. Thank you!

    0
  • Socorro Fernandez
    Comment actions Permalink

    Hi Paul,

    Glad to hear things are working out for you!

    As far as the text you want to display, do you want text to show in the ticket form? as an alert? please let me know what you would like, feel free to include some screenshots.

    0
  • Paul Bendzko
    Comment actions Permalink

    Hey Socorro, thank you very much.

    I like to have it similar to the below one on my screenshot.

    Once i pick a topic in the dropdown, i just want, that a text is displayed to the end-user.

    0
  • Alex Gillum-Webb
    Comment actions Permalink

    Hi Socorro,

    Thanks for the suggestion! Turns out the behaviour works as intended with Chrome (Version 76.0.3809.132) - focus stays on the correct window that failed validation, but it doesn't work on Firefox (68.0.2) where I was doing initial testing on - focus always moves on to the next field window, even after resetting the value.

    Should be able to work around this for intended use - but would you know of a simple resolution?

    I did have another query - I have 4 more field values that I want to perform validation on (if value is inputted only , as not all are required) - however in this instance, I want to validate that each one is different from the last.

    Ideally I wanted to do a check on all 4 fields after the 4th had been populated - however, there may only be 3 entries. I had been testing with the following code, checking each previous iterations for matches, but it you can force through the validation as it seems to only check once:

    // Validate Tamper serial 2 is unique from first
    $("#request_custom_fields_360002511197").change(function () {
    var tamper1 = $('#request_custom_fields_360002508358').val();
    var tamper2 = $('#request_custom_fields_360002511197').val();
    if (tamper1 != tamper2) {
    }
    else
    {
    alert('Duplicate Tamper Serial #2');
    $('#request_custom_fields_360002511197').select();
    }
    });
    // Validate Tamper serial 3 is unique from 1 and 2
    $("#request_custom_fields_360002508378").change(function () {
    var tamper1 = $('#request_custom_fields_360002508358').val();
    var tamper2 = $('#request_custom_fields_360002511197').val();
    var tamper3 = $('#request_custom_fields_360002508378').val();
    if (tamper1 != tamper2 && tamper1 != tamper3 && tamper2 != tamper3) {
    }
    else
    {
    alert('Duplicate Tamper Serial #3');
    $('#request_custom_fields_360002508378').select();
    }
    });
    // Validate Tamper serial 4 is unique from 1, 2 and 3
    $("#request_custom_fields_360002508378").change(function () {
    var tamper1 = $('#request_custom_fields_360002508358').val();
    var tamper2 = $('#request_custom_fields_360002511197').val();
    var tamper3 = $('#request_custom_fields_360002508378').val();
    var tamper4 = $('#request_custom_fields_360002511217').val();
    if (tamper1 != tamper2 && tamper1 != tamper3 && tamper1 != tamper4 && tamper2 != tamper3 && tamper2 != tamper4 && tamper3 != tamper4) {
    }
    else
    {
    alert('Duplicate Tamper Serial #4');
    $('#request_custom_fields_360002511217').select();
    }
    });

    Forgive the layman attempt! H

    How would you go about something like this? I suppose I could have another field that is a required field, inputted after these values, and have that trigger the validation of the 'Tamper label' fields?

    Once again - thanks for all your input so far.

    0
  • Tracy Scobba
    Comment actions Permalink

    I have added the original sample code to the script.js file, but I see no change in my form. Am I doing it correctly? Do I need to also make a change to the new_request_page.hbs?

    The following is what I've done so far ... I'm a coding newbie and need a little hand-holding.

     

    0
  • Brett - Community Manager
    Comment actions Permalink

    Hey Tracy,

    According to the article above, you should only need to edit the script page. Are you using a Legacy theme or the default Copenhagen theme? I'm rather limited on what I can assist with on my end but if you do have developers available you may want to get them involved here.

    Otherwise, we do have a professional services team that can customize your Help Center at an additional cost. If this is something you're interested in let me know and I can get you in touch with our account manager.

    Cheers!

    0
  • Tracy Scobba
    Comment actions Permalink

    I am using the Copenhagen theme. Can you tell me if the code above looks correct ... directionally? :)

    0
  • Brett - Community Manager
    Comment actions Permalink

    Hey Tracy,

    I myself am not a coder but I'll try reaching out to one of our Community Moderators to see if anyone can take a look.

    Cheers!

    0
  • Socorro Fernandez
    Comment actions Permalink

    Hi Tracy and Brett,

    Tracy,

    I tested the script and I am confirming it still works in the script.js.

    On your screenshot, I believe you need to remove the curley bracket on line 23. This curley bracket is trying to close the document ready, voiding the rest of your scripts and possibly erroring which is why it may not be working.

    Let us know if it still doesnt work after. Thanks!

    0
  • Tracy Scobba
    Comment actions Permalink

    Thanks, Brett! I figured it out. User error :)

    0
  • Brett - Community Manager
    Comment actions Permalink

    Glad to hear you were able to get this resolved Tracy :)

    0
  • Anthony DelCampo
    Comment actions Permalink

    This is all great however, I think its silly to have to write code to remove simple fields. 

    If a company doesn't have a need for these "default" fields I think we should have the option to remove them. 


    0
  • Nicole - Community Manager
    Comment actions Permalink

    Thanks for that feedback, Anthony. I'd encourage you to post a request for that ability in the Support Product Feedback Topic. If you haven't posted a feedback request before, here are our tips on how to write an effective feedback post.

    0
  • Scott Patterson
    Comment actions Permalink

    Hey there,

     

    I'm wondering if I could get some help setting up similar scripts as the users here, but instead of checking the value of a text box/dropdown in the criteria to show/hide things, instead query a checkbox or multi select field?

     

    Things seem to work fine if I am querying a text box or dropdown field, like this from Socorro's example from 06/10/18:

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

     

    But using the same format to query a checkbox or multi-select field doesn't seem to work. I have tried storing the values of the checkbox/multi-select fields in a variable, and then checking the value of that so i can get an idea of how these fields work, but it seems like multi-select fields always have a blank value, and checkboxes always start with a value of "on" but this doesn't change if the state of the checkbox changes.

    I am wondering if multi-select fields store an array of some kind that could be queried? Though I'm not too sure how and my tests haven't been too fruitful. And I am a but stuck on the checkboxes too.

    Any help would be appreciated.


    Thanks,

    -SP

    0
  • Simon Celen
    Comment actions Permalink

    Hi Scott,

    For checkboxes you can use the following:

    $('#request_custom_fields_checkboxfieldid').change(function() {
    if (this.checked) {
    // the checkbox is checked
    }
    });

    Multi-select fields are a bit more difficult:

    $('.request_custom_fields_multiselectfieldid .hc-multiselect-menu').click(function() {  // note that here we need .request_custom... not #request_custom...
    var values = [];
    $(this).prev().find('input').val(function(i, val) { values.push(val); });
    if (values.indexOf('myvalue') > -1) {
    // the multi-select has "myvalue" selected
    }
    });

     

    Hope that helps! If it doesn't seem to work, feel free to pass on the link to your Guide and I'll take a closer look.

    0

Please sign in to leave a comment.

Powered by Zendesk