Hi,
I too know next to nothing about CSS styling etc. I tried following the advice given to others but it is just mumbo jumbo speak to me. I haven't a clue!
Please help! I just want my form to look good on my page.
Cheers,
Cindy
Hi,
I too know next to nothing about CSS styling etc. I tried following the advice given to others but it is just mumbo jumbo speak to me. I haven't a clue!
Please help! I just want my form to look good on my page.
Cheers,
Cindy
The URL to my form page is http://www.cindyrevellphotography.com/free-quote/
Well, "looking good" is pretty relative, but I can help you get it to look better. Your theme is throwing all sorts of wonky styles in there and causing the issue.
Open up your theme's stylesheet (usually the style.css file) and paste this CSS snippet at the very end of the file.
[css]
/* un-float the labels */
#content .gform_wrapper form label {
float:none;
}
/* remove the bullet graphics and indents from the form list */
body .gform_wrapper form .gform_body ul,
body .gform_wrapper form .gform_body ul li {
list-style-type:none!important;
list-style-image:none!important;
list-style:none!important;
background-image:none!important;
background:none!important;
padding:0!important;
margin:0!important
}
/* remove extra horizontal padding and floats from inputs */
#content .gform_wrapper form input[type="text"],
#content .gform_wrapper form input[type="url"],
#content .gform_wrapper form input[type="tel"],
#content .gform_wrapper form input[type="email"],
#content .gform_wrapper form input[type="number"],
#content .gform_wrapper form input[type="password"],
#content .gform_wrapper form textarea {
float: none;
padding: 5px 0 !important
}
That should get you to about 99%. You may need to make some tweaks from there to suit your needs, but it should look much better.
test screenshot: http://bit.ly/sYyvbH
The screenshot looks good! Can you please do 1 other styling for me? Under "Your Requirements", could you please split the radio boxes into two columns to shorten the form a bit?
I spoke too soon. There were two stylesheets - style.css and style.min.css. I pasted the code into both of them just to be sure. It didn't change anything :(
If you're not sure where exactly to put your custom styles, you should probably contact your theme provider and ask them. Lots of folks set it up differently. The styles will work if they get loaded in the page via the correct stylesheet. I see that the "style.min.css" file does get loaded, but don't see your custom Gravity Forms rules in there.
http://www.cindyrevellphotography.com/wp-content/themes/duotive-three/style.min.css
For the "your requirements" checkboxes, you can use one of the CSS Ready Classes and apply them via the form editor to that field. There are classes that create 2, 3 and 4 column layouts for the checkboxes and radio buttons. You can find out how to use those here.
http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes
look for "gf_list_2col" - that should be what you want.