https://legacy.forums.gravityhelp.com/topic/need-help-gravity-forms-displays-across-the-whole-page Gravity Support Forums Topic: Need Help: Gravity Forms Displays across the whole page en-US Mon, 20 Apr 2026 02:45:36 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/need-help-gravity-forms-displays-across-the-whole-page#post-29240 Wed, 06 Jul 2011 13:16:53 +0000 Kevin Flahaut 29240@https://legacy.forums.gravityhelp.com/ <p>Cambell,</p> <p>Thanks for the update. I'm very pleased I could help out. </p> <p>Let us know if you need anything else. </p> https://legacy.forums.gravityhelp.com/topic/need-help-gravity-forms-displays-across-the-whole-page#post-29238 Wed, 06 Jul 2011 12:50:49 +0000 Campbell 29238@https://legacy.forums.gravityhelp.com/ <p>Brother You Rock!</p> <p>That Works Kevin and thank you so much for your wonderful, insightful and timely support!</p> <p>Sincerely,</p> <p>Campbell McArthur<br /> Owner / Lead Engineer<br /> Community Computer Repair </p> https://legacy.forums.gravityhelp.com/topic/need-help-gravity-forms-displays-across-the-whole-page#post-29237 Wed, 06 Jul 2011 12:30:05 +0000 Kevin Flahaut 29237@https://legacy.forums.gravityhelp.com/ <p>The form wrapper with can be defined easily. A width value isn't set by default so it can adapt to whatever size content area you have available.</p> <p>For your form, you would just need to add this rule to your theme stylesheet.</p> <pre><code>[css] body #gform_wrapper_1 { width: 60%; }</code></pre> <p>screenshot; <a href="http://bit.ly/nkDJyj" rel="nofollow">http://bit.ly/nkDJyj</a></p> <p>You can reference the documentation at the link below to find how to properly target the different form elements for manipulation with CSS. There are examples using the shared CSS classes for applying changes to all like elements and examples of how to target elements based on the unique field ID to change only specific fields.</p> <p><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><a href="http://www.gravityhelp.com/documentation/page/Where_Do_I_Put_This_Code%3F" rel="nofollow">http://www.gravityhelp.com/documentation/page/Where_Do_I_Put_This_Code%3F</a></p> <p>So, to do something similar to the StudioPress contact form, you would append new CSS rules to the end of your theme stylesheet like this.</p> <pre><code>[css] body .gform_wrapper .gform_body .gform_fields .gfield input[type=text], body .gform_wrapper .gform_body .gform_fields .gfield input[type=email], body .gform_wrapper .gform_body .gform_fields .gfield input[type=url], body .gform_wrapper .gform_body .gform_fields .gfield textarea { padding: 6px 0; border-radius: 4px; border: 1px solid #ccc; background-color: #eee; font-size: 14px }</code></pre> <p>screenshot: <a href="http://bit.ly/rjgHG7" rel="nofollow">http://bit.ly/rjgHG7</a></p> <p>After that, you just customize the CSS properties for the inputs to suit your preference. Good luck. </p> https://legacy.forums.gravityhelp.com/topic/need-help-gravity-forms-displays-across-the-whole-page#post-29228 Wed, 06 Jul 2011 11:54:30 +0000 Campbell 29228@https://legacy.forums.gravityhelp.com/ <p>Good morning,</p> <p>I have recently purchased a Dev License and I am new to Gravity Forms so please bear with me as I am unfamiliar with css and php coding.</p> <p>I am trying to correct the way that my Contact Page renders the Contact Form across the width of the whole page. I do not want it to display across the whole page on a full width page. I only want it to be about 60% of the entire page width.</p> <p>I am also trying to achieve a more custom Height Dimension and Layout of the Field Boxes Themselves as they are currently too squat and are not proportioned correctly in a sense that they are aesthetically pleasing in proportion or size.</p> <p>I would like to know how I can go about achieving this such as where exactly do I place the CSS code itself and what is the CSS code specifically?</p> <p>Here is my Contact Page on my Blog&gt;&gt; <a href="http://www.communitycomputerrepair.com/blog/contact" rel="nofollow">http://www.communitycomputerrepair.com/blog/contact</a></p> <p>Here is the example @ StudioPress that I wish to achieve on my contact form on my site&gt;&gt;</p> <p><a href="http://www.studiopress.com/contact" rel="nofollow">http://www.studiopress.com/contact</a></p> <p>Thank you</p> <p>Campbell McArthur </p>