Moving the CC field on the HelpCentre

7 Comments

  • Nicole Ciaramella
    Comment actions Permalink

    I'd also love to learn how to change where the CC appears in the Request Form. At the very least, can anyone provide instructions on how to do this via the code or stylesheet? I can't seem to pinpoint how to change it's location at all.

    1
  • Alex Gillum-Webb
    Comment actions Permalink

    I've been looking at doing this too. I want to have a set of conditional custom fields at the top of the form that the end user completes first.

    I have managed to move the CC field using the following js code:

     $(document).ready(function() { 
    // rearrange form field so CC field sits above attachments field
    $('#new\_request.request-form label:contains("CC")').parent().insertBefore('#new\_request.request-form label:contains("Attachments")');

    });

    However it needs padding/a margin adding as it sits too close to the attachments field - have tried to edit the CSS but can't seem to find the correct area to do this at - if the above works for you and you can space it nicely.. please let me know! :)

     

    1
  • Shawn Oudavanh
    Comment actions Permalink

    Hey Alex you're close! CSS runs before your javascript, so it won't pick it up. However you can add css from your javascript. This should do it:

     

    $(document).ready(function() { 
    // rearrange form field so CC field sits above attachments field
    $('#new\_request.request-form label:contains("CC")').parent().insertBefore('#new\_request.request-form label:contains("Attachments")');
    $('.request_cc_emails').css('padding-bottom', '3em');
    });


    Cheers

    0
  • Karen D Snyder
    Comment actions Permalink

    I did something similar; I was asked to move the CC field to below the description field. I did it with this code inside the document.ready function:

    $('.form-field.request_cc_emails').insertAfter('.form-field.request_description');

    I did not have to adjust any CSS after doing this. The CC in the form appears like this:

    When I inspect the form with dev tools, I see that the elements with class .form-field have CSS margin-top: 1.5rem, which is equivalent to 24px. So I'm not sure why you're having spacing problems, if all your .form-field elements have the same CSS.

     

    0
  • Alex Gillum-Webb
    Comment actions Permalink

    Thanks both!

    So using the .form-field method works fine - I think perhaps my original attempt was using the label as the focus rather than the field.

    One thing i've noticed - if the end user does not complete all the required fields, and tries to submit the request, the CC field box will return to its default location when the notification errors populate.

    Do you know how would I get it to keep the CC field positioning in this instance?

    0
  • Karen D Snyder
    Comment actions Permalink

    Hi Alex,

    If I click submit without filling in required fields, the CC stays under the description.

     

    Where did you put the code? I have it in script.js inside the document.ready function.

    0
  • Alex Gillum-Webb
    Comment actions Permalink

    Yup - managed to solve - I had placed it in a document.ready function but inside an if statement for a specific form ID.

    Now set globally - all is good!

     

    0

Please sign in to leave a comment.

Powered by Zendesk