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.

Linking images to certain drop down fields

Gravity Support Forums » General » Pre-Purchase Questions

  1. timkainu
    Member

    Hello,

    I am not familiar with forms at all, but I am pretty web-savvy. I'm considering buying this product, but before I do so, I was wondering if there's a way to link an image to a certain drop down field or a radio button. Example; say I pick "grass" from the drop down as an option, and on the web page an image of grass loads. Or say I select "sky" and an image of a sky loads. Is there any way to do that with this software? Sorry if I'm not clear in my explanation.

    Thanks in advance for any help.

    Posted 13 years ago on Saturday February 12, 2011 | Permalink

  2. Carl Hancock
    Administrator

    This isn't a built in feature. It would be possible to do but it would require a jQuery customization to interact with the form. You would use jQuery to attach an event to a drop down field on the form that would change the image accordingly. It would require custom code.

    Posted 13 years ago on Saturday February 12, 2011 | Permalink

  3. timkainu
    Member

    Wow, thanks for the fast response.

    How difficult do you think it would be to accomplish this? It's something I definitely need to build for the site, but have no idea how it would be done, so that's why I was hoping Gravity Forms had the feature.

    Not to take away from Gravity Forms, but is there any other piece of software that would be able to accomplish it? If not, I'd be willing to learn a bit of code to do it with Gravity Forms, as long as it's nothing too advance.

    Thanks again for the fast response!

    P.S. am I using the correct terminology when describing what I need? If not, please correct me. I might have to do a google search =]

    Posted 13 years ago on Saturday February 12, 2011 | Permalink

  4. Carl Hancock
    Administrator

    None of the other WordPress forms plugins or the hosted Forms services do this that I am aware of. I'll have to check with one of the other developers on the team that is more familiar with jQuery than I am to see how hard it would be to pull off. I'm guessing it wouldn't be too difficult, and if it isn't too difficult we could probably provide a code snippet.

    I'm pretty sure I understand what you are asking... but if you want to help clarify before I talk to another member of our team please provide a more details explanation of what you are trying to accomplish. I'm not sure if you are a designer but a mock up of some sort might be handy too so we can be 100% sure clear on what you are trying to accomplish.

    Posted 13 years ago on Saturday February 12, 2011 | Permalink

  5. timkainu
    Member

    Wow, that'd be awesome if you could provide that! Here's the link to a quick mock-up of what I'm looking for - http://i56.tinypic.com/k15e1x.jpg - I am no designer, but this should visually describe what I need.

    Thanks for the awesome help so far.

    Posted 13 years ago on Saturday February 12, 2011 | Permalink

  6. Carl Hancock
    Administrator

    This shouldn't be a problem. You should be able to do this using Gravity Forms and some custom jQuery. One of our developers will post a code snippet and an explanation when he gets a chance to get you started. As it is after hours and a weekend, there may be a delay in him getting around to posting the information.

    Posted 13 years ago on Saturday February 12, 2011 | Permalink

  7. timkainu
    Member

    Awesome. I'm sold on your product. I think I'll head over and purchase it now so I can mess around with it and get started in the meantime.

    Thanks a ton!

    Posted 13 years ago on Saturday February 12, 2011 | Permalink

  8. David Smith
    Member

    Hi Tim,

    Here is a little snippet that does this basic functionality. There is a lot of room to make this really shine, but here's a nice head start. :)

    http://pastie.org/1555128

    Edit: Just realized I left out a couple details on how to configure this.

    1. First, set up a drop down field with values enabled and URLs to your desired images as the values: http://grab.by/8UNg
    2. Second, make sure you have a <div> on the page (with an ID) that you will populate with the image.
    3. Third, add the code above to your theme's javascript file or header. Make sure jQuery is being loaded on this page.
    4. Fourth, update the two lines of code which ask for the IDs of your dropdown and image container using IDs from the drop down and image div we created above.

    That's it. :)

    Posted 13 years ago on Saturday February 12, 2011 | Permalink

  9. Carl Hancock
    Administrator

    @tim David posted a code snippet above. It has some comments to explain it to get you started. If you need additional help, just post on the support forums. Enjoy!

    BTW if you want to try out the upcoming Gravity Forms v1.5 release it is available here on the support site on the Downloads page. It is stable and many users are using it in production. It will be released as a final release later this month.

    Posted 13 years ago on Saturday February 12, 2011 | Permalink

  10. timkainu
    Member

    Wow, awesome support you guys have. Thanks for giving me the snippet so quickly. I'm super impressed. I just bought it and am currently messin' around with it, so I have to learn how to use Gravity Forms first before I jump into using that code.

    Oh yeah, I just installed 1.5. I can't wait to learn the ins-and-outs of the plug-in so I can start building my pages!

    Posted 13 years ago on Saturday February 12, 2011 | Permalink

  11. adjinwis
    Member

    Can i see a completed version of this somewhere ? ... I am trying to replicate this ..

    Posted 13 years ago on Friday September 2, 2011 | Permalink