How to add/remove icons beside fields?

  • Profile Image
    justtechrecruitment
    Asked on July 28, 2018 at 03:48 PM

    how do I add icons to / remove icons form fields? 


    Currently, our first form 'Sign Up' has them there for the 'first name' and 'email' fields, but I can't work out how to add and remove them.


    Thanks

  • Profile Image
    Vanessa_T
    Answered on July 28, 2018 at 04:03 PM

    I assume this is the form that you are referring to: https://www.jotform.com/81955888884382

    Upon checking, the icons beside the name and email fields are added by injecting a custom CSS. In order to add or remove one, you need to know about html page styling. However, if you are still beginning to learn about CSS, we can help you on your first steps.

    May I know which field are you planning to add/remove icons? If you are going to add icons, please share to us the icon image.

    Related guides:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    https://www.jotform.com/help/75-Customize-Your-Form-Using-Custom-CSS-Codes

  • Profile Image
    Victoria_K
    Answered on July 28, 2018 at 04:53 PM

    Hello,

    Here are the icons' links on your form's code:

    1532811450screenshotqv8ic.png

    If you want to use different icons, you may replace the links with new ones. 

    We could help if you tell us what exactly you want to implement on your form.

    Thank you!

  • Profile Image
    jonathan
    Answered on July 28, 2018 at 05:36 PM

    I assumed you meant something similar to this 

    1532813776zzz 2018-07-29 05.32.58.png


    You can do it by adding these CSS codes on your form.

    #cid_9:before {

        content : url('https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/46354/310582/tKAptApa5nRK6tz/Screen%20Shot%202014-09-26%20at%203.54.38%20PM.png');

        position : absolute;

        top : 7px;

        left : 45px;

        width : 46px;

        height : 38px;

    }


    Let us know if you need further assistance.

  • Profile Image
    justtechrecruitment
    Answered on July 28, 2018 at 06:08 PM

    Thank you! That has worked. How did you know that it was #cid_9? 

    When I was looking at the form field, All I could see was that the form ID was #input_17

  • Profile Image
    jonathan
    Answered on July 28, 2018 at 06:14 PM

    In the field property Advanced tab, you can check the field Unique Name and Field ID.

    User guide: How to Find Field IDs and Names

    1532816018zzz 2018-07-29 06.12.33.png