Making a Compact Form « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

rcgroup
Member

Hi I'm trying to make a compact form that will take up the least amount of space possible.

See my current form: http://www.rcgauto.net/shipping/quote/

I'm having a few issues and your help would be greatly appreciated.

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.

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.

3. Is it possible to make the fields taller, similar to the enhanced drop drop down fields ?

4. My date picker is being distorted, is there a way to find out how to fix the CSS issue.

I'm trying to get my form to look as much as possible as this form http://www.rcgauto.com/shipping/car-shipping-quote/

Posted 12 years ago on Tuesday April 3, 2012 | Permalink
Fred Romano
Member

Try adding some CSS to fix the spacing by removing the label...

label {display: none !important;}

Posted 12 years ago on Tuesday April 3, 2012 | Permalink
rcgroup
Member

Thanks for the reply Fred, that does help, can someone suggest how to deal with the * Required asterisk not showing up ?

Posted 12 years ago on Tuesday April 3, 2012 | Permalink
Rob Harrell
Member
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.

For the inputs to be taller you can use this and change the value to whatever suits your needs:
```
[css]
.gform_wrapper input[type="text"], .gform_wrapper input[type="url"], .gform_wrapper input[type="email"], .gform_wrapper input[type="tel"], .gform_wrapper input[type="number"], .gform_wrapper input[type="password"] {
height: 20px;
}
```
This will help with clelaring the values in the inputs:

http://www.gravityhelp.com/clearing-default-form-field-values-with-jquery/
Posted 12 years ago on Tuesday April 3, 2012 | Permalink
rcgroup
Member

The date picker is there - Est. Ship Date - for some reason the Script doesn't always load, may have to refresh a few times.

Regarding the asterisk, I still haven't figured it out, please advise,

Also any advise regarding populating the fields automatically with text that would disappear after the use clicks on the field

Thanks

Posted 12 years ago on Tuesday April 3, 2012 | Permalink
Kevin Flahaut
Administrator

Documentation - http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

see section 3.7 for how to target the required asterisk properly.

Posted 12 years ago on Tuesday April 3, 2012 | Permalink
rcgroup
Member

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.

**Never mind the asterisk issue has been solved

Thanks

Posted 12 years ago on Tuesday April 3, 2012 | Permalink

This should hide it:

[css]
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_required {display:none;}

Posted 12 years ago on Tuesday April 3, 2012 | Permalink

rcgroup
Member

Two issues still remain

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.

4. My date picker is being distorted, is there a way to find out how to fix the CSS issue.

Also the date picker doesn't always load.

Posted 12 years ago on Tuesday April 3, 2012 | Permalink

Rob Harrell
Member

Up above I posted this for your field label clearing:

http://www.gravityhelp.com/clearing-default-form-field-values-with-jquery/

As far as the date picker formatting, it's inheriting global css selectors via your theme, like this one for example:

[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;
}

I'd recommend using chrome developer tools or firebug for firefox to see what exactly you need to override.

Posted 12 years ago on Tuesday April 3, 2012 | Permalink