The formatting for the credit card number and security code is off

  • Profile Image
    adea
    Asked on November 13, 2015 at 11:27 AM
    3.  In the payment widget the formatting for the credit card number and security code is off.  It is confusing for people completing the form.  Can you tell me what causes this?  I have included a screenshot.
  • Profile Image
    Welvin
    Answered on November 13, 2015 at 11:47 AM

    You can inject the following custom CSS Codes to fix the alignment:

    input#input_14_cc_number {

        width: 95% !important;

    }

    label#sublabel_cc_number {

        width: 95% !important;

    }

    #creditCardTable > tbody > tr:nth-child(3) > td > span:nth-child(1) {

        width: 50% !important;

    }

     

    #creditCardTable > tbody > tr:nth-child(3) > td > span:nth-child(2) {

        width: 45% !important;

    }

    input#input_14_cc_ccv {

        width : 106% !important;

    }

    label#sublabel_cc_ccv {

        width : 100% !important;

    }

     

    select#input_14_cc_exp_month {

        width: 95% !important;

    }

    #sublabel_cc_exp_month {

        width: 100% !important;

    }

    select#input_14_cc_exp_year {

        width: 106% !important;

    }

    label#sublabel_cc_exp_year {

        width: 100% !important;

    }

    #creditCardTable > tbody > tr:nth-child(4) > td > span:nth-child(1)  {

        width: 50% !important;

    }

    #creditCardTable > tbody > tr:nth-child(4) > td > span:nth-child(2) {

        width: 45% !important;

    }

     

    Here's how to inject: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes. Please add the codes at the bottom.

    Thanks