Changing field order in HC

70 Comments

  • Jessie Schutz
    Comment actions Permalink

    Thanks for the tip, Andrea!

    0
  • Andrea Saez
    Comment actions Permalink

    =D

     

    0
  • Karl
    Comment actions Permalink

    This looks like just what I have been looking for, I'm currently learning HTML & CSS, Javascript is next and I wanted to learn this just for this purpose!

    Now, my question would be this...

    I have 5 ticket forms with an "Area (XXXX)" box that is the/a conditional field. How would I make the condition field selection appear above Subject and would it also hide "Subject, description and email until a selection has been made?

    No worries if you cannot figure that one out, I will get to it eventually. :)

     

    -1
  • Andrea Saez
    Comment actions Permalink

    Karl,

    Hm, I think that's a whole other level of making the fields dynamic and not entirely sure it is doable, especially if you are working with multiple forms. You've given me something to think about :P

    0
  • Randy Peach
    Comment actions Permalink

    Thanks for the tip, Andrea! Made my day!

    0
  • Andrea Saez
    Comment actions Permalink

    You're welcome @Randy! :)

    0
  • Nicola Carraro
    Comment actions Permalink

    @Andrea: I can't get this to work. I have a custom dropdown list that I want to put right before the subject but it won't move.

    I'm using multiple forms and multiple organization.

    Here's my setup

    I'd rather delete the field from the form that leave it there, so any help would be greatly appreciated

    Here is the image at full res  https://www.dropbox.com/s/d68jfep7l37iljo/2015-07-28_11h10_48.jpg?dl=0

     

    1
  • Andrea Saez
    Comment actions Permalink

    Ciao Nicola,

    You're using single quotes instead of double quotes.

    It should be: ("Per quale...") and ("Soggetto")

    :)

    1
  • Nicola Carraro
    Comment actions Permalink

    @Andrea: you're right. I tried both single and double quote.

    No matter which one I choose, it still didn't work.

    0
  • Andrea Saez
    Comment actions Permalink

    @Nicola,

    Which template are you using?

    Make sure that the element is indeed called new_request.request-form

    It might be different depending on the template.

    0
  • Nicola Carraro
    Comment actions Permalink

    @Andrea: I'm using a slightly modified Humble Squid (just a few css font tweaks and some code to hide forms based on organization (https://support.zendesk.com/hc/en-us/articles/204579603)

    I've checked the page code and form name looks identical to yours (see screenshot)

     

     

    0
  • Andrea Saez
    Comment actions Permalink

    @Nicola

    Just caught the error. You're putting it at the end of the JS page, but you're not calling the document. Put it right under the first line :

    $(document).ready(function() {

     

    Then it will work.

    1
  • Nicola Carraro
    Comment actions Permalink

    Got it!

    Can this be used to move just any field around?

     

    0
  • Andrea Saez
    Comment actions Permalink

    As long as you have the correct string, it should certainly work :)

    0
  • Nicola Carraro
    Comment actions Permalink

    This should be definitely built into the product!

    Way much better now!

    Thanks so much for your help.

    0
  • Andrea Saez
    Comment actions Permalink

    You're welcome!

    0
  • Jessie Schutz
    Comment actions Permalink

    I love it when a plan comes together! :D Thanks, Andrea, for troubleshooting and helping out, and hooray, Nicola, for perservering! 

    0
  • Nicola Carraro
    Comment actions Permalink

    not strictly connected to this article, but not possibile before:

    I Just removed the subject from the new request page (no need to deactivate the field, you just don't enable it for end users on the ticket field configuration).

    This way I can guide users with a dropdown field and leave the description for further details.

    From my experience, subject is 100% of the times poorly written, while description contains the relevant informations.

    When you remove the subject, ZD uses the description istead so that, on the agent interface, you get a meaningful subject instead of "problem", "help", etc..

    Only downside is that, without the subject, you loose the "auto-suggestion" feature of HC on the ticket page.

    0
  • Andrea Saez
    Comment actions Permalink

    That's probably linked to the Subject itself, not to the JS being applied. The auto suggestion is linked to the subject, and subject is a default field that comes with the system

    0
  • Nicola Carraro
    Comment actions Permalink

    @Andrea: didn't mean it was due to the JS being applied.

    Would be great if we could hide the subject with some JS (not via the ticket field visibility) and populate it with the description from the dropdown. 

    That way we'd have meaningful subject + autosuggestion (provided ZD is able to read from a hidden field)

    But this is out of the scope of this article so I'd rather not digress.

    0
  • Brad Johnson
    Comment actions Permalink

    @Andrea: This is great and did exactly what we needed!  However the only issue I'm having now is the Subject field is not putting an extra line break in between it and one of the custom fields that is above it.  I've tried adding both a <br /> tag and \n but neither work.  Any thoughts?

    0
  • Elizabeth Toy
    Comment actions Permalink

    @Brad: I was frustrated by that too, so I modified the CSS to add some padding to the top of the field label. Worked beautifully!

     

    Here's what we have:

    .form-field label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    padding-top: 35px;
    }

     

    I also tightened up the help text underneath the label. Everything was looking a bit too spaced out. Here's that:

    .form-field p {
    color: #bebebe;
    font-size: 11px;
    margin-top: -4px;
    margin-bottom: 4px;
    }

     

    Hope that helps!

    4
  • Brandon
    Comment actions Permalink

    I'm trying to do this using that code, but it doesn't seem to be working. We start our request with the user choosing from a dropdown list of options. After that, all of the different fields appear. I want to reorder them from that point, but no matter where I put the code, it doesn't update anything.

    0
  • Jill Sandford
    Comment actions Permalink

    WOW!  I am really in the dark on this one. haha!

    Where are the fields in HS?  What does that stand for?

    Where is the JS tab?  What does that stand for?

     

    0
  • Elizabeth Toy
    Comment actions Permalink

    @Brandon: are you swapping out the text "Type of Issue" and "Subject" to match the field labels on your own form?

    @Jill: Do you mean HC? It stands for Help Center. The JS (JavaScript) tab can be found here:

    2
  • Brandon
    Comment actions Permalink

    @Elizabeth: I updated the fields to match what we have on our form. Since you have to first select a form, I didn't know if there was additional code that needed to be used in order for it to know which form to be changing, if that makes sense.

    0
  • Elizabeth Toy
    Comment actions Permalink

    That makes sense, but there shouldn't be additional code needed. On our Help Center the form fields rearrange using the code, even with having multiple forms to select from the drop-down.

    Could you send a screenshot of your JS page and the form you're trying to move the labels on? :)

    0
  • Jennifer Rowe
    Comment actions Permalink

    Thanks for helping out here, Elizabeth!

    0
  • Jessie Schutz
    Comment actions Permalink

    Hey Jill!

    I think you meant HC...that stands for Help Center. This tip is showing how to re-arrange the fields that appear in the ticket form your customers can use to submit tickets to your Zendesk.

    JS stands for JavaScript, which is a type of code you can use to customize the look and behavior of your Help Center. You can find that code in your General settings, but I don't recommend doing anything with it unless you have in-depth knowledge of coding!

    0
  • Matthieu ETIENNE
    Comment actions Permalink

    HI,

    Thanks for this solution.

    I wondering to know, in case of multiple contact Form, using different custom fileds, if there is a way to personalize each of them, using such code?

    So for example. My help center is offering 2 Forms (Form 1 & Form 2)

    In the Form 1 we found a custom Field "Field 1" only avalaible for the Form 1,

    Additonnaly, I have a "Field 2", only avalaible for the Form 2.

    In the 2 cases, I want to switch the ticket field Field 1 & Field 2 before "Subject" 

    Is it possible? How can I do it? 

     

    Thanks in advance for your help

    0

Please sign in to leave a comment.

Powered by Zendesk