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.

Hint Box

Gravity Support Forums » General » Pre-Purchase Questions

  1. sandman18
    Member

    I am looking to add a hint box to my form. I need to show an image when the mouse rolls over the text. Is there any way to do this with Gravity Forms?

    Posted 14 years ago on Thursday November 25, 2010 | Permalink

  2. Kevin Flahaut
    Administrator

    There are several tooltip and "hint box" scripts out there - some more difficult to add than others. It just depends on how they're implemented.

    If it just requires a class name on an element, you can add custom class names to the field containers via the form editor. It may require that you use some custom jQuery to add an attribute to a form element if you need to. I'm sure it's possible, in fact, I've seen some forms that are using similar techniques. It's just something you'd have to do a little custom work to make happen.

    Posted 14 years ago on Thursday November 25, 2010 | Permalink

  3. sandman18
    Member

    I have found a couple scripts out there but I am not sure how to implement them into gravity forms. when I pull up the editor I don't see where to manipulate the form. Thanks.

    Posted 14 years ago on Thursday November 25, 2010 | Permalink

  4. Kevin Flahaut
    Administrator

    What are you trying to manipulate exactly? Trying add something to a field, etc?

    Posted 14 years ago on Thursday November 25, 2010 | Permalink

  5. sandman18
    Member

    Here is the best example of what I am trying to do. They give a script to insert in the <head> and then the script for the form. I don't know where to insert the script and I don't know how to add to the form field. Here is the url. http://dynamicdrive.com/dynamicindex16/showhint.htm

    Posted 14 years ago on Thursday November 25, 2010 | Permalink

  6. urmedia
    Member

    Don't recall off the top of my head, but I believe you can control the form field titles.

    Anyway, check out simple variations like:

    http://blog.robvolk.com/2009/01/jquery-form-input-hints.html

    Alternately you can get far more advanced and integrate something like:

    http://www.brandspankingnew.net/archive/2006/08/ajax_auto-suggest_auto-complete.html

    Posted 14 years ago on Thursday November 25, 2010 | Permalink

  7. sandman18
    Member

    Thanks, but it was not really what I was looking for. http://dynamicdrive.com/dynamicindex16/showhint.htm is the best example I can find. I just don't know where to put the code and how to manipulate the form field to show the question marks that you roll over.

    Posted 14 years ago on Thursday November 25, 2010 | Permalink

  8. urmedia
    Member

    Because GF populates the HTML for your forms this isn't something you can do easily.

    Here's the route to take with the current available features of GF:

    Create a text box input field and pre-populate it with a '?' and give it a class 'txtHint' or some such

    In your stylesheet remove the 'box' of the input field and align accordingly

    Attach the class of your '?' field to your javascript/jquery and that's that. Keep in mind, however, that that applies to a single class.

    Two ways to add such function to multiple fields is to get the form as an array of fields or give each text tip a unique class name,."

    I'm probably overcomplicating it..was there a basic html field with GF?

    Posted 14 years ago on Thursday November 25, 2010 | Permalink

  9. Kevin Flahaut
    Administrator

    Assuming you've added the scripts and styles to your theme header properly, this should work. The field description allows HTML so you could use that to insert the link/text you need to add.

    example: http://grab.by/7AkF

    Then, you'd just need to do a little CSS work to position the description field next to the input.. of course replacing "#field_60_2" with your actual field ID

    /* make the container relative */
.gform_wrapper li#field_60_2 {position:relative}

/* absolutely position the hint next to the input */
.gform_wrapper li#field_60_2 .gfield_description {
position:absolute;
top:20px;
left:320px;
font-size:14px;
font-style:normal
}

    screenshot: http://grab.by/7AkX

    Of course, you can tweak all the styles to suit your particular form.

    Posted 14 years ago on Friday November 26, 2010 | Permalink

  10. ryanopaz
    Member

    I tried to implement this and failed! :( But then I realized that your form builder has them exactly like I want them! :)

    the pop up bubbles you have on each field name in the form builder is all I want to use on my own forms. Any chance there is an easy way to do this?

    thanks!

    Posted 14 years ago on Tuesday November 30, 2010 | Permalink

  11. Kevin Flahaut
    Administrator

    Gravity Forms uses the "Qtip" tooltip library. There are a few steps to setting it up and using it on the front end. I detailed how to do this in a post some time back. Here's the link with the how-to.

    http://forum.gravityhelp.com/topic/add-help-tips-next-to-a-field#post-7277

    Posted 14 years ago on Tuesday November 30, 2010 | Permalink