https://legacy.forums.gravityhelp.com/topic/making-gf-look-sexy Gravity Support Forums Topic: Making GF look sexy. en-US Mon, 20 Apr 2026 01:13:21 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/making-gf-look-sexy#post-97659 Sat, 01 Dec 2012 05:05:15 +0000 Chris Hajer 97659@https://legacy.forums.gravityhelp.com/ <p>Travis and WDT, please share a link to the page on your site, where the form is embedded, and ensure you have added to CSS to one of your theme's stylesheets, so we can see what is going on. </p> <p>On lines 1, 4 and 24, there are specific form and field related IDs which you will have to change to make it work on your form. Rob's example targeted form 3, and on line 4, specifically field 1 in form 3. If your form is not form ID 3, and the field is not field 1, that CSS will not help you. You need to customize it for your form ID and field ID. </p> https://legacy.forums.gravityhelp.com/topic/making-gf-look-sexy#post-97057 Thu, 29 Nov 2012 17:41:10 +0000 WDT 97057@https://legacy.forums.gravityhelp.com/ <p>I am also having this issue, I have pasted the styles within my stylesheet and tried to pinpoint the divs and have had no luck whatsoever. I have a custom theme, but that shouldn't matter. It should take the styles and it is not at all. </p> https://legacy.forums.gravityhelp.com/topic/making-gf-look-sexy#post-96974 Thu, 29 Nov 2012 12:45:01 +0000 Travis Ramos 96974@https://legacy.forums.gravityhelp.com/ <p>Chris, thank you for your swift reply! I don't have familiarity with CSS and how it works - it seems simple enough, but I've tried various ways to get it to work and keep coming up empty handed. I've appended it to the end of the style.css file, insert it into my theme's CSS box, searched to make sure I don't have a custom.css file, and nothing I do seems to change the plain-box styling of the forms I've created. ANy further tips other than finding a developer that knows CSS? Thank you, </p> https://legacy.forums.gravityhelp.com/topic/making-gf-look-sexy#post-96766 Wed, 28 Nov 2012 23:34:38 +0000 Chris Hajer 96766@https://legacy.forums.gravityhelp.com/ <p>The CSS posted by Rob will go anywhere in your theme's style.css (normally.) Some themes provide a special theme options page where you can enter your own CSS. If your theme has this, you can paste the code there. Otherwise, just at the end of your theme's style.css.</p> <p><a href="http://www.gravityhelp.com/documentation/page/Where_Do_I_Put_This_Code%3F#CSS" rel="nofollow">http://www.gravityhelp.com/documentation/page/Where_Do_I_Put_This_Code%3F#CSS</a> </p> https://legacy.forums.gravityhelp.com/topic/making-gf-look-sexy#post-96763 Wed, 28 Nov 2012 23:30:07 +0000 Travis Ramos 96763@https://legacy.forums.gravityhelp.com/ <p>OK, where do exactly do I paste the above code in the css theme file? I'm really struggling to make things look better and would love a quick tutorial on how to make all the fields like the one above. Thank you, </p> https://legacy.forums.gravityhelp.com/topic/making-gf-look-sexy#post-54043 Mon, 02 Apr 2012 23:50:39 +0000 Gadarian 54043@https://legacy.forums.gravityhelp.com/ <p>more please! Thanks Rob. Your reply is great. </p> https://legacy.forums.gravityhelp.com/topic/making-gf-look-sexy#post-51690 Wed, 07 Mar 2012 21:34:06 +0000 Rob Harrell 51690@https://legacy.forums.gravityhelp.com/ <p>OK, try dropping this in. This should get you the overall same look. We are also targeting only the .gform_body class of Form ID 3 and also only the input with the ID of input_3_1 as well as only the .gform_footer class of Form ID 3. For your button you have two options. You can create your own image (the one on the GF site is an image) or style it. I noticed your theme is styling the button as it is now.</p> <pre><code>[css] #gform_wrapper_3 .gform_body { float: left; } #input_3_1 { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background-color: white; color: #333; border: 1px solid #CCC; font-size: 14px!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; color: #ADADAD; height: 60px; width: 500px; font-size: 24px!important; line-height: 62px; padding: 0 10px; } #gform_wrapper_3 .gform_footer { float: right; clear: none; }</code></pre> https://legacy.forums.gravityhelp.com/topic/making-gf-look-sexy#post-51671 Wed, 07 Mar 2012 17:54:26 +0000 kdmmdk1 51671@https://legacy.forums.gravityhelp.com/ <p>thanks for the quick response. </p> <p>I have made a quick form on this page:<br /> <a href="http://vancouverrealestate.ca/testing-page" rel="nofollow">http://vancouverrealestate.ca/testing-page</a></p> <p>Ideally I'd like it to look like the form look like the email capture form at the bottom of the gravityforms.com index page. </p> <p>I am using thesis so any CSS I will have to add to the custom.css file. Not sure if that matters at all. </p> <p>Thanks Rob. </p> https://legacy.forums.gravityhelp.com/topic/making-gf-look-sexy#post-51529 Tue, 06 Mar 2012 20:27:24 +0000 Rob Harrell 51529@https://legacy.forums.gravityhelp.com/ <p>This is all possible via CSS, however there are no cut and paste samples. Can you post a link to your form and I can provide you with something to get you started selector-wise so you can modify to your liking. </p> https://legacy.forums.gravityhelp.com/topic/making-gf-look-sexy#post-51526 Tue, 06 Mar 2012 20:12:45 +0000 kdmmdk1 51526@https://legacy.forums.gravityhelp.com/ <p>OK...this is not as easy as everyone says. </p> <p>All I want to do is create a simple box to capture customer email addresses. I can design this and drop the code into WP but it looks god awful. </p> <p>I want nice rounded corners, a big sexy email capture box and an even sexier 'Subscribe' button but I am not a CSS whiz. </p> <p>Is there any cut and paste type samples or are we stuck with ugly forms? The last thing I want to do is spend endless hours playing around in Firebug in attempts to get it right. </p> <p>Go to the bottom of GravityForms.com and you'lll see the exact example of what I want to achieve. A nice and simple email capture field. </p> <p>Anyone? Bueller? ..... Bueller? </p>