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.

Show text from checkboxes

Gravity Support Forums » Plugin Support » Gravity Forms

  1. gcollignon
    Member

    Hi, I don't know how to search for this, but I would greatly appreciate if you can help me. This is what I would like to accomplish:

    I want to add checkboxes to a form and once someone clicks on one I would like for that name to appear above an image.

    For example - I am going to add a background image in a html field this background image is a grid of a classroom with the desks. Below that field I am going to add a list of names (using a checkbox field) I want the name to appear in the correct place when the box is checked.

    I really appreciate your help
    Have a wonderful day

    Posted 12 years ago on Saturday May 12, 2012 | Permalink

  2. David Peralty

    I'm not quite sure I completely understand. Can you mock up something or give me some more information? You could look into conditional fields for this, otherwise, you will be looking at using some hooks and Javascript to accomplish what I think you are asking.

    Posted 12 years ago on Monday May 14, 2012 | Permalink

  3. gcollignon
    Member

    Hi David I hope you are starting your week wonderfully. I will try to explain it in a different manner.

    Let's say a pizza order. I have a drawing of a pizza. I am going to add a list of all the ingredients I have (a checkbox list) one titled "right half" another one "left half" when people click on an ingredient I want the name of the ingredient to appear inside the pizza's picture (right or left) That way people will be able visually see what they are ordering.

    Another example could be a restaurant. I have a map of my tables. I am going to add a list of the waiters (checkboxes) when you click the name of the waiter in the checkbox I want that name to appear in the tables he is going to serve.

    Thanks

    Posted 12 years ago on Monday May 14, 2012 | Permalink

  4. David Peralty

    Ah, I see what you are talking about and while it is possible, a customization like that is above and beyond the support we are able to provide. You will want to do the changes to the form using JavaScript.

    You would want to layer all the possible graphics and use JavaScript to reveal them based on form selections.

    Since people are selecting things, you won't need to do anything to the submitted data because it should all come through properly (without the final image of course).

    Posted 12 years ago on Monday May 14, 2012 | Permalink

  5. gcollignon
    Member

    Is there any other solutions a little bit simpler :( I am newbie at thisand of course no javascript or anything like that...

    I was thinking maybe add html sections one per item and make them conditional to the selected checkboxes, but I don;t know how to accommodate them or show them in different columns or something like that. I laos didn;t know how to add an image as a background in a form...

    Posted 12 years ago on Wednesday May 16, 2012 | Permalink

  6. David Peralty

    If you did it with HTML sections, you would put images in them I'm assuming (PNG's with transparency) and then have to use CSS to move them into position. You could then make them conditional upon selection (to show or hide) but the issue would potentially be that the layering of graphics would be in the wrong order (if you for instance wanted pepperoni below mushrooms). If you are good with CSS and PNGs, then it might be possible to do it this way.

    Posted 12 years ago on Wednesday May 16, 2012 | Permalink

  7. gcollignon
    Member

    Thanks David, is there a way to add a background image to the form?

    Posted 12 years ago on Thursday May 17, 2012 | Permalink

  8. Rob Harrell
    Member

    Yes, there are many different selectors to hook onto for this. You can see a guide here for design:

    http://www.gravityhelp.com/documentation/page/Design_and_Layout

    If you get stuck, post a link to your form and I'll help you with a selector to use.

    Posted 12 years ago on Thursday May 17, 2012 | Permalink

  9. David Peralty

    Yup, just view source your form, find out the ID of it, and then in your CSS file, you can add the background-image to it.

    http://www.w3schools.com/css/css_background.asp

    Posted 12 years ago on Thursday May 17, 2012 | Permalink

  10. gcollignon
    Member

    Thanks David. I do get the code for the background. I am guessing it is something like this:

    #gform_wrapper_xx - where "xx" is my form ID
    body {background-image:url('paper.gif');}

    What I don't understand i how to add it combined with the form ID. Can you please point me to:
    How do I find the form ID (is it just the one that appears in the form list)
    How do I make the background image just for the second page of my form.

    Thanks again for all your help

    Posted 12 years ago on Thursday May 17, 2012 | Permalink

  11. Rob Harrell
    Member

    Your best bet here is to view source and or use Chrome Developer Tools or Firebug for Firefox. These tools allow you to inspect elements to find out their class names and IDs, as well as see associated CSS that belongs to them, in real time. Chrome Developer Tools is built in and Firebug is an add-on you can get for free. If you had a link to your form I could show you an example of this and send you a screenshot, so you know what to look for and where.

    Posted 12 years ago on Friday May 18, 2012 | Permalink

  12. gcollignon
    Member

    Hi I am really new to this coding thing so I am very grateful for your response... here's the link to my form

    http://www.pizzahappy.com/ordena-en-linea/arma-tu-pizza/

    Have a great day!

    Posted 12 years ago on Sunday May 20, 2012 | Permalink

  13. Rob Harrell
    Member

    No problem, take a look at this Screenshot You'll see how to ID the page 2 wrapper.

    The selector would be: #gform_page_2_2 {}

    Posted 12 years ago on Sunday May 20, 2012 | Permalink

  14. gcollignon
    Member

    Hi Rob, WONDERFUL, thanks :) I tried adding a background image to the second page and it work perfectly, now I was wondering if I can do the same (add a background image) but to a section. If I add a section break to my form and I want to add the background image only to that section break, how can I get the selector of that section?

    Thanks

    Posted 12 years ago on Monday May 21, 2012 | Permalink

  15. Rob Harrell
    Member

    That's where it gets tricky. A Section break doesn't mean it wraps around a set of fields. That would be more like the fieldset element. This takes a bit of manipulation with the use of HTML fields. See these posts for more information:

    http://www.gravityhelp.com/forums/topic/how-can-i-get-the-form-fieldsboxes-side-by-side#post-29425
    http://www.gravityhelp.com/forums/topic/fieldsets#post-17019

    Once you get this in place, then you can set it up to target a grouping of fields to add a background.

    Posted 12 years ago on Monday May 21, 2012 | Permalink