Is it possible to alter look of the credit card fields?

  • Profile Image
    prowrestlingtees
    Asked on June 10, 2016 at 04:37 PM

    How can remove the - and / from the credit card fields?

    Move credit card and security code next to each other?

    It's currently using the mobile responsive widget

  • Profile Image
    Ben
    Answered on June 10, 2016 at 05:24 PM

    To do that you should add the following CSS to your form:

    .form-sub-label-container {
        color: transparent;
    }
    @media screen and (max-width:480px) {
     #creditCardTable tr:nth-child(3) td span {
        width: 50%;
     }
    }

    This first one will hide the - and / from the table and the second one will put the fields together into the same row on mobile devices.

    You can add it to your form by following the steps here: Inject Custom CSS Codes

  • Profile Image
    prowrestlingtees
    Answered on June 10, 2016 at 05:27 PM

    That worked. The only thing is the security code sub text is still at the bottom

  • Profile Image
    prowrestlingtees
    Answered on June 10, 2016 at 05:28 PM

    Same with expiration month and year. They are not aligned

  • Profile Image
    Ben
    Answered on June 10, 2016 at 05:45 PM

    The CSS above did not modify the expiration month and year, and it seems OK to me.

    Could you grab a screenshot of the error so that we can see what you mean?

    All that I could see not aligned properly was the Credit Card number field, for which if you add the following CSS:

    #sublabel_cc_number {
        margin-top: -1em;
    }

    It should look properly for you (add it next to the previously added CSS).

    Do let us know how it goes.