https://legacy.forums.gravityhelp.com/topic/help-with-styling-a-form-need-something-decent-looking Gravity Support Forums Topic: Help with styling a form? Need something decent looking... en-US Mon, 20 Apr 2026 19:59:06 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/help-with-styling-a-form-need-something-decent-looking#post-25605 Mon, 16 May 2011 12:17:33 +0000 Kevin Flahaut 25605@https://legacy.forums.gravityhelp.com/ <p>@aemillerco,</p> <p>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.</p> <pre><code>[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,&quot;Times New Roman&quot;,Times,serif; }</code></pre> <p>screenshot: <a href="http://grab.by/a8Qs" rel="nofollow">http://grab.by/a8Qs</a></p> <p>If you need further help, I'd suggest contacting the Pagelines support team since the wonky styling is all coming from their theme. </p> https://legacy.forums.gravityhelp.com/topic/help-with-styling-a-form-need-something-decent-looking#post-25523 Sat, 14 May 2011 08:58:22 +0000 Kevin Flahaut 25523@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>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.</p> <pre><code>[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 }</code></pre> <p>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. </p> https://legacy.forums.gravityhelp.com/topic/help-with-styling-a-form-need-something-decent-looking#post-25519 Sat, 14 May 2011 01:14:10 +0000 aemillerco 25519@https://legacy.forums.gravityhelp.com/ <p>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:</p> <p><a href="http://i.imgur.com/OUnhK.png" rel="nofollow">http://i.imgur.com/OUnhK.png</a></p> <p>Set to NO, it looks like this:</p> <p><a href="http://i.imgur.com/vYSKR.png" rel="nofollow">http://i.imgur.com/vYSKR.png</a></p> <p>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.</p> <p>Thanks again </p> https://legacy.forums.gravityhelp.com/topic/help-with-styling-a-form-need-something-decent-looking#post-25518 Sat, 14 May 2011 01:09:43 +0000 aemillerco 25518@https://legacy.forums.gravityhelp.com/ <p>Hey Kevin,</p> <p>Not really looking for it to look like customseedpacks.com/order .... that's just the form I had before, and why i bought gravity :)</p> <p>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.</p> <p>As an example... here is a basic, but really classic looking form:</p> <p><a href="http://landing.eblox.com/remember-ecommerce/" rel="nofollow">http://landing.eblox.com/remember-ecommerce/</a></p> <p>How would I swing that with CSS and GF?</p> <p>I really appreciate you guys. </p> https://legacy.forums.gravityhelp.com/topic/help-with-styling-a-form-need-something-decent-looking#post-25476 Fri, 13 May 2011 10:35:58 +0000 Kevin Flahaut 25476@https://legacy.forums.gravityhelp.com/ <p>@aemillerco,</p> <p>just to be clear, you want your Gravity Form to look more like the form here?</p> <p><a href="http://www.customseedpacks.com/order/" rel="nofollow">http://www.customseedpacks.com/order/</a></p> <p>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. </p> https://legacy.forums.gravityhelp.com/topic/help-with-styling-a-form-need-something-decent-looking#post-25471 Fri, 13 May 2011 08:49:21 +0000 Mthrearth88 25471@https://legacy.forums.gravityhelp.com/ <p>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. </p> https://legacy.forums.gravityhelp.com/topic/help-with-styling-a-form-need-something-decent-looking#post-25461 Fri, 13 May 2011 01:02:57 +0000 Kevin Flahaut 25461@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>I'll take a closer look at your form and get back to you asap with some suggestions. </p> https://legacy.forums.gravityhelp.com/topic/help-with-styling-a-form-need-something-decent-looking#post-25457 Thu, 12 May 2011 21:41:35 +0000 aemillerco 25457@https://legacy.forums.gravityhelp.com/ <p>Kevin,</p> <p>Thanks for the reply. I appreciate it.</p> <p>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.</p> <p>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.</p> <p>I'm not even sure it's inheriting my themes style. Here is what a normal form looks like with my theme:</p> <p><a href="http://www.customseedpacks.com/order/" rel="nofollow">http://www.customseedpacks.com/order/</a></p> <p>*EDIT* Maybe not... that other form was made with contactform7 so it could very well be styled somehow with that plugin. </p> https://legacy.forums.gravityhelp.com/topic/help-with-styling-a-form-need-something-decent-looking#post-25456 Thu, 12 May 2011 21:18:18 +0000 Kevin Flahaut 25456@https://legacy.forums.gravityhelp.com/ <p>"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. </p> https://legacy.forums.gravityhelp.com/topic/help-with-styling-a-form-need-something-decent-looking#post-25451 Thu, 12 May 2011 19:23:32 +0000 aemillerco 25451@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p><a href="http://www.customseedpacks.com/contact/" rel="nofollow">http://www.customseedpacks.com/contact/</a></p> <p>Thanks! </p>