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 display the fields in the CC info inline and with the same width?

    Asked by prowrestlingtees on May 03, 2016 at 12:46 PM

    I'm currently using the full embed code and would like to accomplish as the title states. 
    Credit card followed by security code on the same line

    And under the expirtation info

     

    Thanks

    Page URL:
    https://form.jotform.com/61175259404152

    size credit card expiration date
  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 03, 2016 at 02:27 PM

    Try injecting this CSS code to your form: 

    .form-address-table tr:nth-child(4) span:nth-child(1), .form-address-table tr:nth-child(3) span:nth-child(1){

        font-size: 0px;

    }

    .cc_exp_month,#sublabel_cc_exp_month, #sublabel_cc_number, .cc_number{

        font-size: 12px;

    }

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

        width: 48%;

        margin-right: 0;

    }

    .cc_exp_month {

        width: 100% !important;

    }

    .cc_ccv {

        width: 200px !important;

        margin-left: 14px;

    }

    label#sublabel_cc_ccv, label#sublabel_cc_exp_year {

        margin-left: 14px;

    }

    .cc_exp_year {

        margin-left: 15px;

        width: 200px !important;

    }

    This should display the fields inline and the same width for all of them, do note that you will need to inject this code in the Form Builder and you will need to re-embed your form after applying these changes, the guide below will help you to inject the code to your form: 

    -How-to-Inject-Custom-CSS-Codes

    This is how the fields are currently being displayed: 

    This is how they will look as soon as you inject the code to your form: 

    Here is the link to my form if you want to take a look as well: https://form.jotform.com/61235098862966

    Hope this helps. 

  • Profile Image

    Answered by prowrestlingtees on May 03, 2016 at 02:59 PM

    It removes the city, state, and zip code fields

  • Profile Image
    JotForm Support

    Answered by Mike_G on May 03, 2016 at 04:24 PM

    In addition to the CSS codes my colleague, Kevin_G, have asked you to add to your form, please include the CSS codes below. 

    #id_8 .form-address-table tr:nth-child(4) span:nth-child(1), #id_8  .form-address-table tr:nth-child(3) span:nth-child(1) {

        font-size:  14px !important;

    }

    This will fix the issue you have with the Shipping field's city, state, and zip code fields.

    Please do let us know if you need any further assistance. Thank you.