Make credit card field side by side

  • Masalamedia
    Asked on August 28, 2015 at 5:17 PM

    I have a stripe payment module at the bottom of my event registration page. The default appearance is not what I am hoping for in two ways:

    a) Can't figure out how to get the CVC security code box to display to the immediate right of the CC# box;

    b) Can't figure out how to get the Exp. month and Exp. year to appear side-by-side, even though there is plenty of room.

    Please advise. Thanks

    Jotform Thread 650313 Screenshot
  • Elton Support Team Lead
    Replied on August 28, 2015 at 6:53 PM

    Inject this CSS codes to your form, this should correct it.

    .form-address-table td[colspan="2"] .form-sub-label-container {

        width: 55%;

        margin-right: 0;

    }

    .form-address-table td[colspan="2"] .form-sub-label-container + .form-sub-label-container {

        width: 40%;

        margin-right: 0;

    }

    .cc_number {

        width: 90% !important;

    }

    .cc_exp_month {

        width: 90% !important;

    }

    /*override others*/

    #input_11_cc_exp_month {

        width: 90% !important;

    }

    .form-textbox.cc_number {

        width: 90% !important;

    }

    Please paste it at the most bottom part. Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes-to-your-Form

    It should give you the following:

    Make credit card field side by side Image 1 Screenshot 20

    If you see any problems, let us know.

    Regards!

  • Masalamedia
    Replied on August 28, 2015 at 8:56 PM

    That seems to work! Thanks!

    I'm also struggling on the same form to get the phone area code and phone number to appear side-by-side. It isn't an issue when the form is viewed on its own (e.g. http://form.jotformpro.com/form/51885054009961) but when its embedded on my website (http://achievecg.com/staging/register/) it looks like some responsive formatting takes over when the page shrinks past a certain point. You'll notice that all the field labels go to the top instead of to the left when the browser window goes below 1300px.

    Any ideas how to keep my areacode/phone number fields side-by side and get less re-formatting?

  • abajan Jotform Support
    Replied on August 29, 2015 at 12:25 PM

    The answer to your last question has been moved to a new thread. Please see my reply there: http://www.jotform.com/answers/650557

    Thanks

  • Masalamedia
    Replied on August 30, 2015 at 12:50 PM
  • Masalamedia
    Replied on August 30, 2015 at 2:49 PM

    NOTE - the provided CSS correctly achieves the goal of putting the CC information in the right place... BUT now my address lines are too short!

     

    Make credit card field side by side Image 1 Screenshot 20

  • Ashwin JotForm Support
    Replied on August 31, 2015 at 6:09 AM

    Hello Masalamedia,

    Injecting the following custom css code in your form will solve this problem:

    #cid_4 .form-address-table td[colspan="2"] .form-sub-label-container {

        width: 100%;

        margin-right: 0;

    }

    I have already fixed this in your form. Please take a look at your form and see if the address field is being displayed as expected.

    Thank you!

  • Masalamedia
    Replied on August 31, 2015 at 12:46 PM

    Hi Ashwin - yep, that solved it. Many thanks.

    Having fields line up on the right side is generally more aesthetically pleasing than a variety of mismatched right margins. Shouldn't the templates be designed to line up by default?

  • Ashwin JotForm Support
    Replied on August 31, 2015 at 2:07 PM

    Hello Masalamedia,

    You are welcome. I am glad to know that your issue is resolved. 

    The issue is caused because of the custom css injected to change the look of the form fields. If you create a new form without any custom css code, form fields will appear as expected.

    Thank you!