https://legacy.forums.gravityhelp.com/topic/custom-css-to-make-form-appear-correctly Gravity Support Forums Topic: Custom CSS to make form appear correctly? en-US Sun, 19 Apr 2026 18:30:04 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/custom-css-to-make-form-appear-correctly#post-85624 Wed, 31 Oct 2012 09:03:25 +0000 Chris Hajer 85624@https://legacy.forums.gravityhelp.com/ <p>Glad we were all able to help you get that resolved. </p> https://legacy.forums.gravityhelp.com/topic/custom-css-to-make-form-appear-correctly#post-85621 Wed, 31 Oct 2012 09:02:27 +0000 JonnoPrice 85621@https://legacy.forums.gravityhelp.com/ <p>You sir are a gentleman and a scholar </p> https://legacy.forums.gravityhelp.com/topic/custom-css-to-make-form-appear-correctly#post-85616 Wed, 31 Oct 2012 08:58:01 +0000 Chris Hajer 85616@https://legacy.forums.gravityhelp.com/ <p>You can use this CSS to style the submit button. The style is just to show you how to target the button:</p> <pre><code>[css] body .gform_wrapper .gform_button { color: #000; border: 2px solid #ADD8E6!important; padding: 5px; }</code></pre> https://legacy.forums.gravityhelp.com/topic/custom-css-to-make-form-appear-correctly#post-85611 Wed, 31 Oct 2012 08:43:52 +0000 JonnoPrice 85611@https://legacy.forums.gravityhelp.com/ <p>Thanks Chris, the comma fixed the large text box areas.. the only thing still missing is the submit button :-) Can you help with this final piece of the puzzle?</p> <p>PS I also updated the theme as suggested by the theme author but clearly this did not help.. I've told them they should fix whatever it is because having a theme that works with Gravity Forms is a bit of a no-brainer. </p> https://legacy.forums.gravityhelp.com/topic/custom-css-to-make-form-appear-correctly#post-85597 Wed, 31 Oct 2012 08:19:15 +0000 Chris Hajer 85597@https://legacy.forums.gravityhelp.com/ <p>You need a comma at the end of line 07. I checked your site and the comma is missing from the styles you added there as well. </p> https://legacy.forums.gravityhelp.com/topic/custom-css-to-make-form-appear-correctly#post-85537 Wed, 31 Oct 2012 06:21:30 +0000 JonnoPrice 85537@https://legacy.forums.gravityhelp.com/ <p>Hi Kevin,</p> <p>Thanks but unfortunately that addition did not do the trick. I've added the following Custom CSS to the theme:<br /> <pre><code>body .gform_wrapper input[type=text], body .gform_wrapper input[type=url], body .gform_wrapper input[type=email], body .gform_wrapper input[type=tel], body .gform_wrapper input[type=number], body .gform_wrapper input[type=password], body .gform_wrapper select body .gform_wrapper textarea { border: 2px solid #ADD8E6!important; height: 20px }</code></pre> <p>Still don't see the larger text area border nor the submit button.<br /> <a href="http://benchmarkingcrew.com/register-interest/" rel="nofollow">http://benchmarkingcrew.com/register-interest/</a></p> <p>Thanks in advance<br /> Jonathan </p> https://legacy.forums.gravityhelp.com/topic/custom-css-to-make-form-appear-correctly#post-85201 Tue, 30 Oct 2012 11:13:42 +0000 Kevin Flahaut 85201@https://legacy.forums.gravityhelp.com/ <p>Oops. I left the textarea off the rule.. try this one.</p> <pre><code>[css] body .gform_wrapper input[type=text], body .gform_wrapper input[type=url], body .gform_wrapper input[type=email], body .gform_wrapper input[type=tel], body .gform_wrapper input[type=number], body .gform_wrapper input[type=password], body .gform_wrapper select, body .gform_wrapper textarea { border: 1px solid #AAAAAA!important; height: 20px }</code></pre> https://legacy.forums.gravityhelp.com/topic/custom-css-to-make-form-appear-correctly#post-85190 Tue, 30 Oct 2012 10:48:03 +0000 JonnoPrice 85190@https://legacy.forums.gravityhelp.com/ <p>Hi Kevin and thanks I appreciate the help.</p> <p>I've just added the text you provided and the single line boxes are displaying. the paragraph text boxes still don't have a border and the submit button is still invisible. </p> <p><a href="http://benchmarkingcrew.com/register-interest/" rel="nofollow">http://benchmarkingcrew.com/register-interest/</a></p> <p>Once I have this all fixed I'll also send a note to the them developer so they can look to fix this in their next update.</p> <p>Cheers<br /> Jonathan </p> https://legacy.forums.gravityhelp.com/topic/custom-css-to-make-form-appear-correctly#post-85188 Tue, 30 Oct 2012 10:38:37 +0000 Kevin Flahaut 85188@https://legacy.forums.gravityhelp.com/ <p>your theme has disabled all the default borders for input types.. that's kind of stupid in my opinion. You can add this to re-enable the borders for your Gravity Forms. You can also add other properties to the rule if you need.. such as the height value I've added below.</p> <pre><code>[css] body .gform_wrapper input[type=text], body .gform_wrapper input[type=url], body .gform_wrapper input[type=email], body .gform_wrapper input[type=tel], body .gform_wrapper input[type=number], body .gform_wrapper input[type=password], body .gform_wrapper select { border: 1px solid #AAAAAA!important; height: 20px }</code></pre> <p>test screenshot: <a href="http://bit.ly/RmAWfM" rel="nofollow">http://bit.ly/RmAWfM</a> </p> https://legacy.forums.gravityhelp.com/topic/custom-css-to-make-form-appear-correctly#post-85031 Tue, 30 Oct 2012 06:01:37 +0000 JonnoPrice 85031@https://legacy.forums.gravityhelp.com/ <p>Hi there. </p> <p>I don't speak CSS very well (red face). </p> <p>I've installed a new theme and then installed Gravity Forms. It appears the theme is overriding the GF styling and as a result it is displaying poorly. </p> <p>For example I can't see the input boxes or the submit button. </p> <p>The theme (<a href="http://www.s5themes.com/theme/simplecorp/" rel="nofollow">http://www.s5themes.com/theme/simplecorp/</a>) does have a Custom CSS box where you can put in CSS.</p> <p>Can you please help and tell me what custom css commands I can use to make this display?</p> <p>My form is live here <a href="http://benchmarkingcrew.com/register-interest/" rel="nofollow">http://benchmarkingcrew.com/register-interest/</a></p> <p>thanks in advance </p>