Can someone help me with some CSS to make a decent looking form? The forms look really bad on my site out of the box and im not sure if its my theme or what. I am new to CSS. Specific examples would be really great.
http://www.customseedpacks.com/contact/
Thanks!
"Decent looking" is pretty subjective so please be more specific. Would you like inputs with white backgrounds instead of green, etc? Yes, your form is inheriting the styles from the parent theme. You can check the form in the admin preview window to see what the default styling would look like.
Kevin,
Thanks for the reply. I appreciate it.
Something to consider if you add additional functionality is just generation of the needed CSS. We select how we want it to look, and GF can give us the CSS to dump into our themes CSS.
That's all I am really looking for here. Just the exact CSS that it would take to make the form look like it does in the preview window. Text, color, input color, etc.
I'm not even sure it's inheriting my themes style. Here is what a normal form looks like with my theme:
http://www.customseedpacks.com/order/
*EDIT* Maybe not... that other form was made with contactform7 so it could very well be styled somehow with that plugin.
Hmm. A CSS generator wizard. Interesting idea, thanks. We've discussed adding some visual CSS options to the form settings so that may be the first piece that we add in there. I appreciate the suggestion.
I'll take a closer look at your form and get back to you asap with some suggestions.
I just got off a webinar last night with Webdesign.com .... They strongly promote Gravity Forms, and Builder with Wordpress, which is actually why I have Gravity Forms. Anyway he showed us a really cool tool that will do the trick. It is a plug-in that only works with chrome browser called stylebot.me. It is a visual css tool. Browser based, pull up any site, use tool to style changes, then copy/paste generated CSS code to your site ... hope this helps at least for he short term.
@aemillerco,
just to be clear, you want your Gravity Form to look more like the form here?
http://www.customseedpacks.com/order/
At first glance it looks like the labels and input padding/sizing is different. Let me know if that's correct and I'll work up a CSS snippet or two for you.
Hey Kevin,
Not really looking for it to look like customseedpacks.com/order .... that's just the form I had before, and why i bought gravity :)
I am not trying to be lazy, but I guess if someone could style me up a nice form with background, border, different field colors, input text color, etc - it would be easier for me to wrap my head around. Again, not trying to be lazy, i'll take it any color, shape, etc. Just having the needed code that both targets the GF areas, AND shows me exactly what to do with the CSS would be great. Then I could understand it a little better and break into it and start customizing it for my needs.
As an example... here is a basic, but really classic looking form:
http://landing.eblox.com/remember-ecommerce/
How would I swing that with CSS and GF?
I really appreciate you guys.
Here is a quick example of something I cannot wrap my head around. So if I set "Output CSS" to YES in GF, my form looks like this:
Set to NO, it looks like this:
So what is it in CSS that causes the field titles to have a bullet next to them? It's things like this that I just cannot understand how I would change.
Thanks again
The bullets show when the CSS is turned off because the form is structured using an unordered list and your browser's default styling is for a list element is bullets. The Gravity Forms stylesheet has a couple of rules that override the default bullets, padding, etc.
If you disable the Gravity Forms CSS, then it looks like you'll need to add a few CSS rules to your theme stylesheet to hide the bullets.
[css]
body .gform_wrapper ul,
body .gform_wrapper li,
body .gform_wrapper form li,
body .gform_wrapper form ul li {
list-style-type:none!important;
list-style-image:none!important;
background-image:none!important
}Just a note: since you're not really proficient with CSS, you may want to leave the default Gravity Forms stylesheet active. There's a lot of very specific rules for field sizing, spacing, etc. in there that you would have to recreate. It looks like what you really need to change are the theme styles. You can always look at your form preview in the admin to see what the default styles look like without any theme influence.
@aemillerco,
So, your Pagelines dynamic.css file is adding all of the crappy looking form styles. You should be able to edit that and remove those.. that's the best way to go about this. If for some reason you cant, you can add this to the end of your stylesheet.. or wherever Pagelines let you put custom CSS rules. Again, this is redundant.. basically adding styles to make the form look more like the defaults so it's better just to remove the other styles if you can.
[css]
body .gform_wrapper input[type=text],
body .gform_wrapper input[type=url]
body .gform_wrapper input[type=tel]
body .gform_wrapper input[type=email]
body .gform_wrapper input[type=password]
body .gform_wrapper select,
body .gform_wrapper textarea {
background-color:#fff;
color:#333;
border:1px solid #ccc;
font-size:13px!important;
box-shadow:inset 0px 0px 5px #e5e5e5;
-moz-box-shadow:inset 0px 0px 5px #e5e5e5;
-webkit-box-shadow:inset 0px 0px 5px #e5e5e5;
word-spacing: 0.4pt;
letter-spacing:0.2pt;
padding:4px 0
}
body .gform_wrapper input[type=submit],
body .gform_wrapper input.button.gform_button {
width:auto!important;
height:auto!important;
border:1px solid #ccc;
font-size:14px;
padding:6px 8px;
margin-left:0;
}
body .gform_wrapper label {
font-family: Georgia,"Times New Roman",Times,serif;
}screenshot: http://grab.by/a8Qs
If you need further help, I'd suggest contacting the Pagelines support team since the wonky styling is all coming from their theme.