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.

Custom Checkbox Images

Gravity Support Forums » Plugin Support » Gravity Forms

  1. ZilchGravity
    Member

    I've been trying to customize the checkboxes on my form, I've read a few threads in the forums that I came across, and they've helped me a bit, but I'm still not quite there.

    This is the form I am currently working on,

    http://www.ewebsolutionz.com/test/eWebMobile/mobilewp/contact/

    I'm trying to assign custom background images for each checkbox, (both unchecked, and checked states) and also change their positioning so they are in a horizontal orientation rather than a vertical stack.

    This is an image of what I currently have,
    http://www.ewebsolutionz.com/test/eWebMobile/mobilewp/wp-content/themes/eWebMobileWpTheme/Images/1.png

    and what I'm after,
    http://www.ewebsolutionz.com/test/eWebMobile/mobilewp/wp-content/themes/eWebMobileWpTheme/Images/2.png
    http://www.ewebsolutionz.com/test/eWebMobile/mobilewp/wp-content/themes/eWebMobileWpTheme/Images/3.png

    any help to get me toward that direction would be really appreciated
    Thanks in advance!

    Posted 12 years ago on Thursday October 11, 2012 | Permalink

  2. ZilchGravity
    Member

    Okay.. After reviewing some of my code, I was able to compare it to the example in this thread and solve my problem with the images showing.
    http://www.gravityhelp.com/forums/topic/checkbox-picture

    However, I'm still having a problem getting the checkboxes to be aligned horizontally. I've tried different css display options, ie, block, inline, inline block, float left etc... basically anything I could think of. I also tried using the CSS ready class gf_list_inline. That caused the checkboxes to be horizontally aligned, but made my custom images disappear and made the default checkboxes re-appear.

    Thanks again in advance!

    Posted 12 years ago on Friday October 12, 2012 | Permalink

  3. Rob Harrell
    Member

    Try this ready class out and see how that goes for you:

    gf_list_2col

    Posted 12 years ago on Friday October 12, 2012 | Permalink

  4. ZilchGravity
    Member

    Thanks so much Rob, Getting closer. But still not quite there, any thoughts?

    I'll seriously order you pizza if we can get this straightened out.

    Posted 12 years ago on Friday October 12, 2012 | Permalink

  5. Rob Harrell
    Member

    Got it - change it to gf_list_4col and then drop this CSS into your theme's stylesheet:

    [css]
#input_1_7 label {
margin-left: 0;
}

    Result

    Posted 12 years ago on Friday October 12, 2012 | Permalink

  6. ZilchGravity
    Member

    bingo.

    Posted 12 years ago on Friday October 12, 2012 | Permalink

  7. ZilchGravity
    Member

    awh crap. for some reason when I test it on my iphone, it wont let me check any of the boxes!!! life.
    any thoughts on that?

    Posted 12 years ago on Friday October 12, 2012 | Permalink

  8. ZilchGravity
    Member

    actually, I found the solution to that problem here:
    http://www.gravityhelp.com/forums/topic/clicking-checkboxes-via-label-on-ipad

    Thanks to you and your team for your awesome plugin and great support!

    Posted 12 years ago on Friday October 12, 2012 | Permalink

  9. Rob Harrell
    Member

    Right on - glad that worked out and you got it working. We appreciate your support as well!

    Posted 12 years ago on Friday October 12, 2012 | Permalink

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