Changing field order in HC
-
@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!
-
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.
-
Hey Antonio!
It's not currently possible to move custom field above the system fields on your ticket forms, unless you implemented some JS code as described in this Community Tip.
However, and this will be of interest to Arno as well, I spoke with the PM who's in charge of this part of the product, Kiran, and he said that his team is actually working on adding the ability to arrange fields however you want, regardless of whether they're custom or system fields. At this point, the reasoning behind that design choice is the lost to history, but we realize it's important functionality for many of our customers.
So that's good news! We're still in the early stages of development on it, though, so I don't have any timeframes for completion to share or anything like that. But rest assured that we're on it, and we'll let you know when we get closer to the finish line!
-
@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:
-
@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
-
@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
-
Ciao Nicola,
You're using single quotes instead of double quotes.
It should be: ("Per quale...") and ("Soggetto")
:)
-
@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.
-
@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.
-
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
-
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??
-
Thanks for the tip, Andrea!
-
=D
-
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
-
Thanks for the tip, Andrea! Made my day!
-
You're welcome @Randy! :)
-
@Andrea: you're right. I tried both single and double quote.
No matter which one I choose, it still didn't work.
-
@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.
-
@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)
-
Got it!
Can this be used to move just any field around?
-
As long as you have the correct string, it should certainly work :)
-
This should be definitely built into the product!
Way much better now!
Thanks so much for your help.
-
You're welcome!
-
I love it when a plan comes together! :D Thanks, Andrea, for troubleshooting and helping out, and hooray, Nicola, for perservering!
-
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.
-
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
-
@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.
-
@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?
댓글을 남기려면 로그인하세요.
70 댓글