Vertical Space & background « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

dsaunderswa
Member

No "state" drop-down showing when using the "Advanced Fields" Address function; HOWEVER, the drop-down for "state" works fine when using Standard Fields.

The problem now is two-fold:
-- the vertical spacing looks terrible. What can I do to fix that?
-- the form is white on a white background and the boxes around each field are not showing up. What can I do to make the form more visible? a border around the form? a background for the form?

Here's the url where the form can be found: http://184.172.172.19/~manda1a/coaching/free-consultation/

Thank you!

Posted 13 years ago on Saturday March 3, 2012 | Permalink
Rob Harrell
Member
Your drop down piece looks to be theme related. You have a jquery.custom.js file that has some form function styling in there.
```
//FORM REPLACEMENT
	$("#content form").jqTransform();
```
Also, you are using the left label placement, but a lot of your labels are very long, which is causing them to shrink up. You could try to make a new page template in your theme that is full width, rather than a fixed width (one that has no sidebar). But it seems as though all of your styling issues are theme related.

You can always preview the form and/or apply the default WP theme to compare. Are these changes something you are comfortable doing on your own?
Posted 13 years ago on Saturday March 3, 2012 | Permalink
dsaunderswa
Member

Thank you for your quick response, Rob.

It was easy to change the page template to full width rather than the page with sidebar. I was able to do this without changing any code because of the options available in the theme. It looks MUCH better. See the improvement? http://184.172.172.19/~manda1a/coaching/free-consultation/

I'd still like a little more vertical space between each. Would that be hard for me to do?

And, is there a way to make the form clearer . . . like with colored borders and/or background color

Posted 13 years ago on Saturday March 3, 2012 | Permalink

OK, think this should work for you, try placing all of this into your theme's stylesheet:

[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"], .gform_wrapper textarea {
clear: none !important;
background: #CCC !important;
float: none !important;
padding: 5px 10px !important;
}
body .gform_wrapper form .gform_body ul, body .gform_wrapper form .gform_body ul li {
list-style: none!important;
list-style: none!important;
background: none!important;
background: none!important;
padding: 0!important;
margin: 0 0 20px 0!important;
}
.gform_wrapper div.jqTransformSelectWrapper {
clear: none !important;
margin-bottom: 20px;
}

The background color value you can obvously feel free to change to whatever hex color you are looking for, you can also add a border to that selector as well and anything else style-wise you feel you'd like to do.

Posted 13 years ago on Sunday March 4, 2012 | Permalink

dsaunderswa
Member

Thank you Rob. The form does look different now. But it looks like the color CCC (which I thought was blue?) is showing up grey. The comment boxes are filled grey.

I was hoping to leave the comment boxes white . . . maybe have borders around them AND even a border around the whole form . . . and if I could apply a background for the form itself that would be great. I'm just trying to figure out what to do to make the form seen. Here's where the old website form is located (see how it looks): http://mandalahealingarts.com/freeconsultation.htm

And, here's the new one again: http://184.172.172.19/~manda1a/coaching/free-consultation/

If I can get these Gravity Forms to look pleasing aesthetically, I will be using them on a LOT of websites!

Thanks again for the help.

Posted 13 years ago on Monday March 5, 2012 | Permalink
Rob Harrell
Member

#ccc is grey. You can google hex values and find the colors you want to use. In this case you can change it to #fff for white. You can add a border to the inputs in that first declaration above to be whatever you'd like. All of what you said is do-able via css - you just have to have some comfort and knowledge in using and writing CSS. You can also use Chrome Developer Tools or Firebug for Firefox to find selectors and code to target via css and also see what that element is currently using.

Posted 13 years ago on Monday March 5, 2012 | Permalink
dsaunderswa
Member

Got it. Thanks. I played around with how I want it to look. And will make the changes shortly.

The Chrome Developer tools are great. Thanks for the tip ;D

Posted 13 years ago on Wednesday March 7, 2012 | Permalink