Inserting lock icon image in the text box field

  • kauseway
    Asked on January 1, 2015 at 5:10 PM

    How can I get an image inside of a form field like I have attached? thanks!

    for form:  http://form.jotformpro.com/form/50005155818954

    Jotform Thread 489316 Screenshot
  • Jan
    Replied on January 1, 2015 at 7:06 PM

    Hi,

    The lock image is actually a font icon. I can help you put that icon on the text box field. Just give me few more minutes to complete the sample form so that you can clone it.

    Thank you.

  • Jan
    Replied on January 1, 2015 at 9:18 PM

    Hello,

    I checked your form and I saw that the credit card number field was from the Stripe payment processor. Unfortunately, I was not able to find a way to use a font icon in the field.

    However, it is still possible by going back to your original question on how to insert an image in the field.  You need to know to add this custom CSS.

    .form-textbox.cc_number {

    background-image: url('https://shots.jotform.com/jan/images/lock-icon.png');

    background-repeat: no-repeat;

    background-position: right;

    padding-left: 5px;

    }

    You can change the url if you need to use your own image. Here's a guide on how to inject a custom CSS: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

     

    Hope this helps. Thank you.