Why aren』t my form styles being loaded properly?Why is my form showing up with list bullets?How do I align my form fields into columns?Why does the word 「none」 appear next to my form inputs in IE?
Why aren』t my form styles 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 and scripts required for the forms to display and function properly.
You can find more information on this topic in the documentation here:
Embedding a Form
gravity_form_enqueue_scripts
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 stylesheet 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: "";
}
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 these classes in the CSS Ready Classes article.
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.