Hiding attachment/system fields on ticket form

@Rosie - Sorry for the delayed response but yes it is possible with some coding to hide those fields.

I've added the code here.

Copy the code to your JS tab right under the $(.document.ready) function.

Thank you Wes! Does this not error because they are 'required' fields? Is there a way to make them auto-fill with some sort of content?

@Rosie - I'm not sure about making them auto-fill with content.  You would have to do more coding to make that happen.

I tried adding the following lines, but it didn't work:

$('.request_subject').value = 'Custom Field Value';
$('.request_description').value = 'Custom Field Value';

When I submit, still get an error that the fields can't be blank.  Any idea why?

Wes, that is perfect! For those who might be trying to hide a required system field, remember that you will need to give it a value before hiding it! 

$('#request_subject').val("some subject here");
$('.request_subject').hide();
$('#request_description').val("some description here");
$('.request_description').hide();
$('.form-field label:contains("Attachments")').hide();
$('#upload-dropzone').hide();

@Kristin - Glad to hear you found the code useful.  Enjoy and best of luck with your Help Center modifications.

Awesome!, Kristin, thanks for coming back to share what worked for you. :)

@Wes - I am trying to go a step further, and set the subject line using one of the field values in the form on submit.

So far, I have gotten it to change the subject on submit, but I cannot get it to use the field value.

Please keep in mind, I am new to JS and may just have a formatting issue.

$(document).submit(function() {
if (window.location.href == "https://southlandind.zendesk.com/hc/en-us/requests/new?preview_as_role=end_user&ticket_form_id=302947")
{
var subjectstring1 = ('#request_custom_fields_41430027').val;
$('#request_subject').val("Equipment Request Recieved" + " - " + subjectstring1);
}
});

The bold areas in the above isn't correct. I am sure it is within this portion as everything works well when I set

subjectstring1 = "test";

Do you have any idea what I did wrong?

I ended up getting this to work using the following:

//Form Submit
$(document).submit(function() {
//only run on specific form
if (window.location.href == "https://southlandind.zendesk.com/hc/en-us/requests/new?preview_as_role=end_user&ticket_form_id=302947")
{
//set a string to equal the custom field value
var subjectstring1 = $("#request_custom_fields_41430027").val();
//set subject to equal a string including field value string
$('#request_subject').val("Equipment Request Recieved" + " - " + subjectstring1);
}
});
//End Form Submit

With Wes's info, plus this new find, I can "set", "hide" and "get the value" of custom fields in request forms. It almost feels like a super power.

@Kristin - Thanks for coming back and sharing the code as I'm sure others will find it useful.

@Kristin, thank you for the info you provided on 9/19/16

I do have a follow up question.  

Do I just add  your //Form Submit section in it's entirety to the bottom of my JS code or is there some place else this needs to be?

In my JS tab I do not see another //Form Submit section so I am wondering how forms are submitted without this? 

@ Christopher - the document submit is already part of the process coded by the Zendesk Platform, you are basically just "hijacking it" and performing an action when the process kicks off, just as you are when you add anything to the document ready process.

Kristin, thanks for supplying the code and for helping out!

A follow up question....

I have a custom ticket field which is a multiline text field.

I would like to set a default value for this field so that when a form is submitted the field will be set with the text value which would be an address such as:

"Company XYZ
123 First St
Austin, TX 78703"

How can I set the value of a custom field which needs new line chars?

I tried using the following in the JS in Help Center...

 $('#request_customField("custom_field_45353987")').val("Multi-Line Text Here");

How can I set the text to appear on multiple lines in the field?

Chris, 

You can use /n (New Line) in your string. Please see the "try it" at W3 Schools (my favorite resource) http://www.w3schools.com/js/js_strings.asp the section on "escape characters" should help.

a more detailed example of multi line is in stack overflow: http://stackoverflow.com/questions/878573/java-multiline-string

Here, the string is composed of several lines using /n.

 I have used newline in one of my strings here:  

var descriptionstring1;
descriptionstring1 = '"Request Details: \n';

Then later in the sumbit function, added additional values to the string with more new line escapes:

descriptionstring1 = descriptionstring1 + FieldLable + " :: "+ FieldValue + "\n"+ "\n";

Hey! Does anyone know if that works for the web widget as well?

Hi Caio! Welcome to the Community!

I don't think this exact code will work for the web widget, but we actually have and article that outlines exactly how to do it! You can find it here: Advanced customization of your Web Widget

Let us know if you need anything else!

thanks for the response, Jessie. What about the subject and description fields? these are the ones I'm struggling with. 

Is this still the best solution for hiding system fields on user facing forms?

Hey Caio! Sorry if I misunderstood your question.

Hiding subject and description fields requires some advanced coding. One of our moderators provided a link with some code to help get folks started with it. Now, this code is just for the Help Center in general, so you'd probably need to make some adjustments to the code in order for it to render correctly. If you run into any issues, let us know and we'll try to find someone here in the Community to help you out!

Hello guys,

Thanks for all these answers. I replicated what you wrote but I still see my ticket field "Subject"

Here is the beginning of the tab JS:

$(document).ready(function() {

//hide system fields based on ticket forms(change subdomain and form id)
if (window.location.href == "https://support.blooms.fr/hc/en-us/requests/new?ticket_form_id=251769") {
$('#request_subject').val("some subject here");
$('.request_subject').hide()
}

Did I do something wrong ? Many thanks in advance

Hi everyone,

Thank you for the useful article. How about hiding the CCs field ?

I have tried the following but it is not working:

if (window.location.href == "https://e-education.zendesk.com/hc/en-us/requests/new?ticket_form_id=250925") {
$('.request_collaborators_').hide();
}

@Huong-Ly Dang,

Try using this code -

if (window.location.href == "https://e-education.zendesk.com/hc/en-us/requests/new?ticket_form_id=250925") {
 $('.request_cc_emails').hide();
}

Let me know how it goes for you.

Thanks

@Bertrand Bazin,

Try using this code -

$(document).ready(function() {
 if (window.location.href == "https://support.blooms.fr/hc/fr/requests/new?ticket_form_id=251769") { 
  $('.request_subject').hide()
 }
});

Let me know how it goes for you.

Thanks

hi Trapta, thank you very much !

I have figured this out and it works well :)

$('.request_cc_emails').hide();

Mix up with the field id before.

Anyone knows how to make a optional field required based on the selection of dropdown field?  Something like: 

if ($('.request_some_custom_fieldA').val() == "SW"){

$('.request_some_custom_fieldB').required() = true;

}

How do you get to the JS tab, I cant see it on the admin page

Hi Edward! Welcome to the Community!

You can access the code for your Help Center by going to your Guide Admin tools (upper right corner of the screen when you're in your Help Center). Click the eye icon in the sidebar that appears on the left side of your screen; this will take you to the Theming Center. Click on the theme you wish to edit, then click the button with the three dots at the top of the sidebar and click edit code. This will show you a list of any assets you've uploaded to your Help Center, as well as your HTML templates and you JS and CSS scrips. Scroll to the bottom and click on script.js.

Bear in mind that the ability to customize your Help Center code is only available if you're on Guide Professional. If you're on Guide Lite you won't be able to customize your theme.

An alternate nice approach is documented at this KB article.

Thanks for pointing that out, Mostafa.