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

    Make credit card field side by side

    Asked by Masalamedia on August 28, 2015 at 05: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

    Page URL:
    http://form.jotformpro.com/form/51885054009961

    Screenshot
    side-by-side credit card credit card side
  • Profile Image
    JotForm Support

    Answered by EltonCris on August 28, 2015 at 06: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:

    If you see any problems, let us know.

    Regards!

  • Profile Image

    Answered by Masalamedia on August 28, 2015 at 08: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?

  • Profile Image
    JotForm Support

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

  • Profile Image

    Answered by Masalamedia on August 30, 2015 at 12:50 PM
  • Profile Image

    Answered by Masalamedia on August 30, 2015 at 02: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!

     

  • Profile Image
    JotForm Support

    Answered by ashwin_d on August 31, 2015 at 06: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!

  • Profile Image

    Answered by Masalamedia 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?

  • Profile Image
    JotForm Support

    Answered by ashwin_d on August 31, 2015 at 02: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!