What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to move Security Code box to right of CC box

    Asked by carpepm 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#?

    Page URL:
    http://www.broadview.ssmade.com/donate/donate-online/

    Screenshot
    move credit card
  • Profile Image

    Answered by EliezerN 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

    Answered by EliezerN 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

    Answered by carpepm 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

    Answered by dinesh-it 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

    Answered by carpepm on July 15, 2013 at 03:35 PM

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

  • Profile Image
    JotForm Support

    Answered by Mike_T 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

    Answered by carpepm on July 15, 2013 at 05:04 PM

    Perfect! Thank you.

  • Profile Image

    Answered by EliezerN 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

    Answered by venco 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
    JotForm Support

    Answered by Kiran 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!