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.

pictures next to checkboxes and buttons

  1. Can you place pictures next to radio buttons and check boxes in gravity form?

    Posted 12 years ago on Tuesday May 1, 2012 | Permalink
  2. Yes sir.

    Posted 12 years ago on Tuesday May 1, 2012 | Permalink
  3. Are you allowed to elaborate a little more?
    I have purchased gravity form already. We want to have nice illustrations next to the check boxes for kids.

    This is a gravity form we re using now:
    http://www.palcs.org/enroll-now-2012-13/

    Posted 12 years ago on Wednesday May 2, 2012 | Permalink
  4. You would just put your HTML to your image (<img src="">) in the option label and it will show up. Alternatively, you could use CSS to place the images as well as background images if you are comfortable with that.

    Moving thread to the support forum.

    Posted 12 years ago on Wednesday May 2, 2012 | Permalink
  5. Also wondering how I can adjust the distance between the check box and the name of the check box on the right.

    thanks

    Posted 12 years ago on Wednesday May 2, 2012 | Permalink
  6. We can do that with CSS, you can see our CSS documentation here:
    http://www.gravityhelp.com/documentation/page/Design_and_Layout

    Are you versed in CSS at all? If not, you can post a link to your form and I can help guide you.

    Posted 12 years ago on Wednesday May 2, 2012 | Permalink
  7. Here is the link to the testing form:
    http://palcs.bhibbs.job.ana.io/enroll-now/

    Instead of text I want to replace the tv station with its logo. Also would like to move the image closer tot eh radio button. I am good with CSS just need to know where to look.

    Also seems like when there are 2 lines next to radio button it goes right justified can we make it left just incase?

    Thanks Rob

    Posted 12 years ago on Monday May 7, 2012 | Permalink
  8. Instead of placing the text there for each station. Just replace the text with HTML for calling in an image. You will want to prep all of your images ahead of time so they are formatted consistency, then upload them to your site (or somewhere on the web) and then just path to them via HTML in the checkbox option, rather than the text being in there.

    Once you get those in there, we can take a look at making adjustments.

    Posted 12 years ago on Monday May 7, 2012 | Permalink
  9. I got it to work how do i adjust gutter between radiobutton and image?

    Posted 12 years ago on Monday May 7, 2012 | Permalink
  10. Correct, each option would have something like: <img src="image path here" alt="Description" />

    Posted 12 years ago on Monday May 7, 2012 | Permalink
  11. Ok I got it to work.
    So 2 last things to do:
    adjust column width of the 4 columns I have and
    distance between radio button and image.

    Thanks

    Posted 12 years ago on Monday May 7, 2012 | Permalink
  12. Your best bet is to use something like Chrome Developer Tools or Firebug for Firefox to find the selectors you want to adjust. For example, this Screenshot is showing you a selector that has a margin left of 24px.

    So in your theme's stylesheet you could target those as:

    [css]
    .gform_wrapper .gfield_checkbox li label, .gform_wrapper .gfield_radio li label {
    margin: 0 0 0 10px !important;
    }
    Posted 12 years ago on Monday May 7, 2012 | Permalink
  13. Where is the .css file inside wordpress?
    Thanks. I have firebug.

    Posted 12 years ago on Tuesday May 8, 2012 | Permalink
  14. Each theme is different - your theme's css file should be located in the root of the theme or inside a CSS folder, etc. Sometimes there are special instructions to follow. You'll never want to update the plugin css file because it will get overwritten when we send out plugin updates.

    Posted 12 years ago on Tuesday May 8, 2012 | Permalink
  15. oh ok so the css rule for the radio buttons is inside my theme .css file?

    Posted 12 years ago on Tuesday May 8, 2012 | Permalink
  16. The screenshot I showed you is coming from our plugin's default styles (forms.css). The selector below the arrow in my screenshot is coming from your theme's stylesheet (style.css). The selector I provided can be placed into your theme's stylesheet. In most cases our default styles do the job, but in your situation here, it is unique and custom - which requires you to write your own CSS and target the correct elements to do so. There are a lot of great resources here regarding CSS:

    http://www.gravityhelp.com/other-resources/

    and some guides here regarding our selectors and form structure:
    http://www.gravityhelp.com/documentation/page/Design_and_Layout

    Posted 12 years ago on Tuesday May 8, 2012 | Permalink
  17. I will have to change the css inside gravityform because we have multiple forms with radiobuttons unless i can make a separate class for the gravityform i am making now.

    how do i locate the gravityform css inside wordpress?

    Posted 12 years ago on Tuesday May 8, 2012 | Permalink
  18. Each form has it's own unique ID and has many different ways to uniquely hook onto elements. What are you having a hard time with specifically?

    Also, each field has the ability to place a class and each form can also have a class applied to it as well. But, as I said above, there are many ways to do unique selectors based on form ID.

    For example, this snippet would only effect labels inside of radio and checkbox fields on the form with the ID of 1:

    [css]
    #gform_wrapper_1 .gfield_checkbox li label, .gform_wrapper .gfield_radio li label {
    margin: 0 0 0 10px !important;
    }

    To where as this selector would apply to all gravity forms:

    [css]
    .gform_wrapper .gfield_checkbox li label, .gform_wrapper .gfield_radio li label {
    margin: 0 0 0 10px !important;
    }
    Posted 12 years ago on Tuesday May 8, 2012 | Permalink
  19. So each gravity form made get its own .css style attached to it?

    this is what i want to do.
    http://img703.imageshack.us/img703/9508/tvchannels.jpg

    Posted 12 years ago on Tuesday May 8, 2012 | Permalink
  20. Each form has it's own unique wrapper ID and each field on every form has it's own unique ID in the li element. In combination, each form and field also has shared classes as described in this documentation:

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

    Have you considered hiring someone to do this job for you? You can always post on our job board:
    http://www.gravityhelp.com/forums/forum/job-board

    Posted 12 years ago on Tuesday May 8, 2012 | Permalink
  21. Can you tell me how to access the .css style sheet for each form.
    Its directory where it is located inside wordpress?

    Posted 12 years ago on Tuesday May 8, 2012 | Permalink
  22. @bhibbs Each form does not get it's own CSS stylesheet, and you do not edit or change the Gravity Forms stylesheet directly.

    You customize the form styles by adding CSS to your themes stylesheet that targets and styles the form elements how you want them styled.

    So for example, if you want to make the field labels red... you would add CSS to your themes stylesheet that targets the field elements of the form using the correct CSS selector and you would set it's color to red.

    You need to view the source for the page containing your form, see the id's and classes that are being used for the fields you want to customize using CSS and then target those elements using CSS to style them the way you want them.

    You would add this CSS to your themes stylesheet file.

    Based on the questions that you are asking, I would highly recommend doing what Rob suggested above which is hiring a WordPress consultant to implement this customization for you.

    Posted 12 years ago on Tuesday May 8, 2012 | Permalink
  23. do you have any example code to put checkbox under image?

    thanks

    Posted 12 years ago on Wednesday May 9, 2012 | Permalink
  24. Ok so i was able to style the wrapper but it didnt include the checkbox and the image is on top of the checkbox. do you have code to change position of checkbox so it is on top of the image to the right

    thanks

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