Changing field order in HC

70 コメント

  • Elizabeth Toy
    コメントアクション Permalink

    @Matthieu you should be able to just use two copies of the code. Change "Type of Issue" to "Field 1" in one and "Field 2" in the other.

    1
  • Matthew Tullo
    コメントアクション Permalink

    I have used 5 instances of this code to move some drop down fields above the subject in different forms.  All the fields I needed to move have moved correctly, but one of the drop down fields will not display its selections.  All others that have moved in the other forms work great.  I cannot find anything different with this form or field then the others.  Has anyone seen this happen or have any suggestions on how to fix it?

    0
  • Cameron D.
    コメントアクション Permalink

    +1 on @Matthew Tullo's issue

    I have tons of fields all working with the Conditinal Fields app -- had to add each one to move everything above Subject, and they all moved but some no longer display their selections, or no longer bring up another field after a selection is made.

    0
  • Brill Wang
    コメントアクション Permalink

    @Brad

    I modified Andrea's code slightly so that there should now be a line break between Subject and the field above. Try this out! 

    // rearrange form fields
    $('#new_request.request-form label:contains("Type of issue")').parent().insertBefore('#new_request.request-form .form-field:has(label:contains("Subject"))');

    2
  • Au Finh Saechao
    コメントアクション Permalink

    Ran into the same problem too. Here's a simpler and lazy solution if all of your custom fields can go above the subject field. This method preserves the order of your custom fields as defined by your ticket forms. It works with conditional fields too.

    /* CSS to hide ticket form fields (except for ticket form dropdown) by default */
    #new_request .form-field:not(.request_ticket_form_id){
    display:none;
    }

    /* Javascript to rearrange fields */
    // rearrange custom ticket fields to go above system fields
    $('[class*="request_custom_fields_"]').insertBefore('.request_subject');
    // after rearranging, display all ticket fields
    $('#new_request .form-field:not(.request_ticket_form_id)').show();

    Works pretty well for us :D

    2
  • Jessie Schutz
    コメントアクション Permalink

    Thanks for sharing your variation, Au!

    0
  • Nguyen Le Minh Quan (Johan)
    コメントアクション Permalink
    Guide to sort fields in ticket form. 
    I want to place the descriptive field down to the
    bottom of the template.
    I have read tutorials but can not follow.
    Can you help me edit or guide me?
    Thanks!


    0
  • Brad Ladwig
    コメントアクション Permalink

    While Customer Advocacy is not able to assist with custom code, I'm happy to provide a little guidance based off of your screenshot.  You'll want to click on the "JS" tab to start.  One on the JavaScript page the string of code mentioned would be placed just below the first line:

    $(document).ready(function() {

    and then modify accordingly.  A helpful practice when modifying code is to copy/paste the default code onto an external document so you have a backup incase things go awry.  Good luck!

    0
  • Chris Ratner
    コメントアクション Permalink

    Hi Au Finh Saechao. I really like the elegance of your solution. However, my custom forms with conditions is not working with this code added. I appended (copied and pasted) both of your pieces of code to the bottom of CSS and JS as noted above, but yet all my conditional form fields are exhibiting the same problem with this code. All the fields appear. Maybe I did something wrong. Screens below. Thoughts?

    https://www.dropbox.com/s/khbe6065nqxj1p9/zd_fieldorder.png?dl=0 

    0
  • Au Finh Saechao
    コメントアクション Permalink

    @Chris Ratner, Thanks! Can you link us to the live help center? It's possible that your instance has different element names/ids. 

    0
  • Chris Ratner
    コメントアクション Permalink

    Hi Au Finh Saechao. Thanks for the prompt reply. I'm afraid at I don't know how to "link you" to the live help center. Is there something I can brush up on to figure it out, or maybe here is a screen shot I can share. Thx.

    0
  • Jessie Schutz
    コメントアクション Permalink

    Hi Chris!

    I think Au just meant, if your help center is available to the public (ie: non-logged-in users) they'd like the URL so they can take a look at it.

    0
  • Chris Ratner
    コメントアクション Permalink

    Thanks, Jessie and Au. I'd be more than happy to setup a remote session where I can show you my screen if that would help you take a look at our site -- would that work? Once we walk through, I'll update the comments with the results. Feel free to tweet me directly @cratner and we can go from there. Thx.

    0
  • Martin Sachs
    コメントアクション Permalink

    I have the same experience as @Chris Ratner.  It works from a rearrange standpoint but all the conditional fields show now.  Was there any progress outside of these public comments?

    0
  • Andrea Saez
    コメントアクション Permalink

    Hey all, 

    Keep in mind this article is now 2 years old and Zendesk has made several updates to the Help Center. This means it's likely the CSS element names have changed. To figure out the changes, right click > inspect element and sync up to the new element names, ie "request_anonymous_requester_email" if anonymous is request, for example.

    0
  • Karl
    コメントアクション Permalink

    I'm amused at the fact Zendesk have not implemented functionality to rearrange these fields however they are themselves either using Javascript to rearrange their own ticket forms or have implemented misleading functionality that is not available to their customers by default. 

     

    3
  • Noémie Dumez
    コメントアクション Permalink

    Dear Zendesk team and users, I am tryning to modify the order of the ticket field in my contact form too. I would like to :

    -put a personalized ticket called "Type" before the system field "subject".

    -place a personalized field called "Pays" (country") before the system field "description".

    I have added these lines at the end of the JS code...but it doesn't seem to work.

    $('#new_request.request-form label:contains("Type")').parent().insertBefore('#new_request.request-form label:contains("Sujet")');

    $('#new_request.request-form label:contains("Pays")').parent().insertBefore('#new_request.request-form label:contains("Description")');

    Do you know if this code is still valid or if it has to be updated ?

    Thanks for your help !

    0
  • Jessie Schutz
    コメントアクション Permalink

    Welcome to the Community, Noémie!

    I'm definitely not a coding expert, but I'll do my best. :) A couple comments above yours Andrea, the tip author, points out that some changes have been made to Guide since she first published this, so some of the CSS element names may be different. If you haven't seen that yet, I'd definitely suggest that your first step should be to double check that everything in your code has the right name.

    If you've already done that, or if you're still stuck after you've checked it, let us know and I'll see if I can find one of our coding gurus to take a peek at it!

    0
  • Noémie Dumez
    コメントアクション Permalink

    Hello Jessie,

    Thanks for your answer. Yes, it finally worked but I have a rpoblem mentioned previously by other users in the comments. The drop down field will not display its sélections... If someone has found the solution, I am interested. Thank you !

    Noémie

    0
  • Jessie Schutz
    コメントアクション Permalink

    Hey Noémie! Can you clarify what you mean when you say the drop down field doesn't display the selections? Maybe a screenshot would be helpful as well.

    0
  • Aren Marcoosi
    コメントアクション Permalink

    Hello,

    I am using Au Finh Saechao code and got all the fields to move above the subject line but for some reason all my conditional fields are showing. Here is my a screenshot of the code and a link to the ticket form. Any help is appreciated.

    Link to form: https://skylineinternal.zendesk.com/hc/en-us/requests/new?ticket_form_id=692627

    1
  • Au Finh Saechao
    コメントアクション Permalink

    Hi Aren,

    Thanks for sharing a link to your hc.  My example assumed that there are multiple forms. Since your page already filters in for a specific form, you'll want to hide all form fields except for your main dropdown, which I'm assuming is RateLock Desk Support.  

    In this case, replace .request_ticket_form_id in both your css and js with .request_custom_fields_80965048 , which is the css class specified for the RateLock Desk Support dropdown.

    I think that should do the trick!

    Au Finh

    1
  • Aren Marcoosi
    コメントアクション Permalink

    Hi Au Finh,

    I made the changes you suggested but unfortunately it did not work. Any other ideas?

    0
  • Jennifer Zou
    コメントアクション Permalink

    Hi,

    After Insert my custom field before Subject, I found that there is no space between two fields. How to add a space line after my custom field?

    -1
  • Jacob J Christensen
    コメントアクション Permalink

    Hi Jennifer,

    I think Brill Wang above addressed this exact issue.

    0
  • Antonio King
    コメントアクション Permalink

    This is an incredible tip, so thanks a ton Elizabeth. For those that want to move several fields, this helped:

     

    • You need to add separate code for each different field you want to move: 


      ^ tells the form to move my custom field "Name" before "Subject" (the default top one courtesy of ZD)

    • ^ tells the form to move my custom field "Ticket category" before my other custom field, "Name". 

     

    End result 

     

     

    Also a good-to-know: if your ticket fields (custom) have punctuation in the title of the field, best to get rid of them so the JS can actually read the field name. Otherwise, it'll assume it's another coding piece being added and won't recognize the form field. 

    0
  • Jennifer Rowe
    コメントアクション Permalink

    Hi Antonio,

    Glad to hear the tip was useful to you. And thanks for sharing the changes you made to make it work even better!

    0
  • Martin Östergren
    コメントアクション Permalink

    Hello!

    I have replaced the order of CC and Subject with this code:

    $(document).ready(function() {
      // rearrange form fields
    $('#new_request.request-form label:contains("Subject")').parent().insertBefore('#new_request.request-form label:contains("CC")');

    And it looks just fine.

    However when the form is submitted the content of Subject gets replaced with the email address in CC. So I receive a ticket with an email address as subject and there is no CC in the ticket.

    Whats going wrong?

    0
  • Arno N
    コメントアクション Permalink

    Dear Zendesk, why is this not a standard feature, why do we have to mess with JS and CSS in order to rearrange our forms??

    1
  • Antonio King
    コメントアクション Permalink

    Wondering if anyone has any insight on how to move the remaining fields? I have a few fields that I'd like to move above the main "subject" and "description" box (would like to move "change/cancel subcategories" and "Order Number" which are two conditional fields.), but I don't see the code anywhere to move those fields.

     

    0

ログインしてコメントを残してください。

Powered by Zendesk