Can you place pictures next to radio buttons and check boxes in gravity form?
Can you place pictures next to radio buttons and check boxes in gravity form?
Yes sir.
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/
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.
Also wondering how I can adjust the distance between the check box and the name of the check box on the right.
thanks
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.
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
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.
I got it to work how do i adjust gutter between radiobutton and image?
Correct, each option would have something like: <img src="image path here" alt="Description" />
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
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:
Where is the .css file inside wordpress?
Thanks. I have firebug.
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.
oh ok so the css rule for the radio buttons is inside my theme .css file?
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
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?
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:
To where as this selector would apply to all gravity forms:
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
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
Can you tell me how to access the .css style sheet for each form.
Its directory where it is located inside wordpress?
@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.
do you have any example code to put checkbox under image?
thanks
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