Copenhagen v4 modifications and JS updates of request forms | Community
Skip to main content

Copenhagen v4 modifications and JS updates of request forms

  • September 18, 2024
  • 11 replies
  • 0 views
J

I'm trying to hide and prepopulate Subject and Description of custom request form. My template is Copenhagen v4. Suggestions found on Zendesk support site don't work. My understanding is that v4 is based on React framework and so input fields do not have hardcoded CSS and are hardly to be addressed by jQuery. I managed to create a workaround by JS function searching for DIV enclosure of specific input field by label of this field. Unfortunately, it doesn't work when JS is put into script.js (not recommended anyways), or anywhere else, like assets, header template, etc. My suspicion is that JS can't access specific DOM object because it doesn't exist at the moment of running this script. Script is running probably before React is done with rendering.

 

So, my question is, did anybody faced the same issue (v4 is fairly new) or is able to suggest how to wait for renderer to finish and run JS afterwards? E.g., how to use React hooks (useEffect, useRef) in Copenhagen v4 theme?

      11 replies

      J
      • Jakub20
      • November 8, 2024

      Hello @jan15 
       

      Templates in your help center have access to various properties. For instance, the New Request Page template includes an object named new_request_form, which contains properties based on the form requested by the user. You can utilize dot notation to retrieve information from this object.

      Example:

{{new_request_form.ticket_fields}}

       


      As detailed in the New Request Form Object documentation (https://developer.zendesk.com/api-reference/help_center/help-center-templates/objects/#new-request-form-object), you can access its property: ticket_fields.


      ticket_fields

      • Type: Array
      • Description: An array of ticket field objects that includes all standard and custom fields of the selected ticket form.

      To view the array of fields for this form, you can use the following code:

      To view the array of fields for this form, you can use the following code:

       

      console.log(props.requestForm.ticket_fields);


      This will render the array of ticket fields for the selected form.

      If you need to explore the subkeys or subproperties of the Ticket Field Object, refer to the Ticket Field Object documentation.

       

      You can set the field value since the property/attribute is accessible. For example:

      
props.requestForm.ticket_fields[1].value = "Description from Props";


      In this case, the index [1] corresponds to my description field, and this line would set its value.

       

       

       

        J
        • Jan15
        • Author
        • November 13, 2024

        Thanks Jakub! Any chance to make ticket field hidden? I mean default ticket field, like Subject or Description.

        D
        • Dustin13
        • November 18, 2024

        The following worked for me where the subject field was number 14 in my array of fields:  props.requestForm.ticket_fields[14].type = "hidden";

         

        I'm having trouble doing this for the following though:

        props.requestForm.cc_field.type = "hidden";  This doesn't seem to work the same.  Any ideas on how hide the cc field on certain forms?

        D
        • Dustin13
        • November 23, 2024

        Adding the following the script on the New Request page works to hide the cc field:

         

        props.requestForm.cc_field = false;

         

         

        J
        • Jan15
        • Author
        • November 26, 2024

        It does, but in my case fails when submitting new request.

        I
        • Isabelle13
        • February 28, 2025

        Hi,
        I have multiple forms and need to set the Description and Hide the subject in only one of them.

        If I use this type of code :
         props.requestForm.ticket_fields[0].value = "Data Helper Anfrage";
         props.requestForm.ticket_fields[2].type = "hidden";

        it affects all my forms.

        I have tried adding an if condition but it didn't work.

        Can you help me?

        Remi16
        • Remi16
        • April 30, 2025

        Hello Isabelle,    
         
        I understand you have multiple forms and need to set the Description and Hide the Subject in only one of them, through our theming version 4, correct?
         
        I can see this thread has been left off for quite a while, hence, I would like to apologize first and also would like to confirm if you still need assistance on this one?
        If so, could you share your if condition statement that does not work so I can try it on / review it?
         
        You can actually play around with the props.requestForm.ticket_form_field.value and iterate though the related Form ID value and tweak its options Array as needed.

         
        Let me know if that helps / if you still needed assistance / if you need an example, happy to help team!
         
        Have a lovely rest of your day!
         
        Best regards,
         

        J
        • Jan15
        • Author
        • May 29, 2025

        Hello Remi,

         

        I believe suggestion from Jakub works well. Adding following code will update content of Subject field and make it hidden for my form with ID 22451423991186.

         

        if(ticketForm == 22451423991186)
 {
     props.requestForm.ticket_fields[0].value = "Request new license for external identity";
     props.requestForm.ticket_fields[0].type = "hidden";
 }

         

        My issue is that when I try hiding Description field, submitting form fails. Error message is “Description: cannot be blank”, although it is not and when I set only value and do not try hiding this field it submits whole form without issues.

         

        Any idea?

         

        Best regards,

        Jan

        R
        • Ryan45
        • September 5, 2025

        Also facing similar problems. I understand we can set values, subscribe to events, etc. via the DOM/Javascript. But as noted it's not recommended practice. When I call renderNewRequestForm and pass in the update props things work, but as soon as the user interacts with the form it stops (renderNewRequestForm call just doesn't seem to work anymore). I'm really having a hard time finding any info on how to interact with the underlying rendered components from an external js file (ie. the script.js file within the theme).

        Sean71
        • Sean71
        • October 13, 2025

        I've landed on this, but I'm still getting the same error others are experiencing, with Subject and Description left blank.

         

        if (props.requestForm.ticket_form_field.value == 5948553246468)
  {
 props.requestForm.ticket_fields[13].type = "hidden"
 	props.requestForm.ticket_fields[13].value = "Zendesk Group Request - "
 props.requestForm.ticket_fields[14].type = "hidden"
  props.requestForm.ticket_fields[14].value = "See Details"
}

        Errors with values being defined (using browser dev mode to view console):

         

         

         

         

         

        Elaine14
        • Elaine14
        • January 2, 2026
        Hi everyone,
         
        Thanks for sharing your experiences and code snippets around customizing Copenhagen v4 request forms, especially on hiding and prepopulating Subject and Description fields.
         
        From what I'm seeing in this thread, the main challenge is that these fields are required by default and hiding them without properly setting their values causes submission errors like "Description cannot be blank." Also, because the forms are React-based, running JS scripts too early (before rendering) or externally (like script.js) won't work as expected.
         
        A couple of suggestions that might help:
         

        1. Set Field Values Before Hiding
          Make sure you set the value of the field and then hide it, rather than only hiding. For example:

           

          props.requestForm.ticket_fields[1].value = "Your preset description";
          props.requestForm.ticket_fields[1].type = "hidden";

          This prevents validation errors by ensuring a non-empty value.

           

        2. Use React Hooks in Custom App Framework (If Possible)
          If you’re able to use React code within the theme's App framework, a useEffect hook can help run your logic after the form renders:

           

          React.useEffect(() => {
              // Set values and hide fields here
          }, []);

          Unfortunately, Copenhagen v4 may limit ability to directly add hooks in external JS, so check if you can inject React logic or extend the theme properly.

           

        3. Conditional Logic by Form ID or Field Label
          Since multiple forms are involved, try conditioning your code on the current form's ID or a unique identifier so you only modify one form:

           

          if (props.requestForm.ticket_form_field.value == YOUR_FORM_ID) {
              // Adjust fields here
          }

        4. Check Field Indexes Dynamically
          Field indexes can vary depending on the form, so logging props.requestForm.ticket_fields and identifying the proper index for Subject and Description per form before applying changes is crucial.

           

        5. Avoid Using External JS Script Files for DOM Manipulation
          Since React renders asynchronously, DOM-based JS is unreliable. Try to interact with props/state inside the React lifecycle or theme templates.

           

        If anyone has successfully implemented this with cleaner code or a helper method, I’d love to see some practical examples!
         
        Thanks again for the great collaboration here.
         
        Terms & ConditionsCookie settingsAccessibility statement