How to move Security Code box to right of CC box

  • Profile Image
    carpepm
    Asked on July 15, 2013 at 12:43 PM

    I'm using Authorize.net on my form, but the Security Code box is displaying just below the words "Credit Card Number" making it confusing for our customers. Is there a way to move the Security Code box to the right of CC#?

  • Profile Image
    EliezerN
    Answered on July 15, 2013 at 12:59 PM

    Hello

    Yes, there is away, and to accomplish that you need to insert Custom CSS Code. Please insert the next CSS code to your form.

    #input_12_cc_ccv

    {

    position:relative;

    left:267px !important;

    top:-46px !important;

    }

    Please refer this guide to know how to inject custom CSS codes:

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    I cloned your form to do the changes, here is my form: http://www.jotform.com/form/31955301241950

    If you need further assistance let us know.

    Thanks.

  • Profile Image
    EliezerN
    Answered on July 15, 2013 at 01:08 PM

    Sorry for the mistake, I did not include the Security code sub-label in the previous code, so please insert this code instead the previous one:

    #input_12_cc_ccv, #sublabel_cc_ccv

    {

    position:relative;

    left:267px !important;

    top:-46px !important;

    }

    I have also updated the my form I gave you in the previous answer.

    Thanks.

  • Profile Image
    carpepm
    Answered on July 15, 2013 at 02:21 PM

    MUCH BETTER! Thank you. I adjusted the numbers slightly so that it worked perfectly. Now the only issue is that there is empty space under the CC# and Security Code. Is there a way to remove that extra blank line?

  • Profile Image
    dinesh-it
    Answered on July 15, 2013 at 03:19 PM

    Hi, if you inject following CSS, it will move up the Expiration Date row, But "/" is not movable. Some what looks ugly.

    #input_12_cc_exp_month,

    #sublabel_cc_exp_month,

    #sublabel_cc_exp_year,

    #input_12_cc_exp_year{

    position:relative;

    top: -40px;

    }

    If you wish, you can append this code too.

    Thank you.

  • Profile Image
    carpepm
    Answered on July 15, 2013 at 03:35 PM

    Is there a way for me delete the "/"?

  • Profile Image
    Mike_T
    Answered on July 15, 2013 at 04:57 PM

    Please try to add the following code to your custom CSS:

    .form-sub-label-container {color: white;}

    Thank you.

  • Profile Image
    carpepm
    Answered on July 15, 2013 at 05:04 PM

    Perfect! Thank you.

  • Profile Image
    EliezerN
    Answered on July 15, 2013 at 05:37 PM

    You're welcome.

    Feel free to contact us at any time you have a need or a question about Jotform functionality.

    Thanks.

  • Profile Image
    venco
    Answered on February 20, 2015 at 09:43 AM

    That not work for me. What am I doing wrong??? How to reenter the original layout of the credit card info boxes?
  • Profile Image
    Kiran
    Answered on February 20, 2015 at 11:34 AM

    @venco,

    Since this is old thread, I've moved your question to a separate thread and shall be addressed there shortly.

    http://www.jotform.com/answers/519695

    Thanks!