https://legacy.forums.gravityhelp.com/topic/customizing-forms-with-css Gravity Support Forums Topic: Customizing Forms with CSS en-US Wed, 22 Apr 2026 08:03:13 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/customizing-forms-with-css#post-62669 Fri, 15 Jun 2012 10:31:05 +0000 TheURLdr 62669@https://legacy.forums.gravityhelp.com/ <p>Awesome! Thank you!! </p> https://legacy.forums.gravityhelp.com/topic/customizing-forms-with-css#post-62660 Fri, 15 Jun 2012 09:23:33 +0000 Rob Harrell 62660@https://legacy.forums.gravityhelp.com/ <p>I edited that snippet and added an !important tag to it. That will do the trick for you. <a href="http://www.evernote.com/shard/s212/sh/8a674f32-094a-4c23-ad43-7d26db15d69a/fe6b2fbb4a426ab9a392a7d083297737" rel="nofollow">Screenshot</a> </p> https://legacy.forums.gravityhelp.com/topic/customizing-forms-with-css#post-62659 Fri, 15 Jun 2012 09:14:58 +0000 TheURLdr 62659@https://legacy.forums.gravityhelp.com/ <p>No Rob. That didn't work. It didn't do a thing. Do I need to change from medium length to small or large too? </p> https://legacy.forums.gravityhelp.com/topic/customizing-forms-with-css#post-62639 Thu, 14 Jun 2012 21:46:32 +0000 Rob Harrell 62639@https://legacy.forums.gravityhelp.com/ <p>This should do the trick for you:</p> <pre><code>[css] .gform_widget .gform_wrapper input[type=&quot;text&quot;], .gform_widget .gform_wrapper input[type=&quot;url&quot;], .gform_widget .gform_wrapper input[type=&quot;email&quot;], .gform_widget .gform_wrapper input[type=&quot;tel&quot;], .gform_widget .gform_wrapper input[type=&quot;number&quot;], .gform_widget .gform_wrapper input[type=&quot;password&quot;] { width: 90% !important; }</code></pre> <p>This group of selectors will target only the inputs within the widget area. </p> https://legacy.forums.gravityhelp.com/topic/customizing-forms-with-css#post-62636 Thu, 14 Jun 2012 21:03:41 +0000 TheURLdr 62636@https://legacy.forums.gravityhelp.com/ <p>I figured out most of what I wanted to do by watching several hours of CSS and Gravity Forms videos. I do have one problem that I can't figure out. How do I increase the width on the text input boxes. I am using the medium length. How can I make them a bit longer? </p> https://legacy.forums.gravityhelp.com/topic/customizing-forms-with-css#post-62082 Mon, 11 Jun 2012 08:30:11 +0000 TheURLdr 62082@https://legacy.forums.gravityhelp.com/ <p>Again, if you look at my previous comments and visit the links, you can see what I'm trying to achieve. I never had any plan to put two forms on the same page, I was just playing with the layout and code to see what they would look like. For a right column form, if you look at the bathrooms.ciacounters.com link that I provided, I would say that form is every bit of 500px, maybe more. I don't want to copy that form, but the general size and layout is what I'm looking for. I've tried various padding declarations and nothing works. I'm obviously not doing something properly. CSS...enough knowledge to get myself in trouble but not enough to get this form to look like what I want. </p> https://legacy.forums.gravityhelp.com/topic/customizing-forms-with-css#post-61921 Fri, 08 Jun 2012 11:19:58 +0000 Rob Harrell 61921@https://legacy.forums.gravityhelp.com/ <p>Let's take this one form at a time - first of all you can't have two of the same form on a single page because neither will submit correctly. So you'll want to make a new form or even duplicate the one form and replace it if you want that on the same page.</p> <p>I see the background you've placed is 500px tall. Do you plan on your form being that tall? You can always add a height of 500px to that form wrapper. Also, instead of adding the background to .gform_wrapper you would be better off applying it to the ID insted: #gform_wrapper_1.</p> <p>Each form has it's own unique wrapper ID. This comes in handy when you only want to show a background on an individual form. By applying the background to the .gform_wrapper class, it will apply that background to every single form that you place on your site, which I'm venturing to guess isn't what you would want to do.</p> <p>You can add padding declarations to push the fields away from the edge of the wrapper as well. How versed in CSS are you? </p> https://legacy.forums.gravityhelp.com/topic/customizing-forms-with-css#post-61885 Thu, 07 Jun 2012 22:37:45 +0000 TheURLdr 61885@https://legacy.forums.gravityhelp.com/ <p>OK. So I figured out how to add the changes to the child theme's style.css file from a video at WebDesign.com on Gravity Forms. I've done some simple things, but I want to place the form on top of an image to get a more customized look. I'm trying to figure out how to control the placement of the fields and the margins. I'm playing with two forms at <a href="http://173.254.52.96/~gmcontra/services/bathrooms/" rel="nofollow">http://173.254.52.96/~gmcontra/services/bathrooms/</a> one in a right side widget and one across the main part of the page. I'm really trying to achieve something that looks like the form on this page <a href="http://bathroom.ciacounters.com/" rel="nofollow">http://bathroom.ciacounters.com/</a> or the popup forms at <a href="http://pippity.com/" rel="nofollow">http://pippity.com/</a> only I don't want to use popups. </p> https://legacy.forums.gravityhelp.com/topic/customizing-forms-with-css#post-61854 Thu, 07 Jun 2012 16:40:38 +0000 David Peralty 61854@https://legacy.forums.gravityhelp.com/ <p>For each style value you want to override. You can also turn off Gravity Forms CSS output if you want to start a little more from scratch. Depends on what will take you less work to integrate the way you want. This is a main setting in Gravity Forms. </p> https://legacy.forums.gravityhelp.com/topic/customizing-forms-with-css#post-61853 Thu, 07 Jun 2012 16:29:41 +0000 thoughtwell 61853@https://legacy.forums.gravityhelp.com/ <p>Oh, and as far as David's suggestion, do I need to declare "!important" following every style value, or can I just do it at the end of my declaration block before closing the brackets? </p> <p>i.e. selector { property: value !important; property: value !important; }<br /> vs. selector { property: value; property: value !important; }</p> <p>? </p>