adding icons at beginning of credit card fields (using stripe)

  • Profile Image
    gyangting
    Asked on August 23, 2014 at 05:04 PM

     

    Hi,

    I need to add small icons at the beginning of fields, as here: http://screencast.com/t/0XsLNhrC

    Can you help me achieve that?

    Thanks,

    Guy

  • Profile Image
    gyangting
    Answered on August 23, 2014 at 05:07 PM

    Also, my customers are on mobile primarily, so I need icons to work on mobile.

    Thanks,
    Guy

  • Profile Image
    Welvin
    Answered on August 24, 2014 at 12:46 AM

    Hi Guy,

    You can inject a custom CSS codes to your form to do that. For the Credit Card Number input:

    .form-textbox.cc_number {

    background-image: url('http://www.jotform.com/icon/cc.png');

    background-repeat: no-repeat;

    padding-left: 20px;

    }

    Change http://www.jotform.com/icon/cc.png to your actual credit card icon.

     

    The same codes for the CVV input:

    .form-textbox.cc_ccv {

    background-image: url('http://www.jotform.com/icon/cc.png');

    background-repeat: no-repeat;

    padding-left: 20px;

    }

    Still, change the URL of the icon.

    Here's a guide on how to inject a custom CSS to the form: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Thank you!

  • Profile Image
    gyangting
    Answered on August 24, 2014 at 04:42 AM

    Thanks Welvin. This put me on the right track to get what I wanted!

    I just had to add background-position: 7px 7px to position the icon where I wanted.

    Perfect now!

    Great support!

    Guy