Form items have bullets, custom button is enlarged and has gaps

Gravity Support Forums » Plugin Support » Gravity Forms

BrettBorders77
Member

Now that GF is working on my site, I need to style the form into a professional and presentable contact form.

Here is a picture of the form it is generating:

https://skitch.com/brettborders/fjeu8/copybrighter.com-contact

Questions:

1.) How do I remove the bullets? (I'm running Thesis 1.8.2 - latest)

2.) How do I add a little bit of padding space between form elements? (They are "smushed" together.)

3.) I have uploaded a small, exact-sized custom button I made in Photoshop and designed it in the "Advanced" options for the form. Gravity Forms enlages the button beyond actual size and puts an ugly grey border around it. How can I make it display actual size, no border?

Thanks!

Posted 12 years ago on Monday July 11, 2011 | Permalink
Kevin Flahaut
Administrator
Info on how to remove the bullets is here:

http://www.gravityhelp.com/frequently-asked-questions/

Info and samples on how to target and manipulate all the form elements with CSS can be found here:

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

The button image that you've uploaded is being ganked up by the Thesis theme styles, not Gravity Forms. They've set a blanket style for all inputs there so you'll need to override that with something like this added to the end of your theme stylesheet.
```
[css]
body .gform_wrapper .gform_footer input[type=image] {
width:auto!important;
border:none!important
}
```
Posted 12 years ago on Monday July 11, 2011 | Permalink
BrettBorders77
Member

Thanks a lot. this advice helps somewhat.

The only outstanding, unresolved issue is the ugly grey "moat" or border space around my custom submit button.

How do I remove it so it looks white, smooth and seamless?

you can see the form here: http://copybrighter.com/contact

Posted 12 years ago on Monday July 11, 2011 | Permalink
BrettBorders77
Member

Also.. I see a long, consfusing list of CSS styles in the CSS targeting example... but I just want to but a little bit of space around each element. What is the specific style to add space around each of the Name: e-mail: type fields?

Posted 12 years ago on Monday July 11, 2011 | Permalink
Kevin Flahaut
Administrator
I can't tell you anything more specific without seeing your actual form page. The screenshot doesn't help me inspect any styles that are influencing the look of your form.

On the button, it's probably just a background image property and padding still being applied so you just have to override that as well.
```
[css]
body .gform_wrapper .gform_footer input[type=image] {
width:auto!important;
border:none!important;
background:none!important;
padding:none!important
}
```
Here's a guide to show you how the forms are laid out.. they'll help you understand what elements you need to target to change the spacing you're interested in

http://www.gravityhelp.com/resources/cssguide/css_guide.html

If you want to increase spacing, then you can do that by adding top and bottom margins or padding to a variety of elements.. the containing list items, the containing div element or even to the inputs themselves and as I mentioned before, you can find specific examples on the targeting page in the documentation for each element. If you use those and apply the properties correctly, you should be good to go.
Posted 12 years ago on Monday July 11, 2011 | Permalink
BrettBorders77
Member

here's my site:

http://copybrighter.com/contact

The code you provided above does not remove the spacing around the custom button.

The box model guice you sent me was very comprehensive, but my CSS sucks. What would the code be to add about .5em of vertical space between the Name: E-mail: Phone: and Comments: form elements?

Thanks for any specific examples you can provide. And thanks for the help.. I know software support is not an easy job.

Posted 12 years ago on Tuesday July 12, 2011 | Permalink

The CSS snippet I provided above does work if implemented correctly. You don't need to add the ".custom" class name before the body tag. The body element isn't a child of the custom div (it's actually the parent of the div) so the styles aren't being applied as you expected. If you take the "custom" off the front of the rule, you'll see that it works fine.

So, that said, I would remove the Gravity Forms specific styles you have in there now and start fresh with the ones below. They should work just fine for you. You can see my test screenshot below.

[css]
/* hide the bullets and fix the margins & padding */

body .gform_wrapper form .gform_body ul,
body .gform_wrapper form .gform_body ul li {
	list-style-type:none!important;
	list-style-image:none!important;
	list-style:none!important;
	background-image:none!important;
	background:none!important;
	padding:0!important;
	margin:0!important
}

/* add some new margins to the labels to fix spacing */

body .gform_wrapper label.gfield_label {
    display: block;
    margin-top: .5em
}

/* remove the borders, padding & backgrounds from the button image */

body .gform_wrapper .gform_footer input[type=image] {
	width:auto!important;
	border:none!important;
	background:none!important;
	padding:none!important
}

screenshot: http://bit.ly/oMhNNB

Posted 12 years ago on Tuesday July 12, 2011 | Permalink