PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Adding Small Icons Inside Form Fields

Gravity Support Forums » Plugin Support » Gravity Forms

  1. benyschonfeld
    Member

    Hello again,

    I'd like to add a small icon in the Name field and Email field on my forms. I've tried setting the icons as "background-image" using CSS, and styling the position, repeat, padding etc to make it work but I can't seem to place it properly...

    I must be targeting the wrong div's...

    Ideally I'd like the icons to be inside the fields, on the right side, centered vertically and 10px away from the right border of the field. Can you help me with this?

    My URL just in case: http://appeando.com

    Thanks!

    Beny Schonfeld

    Posted 13 years ago on Wednesday August 10, 2011 | Permalink

  2. Kevin Flahaut
    Administrator

    Try adding this to your theme stylesheet. Change the image path of course and tweak to your liking.

    [css]
body #gform_wrapper_1 input#input_1_1 {
    background-image: url("http://www.reaudio.com/images/email_icon.gif");
    background-repeat: no-repeat;
    background-position: 97% 50%;
}

    screenshot: http://bit.ly/pS5XOR

    Posted 13 years ago on Wednesday August 10, 2011 | Permalink

  3. benyschonfeld
    Member

    Great! That works perfectly!
    Thanks so much.

    Posted 13 years ago on Wednesday August 10, 2011 | Permalink

  4. Kevin Flahaut
    Administrator

    Great. I'm glad I could help.

    Posted 13 years ago on Wednesday August 10, 2011 | Permalink

This topic has been resolved and has been closed to new replies.