FAQ – Styling & Formatting

How do I increase the height of my form fields (inputs)?

You can do this by targeting the inputs as described in the documentation and either increasing the top/bottom padding

body .gform_wrapper .gform_body .gform_fields .gfield input[type=text],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=number],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=password],
body .gform_wrapper .gform_body .gform_fields .gfield select {
	padding:5px 0;
}

or you can simply define a height value for the fields if you prefer

body .gform_wrapper .gform_body .gform_fields .gfield input[type=text],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=number],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=password],
body .gform_wrapper .gform_body .gform_fields .gfield select {
	height:30px
}

Note: if you add left/right padding to your inputs you will have to redefine the width values (reduce the percentages) of the inputs as well to retain proper formatting.

Is there an easy way to change ALL the input text size?

Sure, that's what global class names are for.. simply apply the new rule to the available input types & form controls like this.

body .gform_wrapper .gform_body .gform_fields .gfield input[type=text],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=number],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=password],
body .gform_wrapper .gform_body .gform_fields .gfield select,
body .gform_wrapper .gform_body .gform_fields .gfield textarea {
	font-size:16px;
}

That should be specific enough to override most theme styles without using the !important declaration. Just put that at the end of your theme stylesheet and you should be good to go.

Why does the word “none” appear next to my form inputs in IE?

We have seen this several times and it has always been related to the usage of the DDBelatedPNG.js script. This script was designed to add transparent PNG image support for IE6. Both IE6 and the DDBelatedPNG script are at the end of life and therefore the script shouldn't be necessary any longer. Removing the script reference from the page solves the issue.

How do I properly target a form element to change the style or layout with CSS?

You can target many of the form elements directly using a unique ID or using CSS inheritance based on a parent elements ID or class name. We've put together a guide with examples in the documentation section here.

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

How do I align my form fields into columns?

Gravity Forms includes several "helper" CSS classes we call CSS Ready Classes. They allow you to easily create column style layouts without having to write custom CSS rules. You can find out more about the Ready Classes in the documentation here.

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

Why is my form showing up with list bullets?

This is usually due to the form inheriting styles from your theme. You can add the following CSS declaration to your theme style sheet and it should remove the bullet styling plus any stray borders that appear on occasion

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;
	border: none !important
}
body .gform_wrapper form .gform_body ul > li:before {
	content: "";
}

updated: April 3, 2012

Why do I have extra space above and below my form?

Usually this happens when you copy the form short code directly from the help page and paste it into the visual editor. Often it pastes the <pre> tags in the markup which then causes the formatting issues.

You can go to the page the form resides on, view the content in the editor using the HTML tab and if you see the <pre></pre> tags around your form shortcode, simply remove them.

Complete information on embedding forms can be found in the documentation at the URL below:

http://www.gravityhelp.com/documentation/embedding-a-form/

Why is there a style attribute of: ‘display:none’ being added & my form isn’t showing up?

This is because you have conditional logic being used on your form. Anytime conditional logic is present the entire form is set to display: none; and then javascript is used to only show the fields that should be shown.

HOWEVER this requires Gravity Forms being able to output the necessary Javascript using the WordPress built in enqueue function... which outputs the Javascript in your footer.

Your theme probably does not have this function call in your theme's footer.php file:

<? php wp_footer(); ?>

This function call, which all themes should have (but many people forget to include), enables plugins to output code in the footer of a theme dynamically. If it isn't present, the theme can't output the necessary code.

This is most likely why your form is not displaying properly.

I’m using the Thesis Theme: Why are my radio buttons and checkboxes misaligned?

The thesis theme applies a blanket width (45%) to ALL inputs. This includes radio buttons and checkboxes. Because of the extra width, the labels alignment is affected. There is also a blanket border and background color property applied to all inputs. This becomes a problem when you want to use an image button.

You should be able to add this to the end of your custom.css file to override the default thesis styles.

ul.gfield_radio li input, 
ul.gfield_checkbox li input {
width:auto!important
}

.gform_footer input[type=image] {
border:none!important; 
border-color:none!important; 
background-color:none!important
}

You can also reference the following topic for further information and updates. http://forum.gravityhelp.com/topic/known-thesis-stylinglayout-issues

please note: These Thesis specific styles and others were added to the default form stylesheet in version 1.3.12. It's recommended that you always update and run the current version of the plugin so this shouldn't be a necessary addition to the most current version.

How are the forms structured?

Gravity Forms are structured using unordered (ul) lists and most elements share reusable class names or unique ID's so that every element can be targeted and manipulated via CSS.

You can refer to the visual guide for more detailed information.

http://www.gravityhelp.com/gravity-forms-css-visual-guide/

My forms styles aren’t being loaded properly.

Most of the time this is due to embedding the form via the php function call directly into the theme files or into a third-party widget. When embedding the form via this method, you also have to manually enqueue the CSS & scripts required for the forms to display and function properly. You can find more information on this topic in the documentation here.

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

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

I’m new to using CSS. Where do I start?

CSS is pretty easy to pick up. It's written in a way that makes sense for even the least-technical people. W3 Schools is a great place to learn the basics. They provide an easy to read format with tons of actual examples to get you started.

http://w3schools.com/css/default.asp

A quick search will turn up several other good sites like this one.

http://www.csstutorial.net/