How to display the fields in the CC info inline and with the same width?

  • Profile Image
    prowrestlingtees
    Asked 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

  • Profile Image
    Kevin_G
    Answered 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
    prowrestlingtees
    Answered on May 03, 2016 at 02:59 PM

    It removes the city, state, and zip code fields

  • Profile Image
    Mike_G
    Answered 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.