https://legacy.forums.gravityhelp.com/topic/making-a-compact-form Gravity Support Forums Topic: Making a Compact Form en-US Sat, 04 Apr 2026 12:18:32 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/making-a-compact-form#post-54151 Tue, 03 Apr 2012 16:44:14 +0000 Rob Harrell 54151@https://legacy.forums.gravityhelp.com/ <p>Up above I posted this for your field label clearing:</p> <p><a href="http://www.gravityhelp.com/clearing-default-form-field-values-with-jquery/" rel="nofollow">http://www.gravityhelp.com/clearing-default-form-field-values-with-jquery/</a></p> <p>As far as the date picker formatting, it's inheriting global css selectors via your theme, like this one for example:</p> <pre><code>[css] select, .ajax_form .select, .entry-content select, .mobileMenu { width: 41.5%; min-width: 116px; -webkit-appearance: none; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAANCAYAAAC+ct6XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjBBRUQ1QTQ1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjBBRUQ1QTU1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMEFFRDVBMjVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMEFFRDVBMzVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk5mU4QAAACUSURBVHjaYmRgYJD6////MwY6AyaGAQIspCieM2cOjKkIxCFA3A0TSElJoZ3FUCANxAeAWA6IOYG4iR5BjWwpCDQCcSnNgxoIVJCDFwnwA/FHWlp8EIpHSKoGgiggLkITewrEcbQO6mVAbAbE+VD+a3IsJTc7FQAxDxD7AbEzEF+jR1DDywtoCr9DbhwzDlRZDRBgACYqHJO9bkklAAAAAElFTkSuQmCC); background-position: center right; background-repeat: no-repeat; }</code></pre> <p>I'd recommend using chrome developer tools or firebug for firefox to see what exactly you need to override. </p> https://legacy.forums.gravityhelp.com/topic/making-a-compact-form#post-54137 Tue, 03 Apr 2012 15:54:25 +0000 rcgroup 54137@https://legacy.forums.gravityhelp.com/ <p>Two issues still remain </p> <p>1. In an effort to avoid Field Labels is it possible to populate to the form with the values that will disappear when I click on the field.</p> <p>4. My date picker is being distorted, is there a way to find out how to fix the CSS issue.</p> <p>Also the date picker doesn't always load. </p> https://legacy.forums.gravityhelp.com/topic/making-a-compact-form#post-54135 Tue, 03 Apr 2012 15:50:46 +0000 Rob Harrell 54135@https://legacy.forums.gravityhelp.com/ <p>This should hide it:</p> <pre><code>[css] body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_required {display:none;}</code></pre> https://legacy.forums.gravityhelp.com/topic/making-a-compact-form#post-54131 Tue, 03 Apr 2012 15:42:04 +0000 rcgroup 54131@https://legacy.forums.gravityhelp.com/ <p>What would I need to do I want to remove the Asterisk, but still have the field be required. Right now the asterisk show up and on top and ruins the alignment.</p> <p>**Never mind the asterisk issue has been solved</p> <p>Thanks </p> https://legacy.forums.gravityhelp.com/topic/making-a-compact-form#post-54127 Tue, 03 Apr 2012 15:38:32 +0000 Kevin Flahaut 54127@https://legacy.forums.gravityhelp.com/ <p>Documentation - <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>see section 3.7 for how to target the required asterisk properly. </p> https://legacy.forums.gravityhelp.com/topic/making-a-compact-form#post-54124 Tue, 03 Apr 2012 15:33:38 +0000 rcgroup 54124@https://legacy.forums.gravityhelp.com/ <p>The date picker is there - Est. Ship Date - for some reason the Script doesn't always load, may have to refresh a few times. </p> <p>Regarding the asterisk, I still haven't figured it out, please advise, </p> <p>Also any advise regarding populating the fields automatically with text that would disappear after the use clicks on the field </p> <p>Thanks </p> https://legacy.forums.gravityhelp.com/topic/making-a-compact-form#post-54089 Tue, 03 Apr 2012 14:50:12 +0000 Rob Harrell 54089@https://legacy.forums.gravityhelp.com/ <p>It looks like you have asterisks showing currently, did you figure that one out? I also don't see a datepicker anywhere to help you out there.</p> <p>For the inputs to be taller you can use this and change the value to whatever suits your needs:</p> <pre><code>[css] .gform_wrapper input[type=&quot;text&quot;], .gform_wrapper input[type=&quot;url&quot;], .gform_wrapper input[type=&quot;email&quot;], .gform_wrapper input[type=&quot;tel&quot;], .gform_wrapper input[type=&quot;number&quot;], .gform_wrapper input[type=&quot;password&quot;] { height: 20px; }</code></pre> <p>This will help with clelaring the values in the inputs:</p> <p><a href="http://www.gravityhelp.com/clearing-default-form-field-values-with-jquery/" rel="nofollow">http://www.gravityhelp.com/clearing-default-form-field-values-with-jquery/</a> </p> https://legacy.forums.gravityhelp.com/topic/making-a-compact-form#post-54083 Tue, 03 Apr 2012 14:01:09 +0000 rcgroup 54083@https://legacy.forums.gravityhelp.com/ <p>Thanks for the reply Fred, that does help, can someone suggest how to deal with the * Required asterisk not showing up ? </p> https://legacy.forums.gravityhelp.com/topic/making-a-compact-form#post-54081 Tue, 03 Apr 2012 13:53:16 +0000 Fred Romano 54081@https://legacy.forums.gravityhelp.com/ <p>Try adding some CSS to fix the spacing by removing the label...</p> <p>label {display: none !important;} </p> https://legacy.forums.gravityhelp.com/topic/making-a-compact-form#post-54079 Tue, 03 Apr 2012 13:16:36 +0000 rcgroup 54079@https://legacy.forums.gravityhelp.com/ <p>Hi I'm trying to make a compact form that will take up the least amount of space possible. </p> <p>See my current form: <a href="http://www.rcgauto.net/shipping/quote/" rel="nofollow">http://www.rcgauto.net/shipping/quote/</a></p> <p>I'm having a few issues and your help would be greatly appreciated. </p> <p>1. In an effort to avoid Field Labels is it possible to populate to the form with the values that will disappear when I click on the field. </p> <p>2. If I force a field to be required, a red star appears next the Field Label, is it possible to have the red star not appear at all but still have field be required. The goal is to minimize the space between lines. </p> <p>3. Is it possible to make the fields taller, similar to the enhanced drop drop down fields ? </p> <p>4. My date picker is being distorted, is there a way to find out how to fix the CSS issue. </p> <p>I'm trying to get my form to look as much as possible as this form <a href="http://www.rcgauto.com/shipping/car-shipping-quote/" rel="nofollow">http://www.rcgauto.com/shipping/car-shipping-quote/</a> </p>