Changing field order in HC
-
@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.
-
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?
-
+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.
-
@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"))'); -
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
-
Thanks for sharing your variation, Au!
-
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!
-
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!
-
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
-
@Chris Ratner, Thanks! Can you link us to the live help center? It's possible that your instance has different element names/ids.
-
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.
-
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.
-
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.
-
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?
-
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.
-
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.
-
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 !
-
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!
-
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
-
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.
-
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
-
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
-
Hi Au Finh,
I made the changes you suggested but unfortunately it did not work. Any other ideas?
-
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?
-
Hi Jennifer,
-
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.
- You need to add separate code for each different field you want to move:
-
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!
-
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?
-
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??
-
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.
サインインしてコメントを残してください。
70 コメント