https://legacy.forums.gravityhelp.com/topic/creating-verticle-form-in-widget-with-error-message Gravity Support Forums Topic: Creating vertical form in widget with error message. en-US Mon, 20 Apr 2026 03:25:23 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/creating-verticle-form-in-widget-with-error-message#post-50144 Tue, 21 Feb 2012 18:27:42 +0000 carnavat 50144@https://legacy.forums.gravityhelp.com/ <p>Im still having the issue. the site is <a href="http://www.peakgymstl.com" rel="nofollow">http://www.peakgymstl.com</a>. I have it locked since its in development.... Something just isnt matching up with the error css. Im losing or gaining some padding I think, and its causes the fields the were to the right of the labels to go under the labels and the labels wrap if they are two words...<br /> This is the design Im working on if you want to see what look Im trying to achieve. - <a href="http://www.studioc5.com/clients/pp/after2.html" rel="nofollow">http://www.studioc5.com/clients/pp/after2.html</a></p> <p>#gform_wrapper_1 ul.right_label li { margin-bottom:0px; width:100px;}</p> <p>#gform_wrapper_1 ul.right_label li, #gform_wrapper_1 form ul.right_label li, #gform_wrapper_1 ul.left_label li, #gform_wrapper_1 form ul.left_label li, #gform_wrapper_1 li, #gform_wrapper_1 form li { margin-bottom:1px; height:28px;}<br /> #gform_wrapper_1 input[type="text"], #gform_wrapper_1 input[type="url"], #gform_wrapper_1 input[type="email"], #gform_wrapper_1 input[type="phone"], #gform_wrapper_1 input[type="number"], #gform_wrapper_1 input[type="password"] {<br /> padding: 5px 0px 5px 5px !important;<br /> margin: 0px;<br /> border-radius: 0px;<br /> border: none;<br /> width: 110px;<br /> }<br /> #gform_wrapper_1 form { background: url("images/7-Day-Free-Peak-Pass-Background.png") repeat; border-radius: 0px 0px 10px 10px; width:223px; padding:8px 5px 3px 10px}<br /> #gform_wrapper_1 .gform_footer.right_label, #gform_wrapper_1 .gform_footer.left_label { padding:0px 0px 5px 85px; margin-top:-5px; }<br /> #gform_wrapper_1 .left_label .gfield_label { width:33%; text-align:right; color:#FFFFFF; }<br /> body .gform_wrapper .gform_body .gform_fields #field_1_6.gfield .gfield_label { width:79%; text-align:left; font-size:10px; line-height:15px;}</p> <p>#gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container { height:10px; line-height:10px;}</p> <p>#gform_wrapper_1 .validation_message, #gform_wrapper_1 .validation_error {<br /> display: none;<br /> }<br /> .gform_wrapper .gfield_required {<br /> color: white !important;<br /> }<br /> #gform_wrapper_1 li.gfield.gfield_error, .gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {<br /> background: none;<br /> border: none;<br /> margin: 0 !important;<br /> }<br /> .gform_validation_error #gform_1 {<br /> padding-top: 0;<br /> }<br /> li.gfield_error input[type="text"], li.gfield_error input[type="url"], li.gfield_error input[type="email"], li.gfield_error input[type="tel"], li.gfield_error input[type="number"], li.gfield_error input[type="number"], li.gfield_error input[type="password"] {<br /> background-color: #FD7575;<br /> }<br /> #gform_wrapper_1 li.gfield.gfield_error.gfield_contains_required label.gfield_label, #gform_wrapper_1 li.gfield.gfield_error.gfield_contains_required div.ginput_container {</p> <p>}<br /> #gform_wrapper_1 .gfield_html.gfield_no_follows_desc{ margin:0px 20px 10px 0px; color:#FFFFFF; float:right; font-size:11px; height:15px; padding:0px; }<br /> .header-top { float:right; height:35px; } </p> https://legacy.forums.gravityhelp.com/topic/creating-verticle-form-in-widget-with-error-message#post-50042 Mon, 20 Feb 2012 19:31:17 +0000 carnavat 50042@https://legacy.forums.gravityhelp.com/ <p>Im having a problem with this css in chrome. When viewing the form in error mode- the form looks fine in firefox but in chrome the fields go under the lables instead of to the right of the lables. If I remove that 32% from the css above, the fields go back to the right but the width of the lables is now shrunk, causing the words like first name to wrap to two lines... </p> https://legacy.forums.gravityhelp.com/topic/creating-verticle-form-in-widget-with-error-message#post-47419 Thu, 26 Jan 2012 08:47:33 +0000 Rob Harrell 47419@https://legacy.forums.gravityhelp.com/ <p>Try this out.</p> <pre><code>[css] #gform_wrapper_1 .validation_message, #gform_wrapper_1 .validation_error { display: none; } .gform_wrapper .gfield_required { color: white !important; } #gform_wrapper_1 li.gfield.gfield_error, .gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning { background: none; border: none; margin: 0 !important; } .gform_validation_error #gform_1 { padding-top: 0; } li.gfield_error input[type=&quot;text&quot;], li.gfield_error input[type=&quot;url&quot;], li.gfield_error input[type=&quot;email&quot;], li.gfield_error input[type=&quot;tel&quot;], li.gfield_error input[type=&quot;number&quot;], li.gfield_error input[type=&quot;number&quot;], li.gfield_error input[type=&quot;password&quot;] { background-color: #FD7575; }</code></pre> <p>Get rid of this declaration and I also noticed in some of your input type declarations you have "phone" instead of "tel":</p> <pre><code>[css] #gform_wrapper_1 li.gfield.gfield_error.gfield_contains_required label.gfield_label, #gform_wrapper_1 li.gfield.gfield_error.gfield_contains_required div.ginput_container { width: 32%; }</code></pre> https://legacy.forums.gravityhelp.com/topic/creating-verticle-form-in-widget-with-error-message#post-47400 Wed, 25 Jan 2012 23:57:49 +0000 carnavat 47400@https://legacy.forums.gravityhelp.com/ <p>How do I hide the error messages? </p> https://legacy.forums.gravityhelp.com/topic/creating-verticle-form-in-widget-with-error-message#post-47398 Wed, 25 Jan 2012 22:24:34 +0000 Rob Harrell 47398@https://legacy.forums.gravityhelp.com/ <p>Well, your space is severely limited with what you've got going on. First things first, I'd hide all of the error messages and then maybe change the input background color to a light reddish color to signify it needs to be filled out. Then you won't have to worry about the extra spacing for extra verbiage. </p> https://legacy.forums.gravityhelp.com/topic/creating-verticle-form-in-widget-with-error-message#post-47395 Wed, 25 Jan 2012 22:07:50 +0000 carnavat 47395@https://legacy.forums.gravityhelp.com/ <p>Im unsure what to do for the error message styling. If you click submit without the proper fields filled in the error messages display and the form expands down the page and everything overlaps. Its a mess. Can I also change the color of the red asterisk for the required fields? </p> https://legacy.forums.gravityhelp.com/topic/creating-verticle-form-in-widget-with-error-message#post-47393 Wed, 25 Jan 2012 22:01:25 +0000 Rob Harrell 47393@https://legacy.forums.gravityhelp.com/ <p>Drop this in place of the style you have for this selector (I just changed the padding, by adding the 5px !important because you have a 10px !important on just the regular input element):</p> <pre><code>[css] #gform_wrapper_1 input[type=&quot;text&quot;], #gform_wrapper_1 input[type=&quot;url&quot;], #gform_wrapper_1 input[type=&quot;email&quot;], #gform_wrapper_1 input[type=&quot;phone&quot;], #gform_wrapper_1 input[type=&quot;number&quot;], #gform_wrapper_1 input[type=&quot;password&quot;] { padding: 5px !important; margin: 0px; border-radius: 0px; border: none; width: 110px; }</code></pre> https://legacy.forums.gravityhelp.com/topic/creating-verticle-form-in-widget-with-error-message#post-47392 Wed, 25 Jan 2012 21:54:47 +0000 carnavat 47392@https://legacy.forums.gravityhelp.com/ <p><a href="http://www.peakgymstl.com" rel="nofollow">http://www.peakgymstl.com</a> </p> https://legacy.forums.gravityhelp.com/topic/creating-verticle-form-in-widget-with-error-message#post-47391 Wed, 25 Jan 2012 21:33:26 +0000 Rob Harrell 47391@https://legacy.forums.gravityhelp.com/ <p>I'm gonna edit out your login credentials of the previous post - I didn't see a URL here though. Can you email me the site URL and the login creds to <a href="mailto:rob@rocketgenius.com">rob@rocketgenius.com</a> </p> https://legacy.forums.gravityhelp.com/topic/creating-verticle-form-in-widget-with-error-message#post-47390 Wed, 25 Jan 2012 21:01:21 +0000 carnavat 47390@https://legacy.forums.gravityhelp.com/ <p>I have the site locked since its in production. You can log in with<br /> username **** password *******<br /> Then you can see the home page.<br /> Thanks. </p>