What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How do i add icons in my input fields?

    Asked by NgeeAnnPolytechnic on April 20, 2015 at 07:50 AM

    Dear Sir

    i am seeking to enhance my work e.g. by adding icons in the input fields - similar to the screenshot.

    how do i achieve that? tks.

    Page URL:
    http://www.jotform.me/NgeeAnnPolytechnic/Green_NP

    Screenshot
    input fields in work adding
  • Profile Image

    Answered by Syed on April 20, 2015 at 08:16 AM

    Hi there;

             You can achieve this by using some CSS Tricks, please inject the following CSS Code Rules at the end, read our guide here on How to Inject Custom CSS Codes.

    #input_11 {background: url("http://submit.jotform.com/uploads/forum/guest_51092668205051/1429531048comments.png") no-repeat 5px 5px;padding-left: 30px;background-size: 20px; }

    #input_8 {background: url("http://submit.jotform.com/uploads/forum/guest_51092668205051/1429531067location.png") no-repeat 5px 5px;background-size:20px;padding-left: 20px;padding: 7px;padding-left: 30px; }

    #input_7 {background: url("http://submit.jotform.com/uploads/forum/guest_51092668205051/1429531057department.png") no-repeat scroll 5px 5px / 20px auto transparent;background-size: 20px;padding: 7px 7px 7px 30px;}

    #input_6 {background: url("http://submit.jotform.com/uploads/forum/guest_51092668205051/1429531074name.png") no-repeat scroll 5px 5px / 20px auto transparent;padding-left: 20px;background-size: 20px;padding: 7px 7px 7px 30px;padding-left: 25px; }

    I made the following changes on form for you, please review the following form;

    http://form.jotformpro.com/form/51092903816960

    Please let us know if you need further assistance on this, we would be happy to assist you in any way.

     

    Thankyou,