https://legacy.forums.gravityhelp.com/topic/help-with-css-on-a-form-1 Gravity Support Forums Topic: Help with CSS on a form en-US Mon, 20 Apr 2026 10:08:58 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/help-with-css-on-a-form-1#post-59950 Tue, 22 May 2012 16:22:35 +0000 Rob Harrell 59950@https://legacy.forums.gravityhelp.com/ <p>By default the browser should automatically add that. I'm seeing it in Chrome when clicking into an input and the textarea. It's a subtle change, but it's there. See this <a href="http://www.evernote.com/shard/s212/sh/445858c7-ed3c-47c1-b17a-c8721442b624/695ab1d8c62242e678fae0767856ac82" rel="nofollow">Screenshot</a></p> <p>Your theme has a :focus selector in place to use box-shadow. Keep in mind that IE6/7/8 will not render box-shadow because it's a CSS3 property.</p> <p>This is how you could select only Gravity Forms inputs on focus:</p> <pre><code>[css] .gform_wrapper input[type=&quot;text&quot;]:focus, .gform_wrapper input[type=&quot;url&quot;]:focus, .gform_wrapper input[type=&quot;email&quot;]:focus, .gform_wrapper input[type=&quot;tel&quot;]:focus, .gform_wrapper input[type=&quot;number&quot;]:focus, .gform_wrapper input[type=&quot;password&quot;]:focus, .gform_wrapper textarea:focus {}</code></pre> https://legacy.forums.gravityhelp.com/topic/help-with-css-on-a-form-1#post-59949 Tue, 22 May 2012 16:17:05 +0000 kdmmdk1 59949@https://legacy.forums.gravityhelp.com/ <p>OK thanks for your help.<br /> I have made some changes. Any help on making the field change colour (glowing effect) when inputting data?</p> <p>is it box shadows that I need to add? </p> <p>thx again </p> https://legacy.forums.gravityhelp.com/topic/help-with-css-on-a-form-1#post-59924 Tue, 22 May 2012 15:15:21 +0000 Rob Harrell 59924@https://legacy.forums.gravityhelp.com/ <p>You can use our ready classes to try to display the fields you want inline, just note that you will need to use the top label placement for them to work:</p> <p><a href="http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes" rel="nofollow">http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes</a></p> <p>Also, keep in mind that Gravity Forms is inheriting the styles from your theme and following the rules that are in place. You might want to consider hiring a professional to customize and overwrite your theme styles appropriately. You can post on our job board or I'd be happy to do this for you at a flat-rate if you'd like to email me: <a href="mailto:rob@rocketgenius.com">rob@rocketgenius.com</a></p> <p><a href="http://www.gravityhelp.com/forums/forum/job-board" rel="nofollow">http://www.gravityhelp.com/forums/forum/job-board</a></p> <p>Otherwise, all I can give you are the CSS selectors to use and target in terms of guidance. If you had one thing to change it probably wouldn't be a big deal for me to pop in a snippet for you to use, but your theme has a bit of generic element styling going on, and will need some CSS mastery to do so effectively and to achieve the details you are looking for, without getting rid of the generic selectors I pointed out in the screenshot above.</p> <p>Also, in this <a href="http://www.evernote.com/shard/s212/sh/80ae6538-f211-4228-ac54-7f89a83b9c64/bfe93db10b5e1770c03235daa02c1cae" rel="nofollow">Screenshot</a>, something is injecting break tags into the form's code. This will either be coming from the theme or another plugin and it's something you will want to remedy as that could also cause some of your spacing woes. </p> https://legacy.forums.gravityhelp.com/topic/help-with-css-on-a-form-1#post-59920 Tue, 22 May 2012 14:59:38 +0000 kdmmdk1 59920@https://legacy.forums.gravityhelp.com/ <p>Thx. </p> <p>The link I sent <a href="http://www.kalan.ca/contact-kalan/" rel="nofollow">http://www.kalan.ca/contact-kalan/</a><br /> will replace <a href="http://www.kalan.ca/contact-us/" rel="nofollow">http://www.kalan.ca/contact-us/</a></p> <p>I re-aligned the labels but as far as customizing this more I'd like the form to fit the space better, (name fields are bleeding over) limit the length of some fields, increase font size and have the field highlight red when inputting data. And space the description on the name fields better as it is not aligned properly as is. </p> <p>If I want the Phone input field and the Email input field on the same line is this a change I can do from within the form settings? or is this CSS?</p> <p>Sorry....this would take me hours to figure out. Thx for the help. </p> https://legacy.forums.gravityhelp.com/topic/help-with-css-on-a-form-1#post-59916 Tue, 22 May 2012 14:45:30 +0000 Rob Harrell 59916@https://legacy.forums.gravityhelp.com/ <p>So, first off - these generic element selectors from your theme is the root cause of how things are looking: <a href="http://www.evernote.com/shard/s212/sh/5c730be7-9701-4c59-be87-6b61cfdcb233/a83f31cda06bb93683d739f7163ad08c" rel="nofollow">Screenshot</a></p> <p>The Contact Us form you linked to, has the "Top Label" placement of the labels, yours has the "Left Aligned". So you can change that via the form settings in the formbuilder. Doing so will give you this result: <a href="http://www.evernote.com/shard/s212/sh/a7de860e-6c67-4dcb-afd1-34fe867a9db1/1d666a080fe9aec085d822d5a5695e61" rel="nofollow">Screenshot</a></p> <p>Can you provide more info as to what you are trying to achieve as far as the form fields go? </p> https://legacy.forums.gravityhelp.com/topic/help-with-css-on-a-form-1#post-59914 Tue, 22 May 2012 14:39:44 +0000 kdmmdk1 59914@https://legacy.forums.gravityhelp.com/ <p>oh, and I'd be putting this into a custom CSS field that will override the existing CSS (if this matters) </p> https://legacy.forums.gravityhelp.com/topic/help-with-css-on-a-form-1#post-59912 Tue, 22 May 2012 14:37:59 +0000 kdmmdk1 59912@https://legacy.forums.gravityhelp.com/ <p><a href="http://www.kalan.ca/contact-kalan/" rel="nofollow">http://www.kalan.ca/contact-kalan/</a> </p> https://legacy.forums.gravityhelp.com/topic/help-with-css-on-a-form-1#post-59906 Tue, 22 May 2012 14:26:56 +0000 Rob Harrell 59906@https://legacy.forums.gravityhelp.com/ <p>Can you post a live URL to your form, the one above its a preview link. </p> https://legacy.forums.gravityhelp.com/topic/help-with-css-on-a-form-1#post-59905 Tue, 22 May 2012 14:24:57 +0000 kdmmdk1 59905@https://legacy.forums.gravityhelp.com/ <p>As a CSS hack I am having a problem turning my GravityForm into a piece of art. As it is now, I could have done the same thing using ContactForm7. So who wants to help me fall in love with Gravity Forms? ;)</p> <p>This is my fugly form now:<br /> <a href="http://www.kalan.ca/?page_id=367&amp;preview=true" rel="nofollow">http://www.kalan.ca/?page_id=367&amp;preview=true</a></p> <p>I'd be fine having the above form look like GF's contact form. Simple and clean.<br /> <a href="http://www.gravityhelp.com/contact-us/" rel="nofollow">http://www.gravityhelp.com/contact-us/</a></p> <p>thanks for the help </p>