https://legacy.forums.gravityhelp.com/topic/style-the-form-layout Gravity Support Forums Topic: Style the form layout en-US Sun, 19 Apr 2026 23:29:18 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/style-the-form-layout#post-84528 Mon, 29 Oct 2012 00:09:25 +0000 Chris Hajer 84528@https://legacy.forums.gravityhelp.com/ <p>Yes, you can use a widget and we can style that.</p> <p>However, the CSS I provided would only affect the form, because it targets the .gform_wrapper div. That will not affect your page at all. </p> https://legacy.forums.gravityhelp.com/topic/style-the-form-layout#post-84371 Sat, 27 Oct 2012 23:03:07 +0000 Golden 84371@https://legacy.forums.gravityhelp.com/ <p>Is it possible to do this in a widget, so that I dont need to change the CSS style of the entire page, rather, select the parameters of the widget only? </p> https://legacy.forums.gravityhelp.com/topic/style-the-form-layout#post-84343 Sat, 27 Oct 2012 20:21:31 +0000 Chris Hajer 84343@https://legacy.forums.gravityhelp.com/ <p>1. I think I would use the Place Holder script to put the labels inside the form fields to save you more space: <a href="http://wordpress.org/extend/plugins/gravity-forms-placeholders/" rel="nofollow">http://wordpress.org/extend/plugins/gravity-forms-placeholders/</a></p> <p>2. Because you're not using a widget, Gravity Forms thinks this is a form embedded in a regular post or page, and the styling is not adjusted for a narrow space. You will have to format the form yourself to make it fit. Try adding this CSS to one of your theme's stylesheet, wherever the theme provider suggests adding custom CSS:</p> <pre><code>[css] body .gform_wrapper { background-color: #BFEAEF; padding: 5%; } body .gform_wrapper input { width: 98%!important; } /* this is temporarily hide the labels until you add the placeholder script */ body .gform_wrapper label { display: none; }</code></pre> <p>That will get you closer. You can follow the link which Kevin previously provided to learn about targeting every single element in your form with CSS. </p> https://legacy.forums.gravityhelp.com/topic/style-the-form-layout#post-83681 Thu, 25 Oct 2012 11:17:48 +0000 Golden 83681@https://legacy.forums.gravityhelp.com/ <p>I did it through HTML coding; I created a a column that takes 1/4 of the width of the content area. </p> https://legacy.forums.gravityhelp.com/topic/style-the-form-layout#post-83657 Thu, 25 Oct 2012 10:33:31 +0000 Chris Hajer 83657@https://legacy.forums.gravityhelp.com/ <p>Is that a sidebar on your page, or, how did you get the form embedded there? It does not look like the output of the Gravity Forms widget. Can you explain how you got the form where it is on the page now? I want to be sure we are targeting the correct elements. </p> https://legacy.forums.gravityhelp.com/topic/style-the-form-layout#post-83653 Thu, 25 Oct 2012 10:03:22 +0000 Kevin Flahaut 83653@https://legacy.forums.gravityhelp.com/ <p>You can find examples for styling all of the form elements here..<br /> <a href="http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples" rel="nofollow">http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples</a></p> <p>just add the new style rules to the end of your theme stylesheet. </p> https://legacy.forums.gravityhelp.com/topic/style-the-form-layout#post-83559 Thu, 25 Oct 2012 01:59:38 +0000 Golden 83559@https://legacy.forums.gravityhelp.com/ <p>Done!</p> <p>Now how can I change the background color, font size and style, and increase the size of the text fields? </p> https://legacy.forums.gravityhelp.com/topic/style-the-form-layout#post-83511 Wed, 24 Oct 2012 23:44:17 +0000 Chris Hajer 83511@https://legacy.forums.gravityhelp.com/ <p>To save some space, as shown in your image, you can use placeholders to put the labels inside the form fields. Please see this plugin: <a href="http://wordpress.org/extend/plugins/gravity-forms-placeholders/" rel="nofollow">http://wordpress.org/extend/plugins/gravity-forms-placeholders/</a></p> <p>We will have a few more suggestions after you implement this. </p> https://legacy.forums.gravityhelp.com/topic/style-the-form-layout#post-83501 Wed, 24 Oct 2012 23:31:34 +0000 Golden 83501@https://legacy.forums.gravityhelp.com/ <p>Thanks for the quick response. I just updated the page to better reflect what the form will look like. In addition, I added another image that will better exemplify what I am looking for in a form. Lastly, those are all the fields that I want for this form. </p> https://legacy.forums.gravityhelp.com/topic/style-the-form-layout#post-83457 Wed, 24 Oct 2012 21:52:21 +0000 Chris Hajer 83457@https://legacy.forums.gravityhelp.com/ <p>Do you intend on putting the form in a sidebar widget? If so, please do that, and select "Left aligned" for the Label Placement. That will get us closer to start. Go ahead and add in all your other form fields as well. Post when you have that done and we will take a look and help you with the CSS. No sense applying the CSS here since this is not where the form is going to live (or, is it?)</p> <p>Thanks </p>