Inserting lock icon image in the text box field

  • Profile Image
    kauseway
    Asked on January 01, 2015 at 05: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

  • Profile Image
    Jan
    Answered on January 01, 2015 at 07: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.

  • Profile Image
    Jan
    Answered on January 01, 2015 at 09: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.