https://legacy.forums.gravityhelp.com/topic/adjusting-contact-info-field-sizes Gravity Support Forums Topic: Adjusting Contact Info Field Sizes en-US Tue, 21 Apr 2026 03:53:29 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/adjusting-contact-info-field-sizes#post-16891 Sun, 23 Jan 2011 16:19:41 +0000 larabbits 16891@https://legacy.forums.gravityhelp.com/ <p>Thank you!!!!! </p> https://legacy.forums.gravityhelp.com/topic/adjusting-contact-info-field-sizes#post-16414 Mon, 17 Jan 2011 10:06:24 +0000 Kevin Flahaut 16414@https://legacy.forums.gravityhelp.com/ <p>You need to view the source and get the ID's for each input or containing div element in the case of the advanced field groupings. Once you have that, you can then target the elements to make changes. In my example below, if you study it you'll see that this only applies to form ID 1 (#gform_wrapper_1) and I have targeted specific inputs by ID. For the advanced field groupings, the easiest thing to do is change the width of the containing div element (.ginput_complex) and the inputs inside will resize accordingly since they are defined as percentage widths.</p> <p>The email and phone field can be targeted directly by their unique input ID and manipulated.</p> <p>Add this to the end of your theme stylesheet, tweak the width values to whatever you like and you should be good to go.</p> <pre><code>/* name fields - resize the container */ body #gform_wrapper_1 .right_label div#input_1_1.ginput_complex, body #gform_wrapper_1 .left_label div#input_1_1.ginput_complex {width:40%} /* email field */ body #gform_wrapper_1 #input_1_2 {width:322px} /* phone field */ body #gform_wrapper_1 #input_1_3 {width:322px} /* address fields - resize the container */ body #gform_wrapper_1 .right_label div#input_1_4.ginput_complex, body #gform_wrapper_1 .left_label div#input_1_4.ginput_complex {width:40%}</code></pre> <p>test screenshot: <a href="http://grab.by/8qfL" rel="nofollow">http://grab.by/8qfL</a> </p> https://legacy.forums.gravityhelp.com/topic/adjusting-contact-info-field-sizes#post-16396 Sun, 16 Jan 2011 21:18:44 +0000 larabbits 16396@https://legacy.forums.gravityhelp.com/ <p>Thank you, Kevin, I do understand this...but what I don't understand is how this is done. I read over the documentation but honestly don't get it. </p> https://legacy.forums.gravityhelp.com/topic/adjusting-contact-info-field-sizes#post-16395 Sun, 16 Jan 2011 21:13:01 +0000 Kevin Flahaut 16395@https://legacy.forums.gravityhelp.com/ <p>These fields don't have individual size options because they're added as a group of fields and have to fit together or have a certain number of characters that are required for validation and need to be a certain size.</p> <p>If you want to modify the widths on these fields, it will have to be with custom CSS rules added to your theme stylesheet. </p> <p>Please note that in the advanced field groupings, it may not be as easy as just changing the width on one field. It may necessitate that you change the widths/margins on the adjacent fields too so everything formats correctly. </p> https://legacy.forums.gravityhelp.com/topic/adjusting-contact-info-field-sizes#post-16394 Sun, 16 Jan 2011 20:37:48 +0000 larabbits 16394@https://legacy.forums.gravityhelp.com/ <p>There is no built-in size option per field for the contact info fields (name, email, phone, address)...that's the problem! </p> https://legacy.forums.gravityhelp.com/topic/adjusting-contact-info-field-sizes#post-16393 Sun, 16 Jan 2011 20:36:25 +0000 David Smith 16393@https://legacy.forums.gravityhelp.com/ <p>You should be able to adjust the field sizes uses the built in Gravity Form field size option per field: <a href="http://grab.by/8pOp" rel="nofollow">http://grab.by/8pOp</a></p> <p>Are you looking for a more specific sizing option? </p> https://legacy.forums.gravityhelp.com/topic/adjusting-contact-info-field-sizes#post-16391 Sun, 16 Jan 2011 20:22:47 +0000 larabbits 16391@https://legacy.forums.gravityhelp.com/ <p>Hi, David.</p> <p>I'm trying to make the text fields smaller...they are too wide across the page and there are no capabilities to adjust this easily as there are for other text boxes. </p> https://legacy.forums.gravityhelp.com/topic/adjusting-contact-info-field-sizes#post-16390 Sun, 16 Jan 2011 19:54:08 +0000 David Smith 16390@https://legacy.forums.gravityhelp.com/ <p>Hi Larabbits, I'm not sure I understand your question? What elements exactly are you trying to make smaller? </p> https://legacy.forums.gravityhelp.com/topic/adjusting-contact-info-field-sizes#post-16383 Sun, 16 Jan 2011 18:44:27 +0000 larabbits 16383@https://legacy.forums.gravityhelp.com/ <p>I am working on this form at a temporary spot:<br /> <a href="http://www.larabbits.org/test/volunteer/volunteer-application/" rel="nofollow">http://www.larabbits.org/test/volunteer/volunteer-application/</a></p> <p>I was told by Kevin Flahaut that in order to adjust contact info field sizes (smaller) I would need to "target the field using CSS inheritance based on it's parent containers."</p> <p>I looked at this page<br /> <a href="http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/" rel="nofollow">http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/</a><br /> but I can't make heads or tails of what I am supposed to do. Since I've already applied the below code into my theme's CSS file, to move the fields further left, is this something I can just add to the below? Sorry - I'm not the best with coding but I do the best I can!</p> <pre><code>/* gravityforms adjusting contact info area */ body .gform_wrapper .left_label li#field_1_1 .gfield_label, body .gform_wrapper .right_label li#field_1_1 .gfield_label, body .gform_wrapper .left_label li#field_1_2 .gfield_label, body .gform_wrapper .right_label li#field_1_2 .gfield_label, body .gform_wrapper .left_label li#field_1_3 .gfield_label, body .gform_wrapper .right_label li#field_1_3 .gfield_label, body .gform_wrapper .left_label li#field_1_4 .gfield_label, body .gform_wrapper .right_label li#field_1_4 .gfield_label, body .gform_wrapper .left_label li#field_1_5 .gfield_label, body .gform_wrapper .right_label li#field_1_5 .gfield_label, body .gform_wrapper .left_label li#field_1_6 .gfield_label, body .gform_wrapper .right_label li#field_1_6 .gfield_label {width:10% }</code></pre>