Theme CSS Changes Form Styling

The Gravity Forms styles and scripts aren't being loaded properly in this theme. You'll need to make sure the header file includes the wp_head() function and the footer includes the wp_footer() - both are necessary for Gravity Forms to display and work properly.

You can find out more about those functions here..

http://codex.wordpress.org/Theme_Development

Once the scripts and CSS are loaded properly, everything should be back to normal.

Travis,

Check the form settings page to make sure the "output CSS" option is still set to yes. That could be the problem with the form styles not being included.

screenshot

Also, I noticed you've tried including the style sheet manually in your markup, but the path is wrong..

you have

<link rel="stylesheet" href="http://certispect.com/wp-content/themes/Builder/wp-content/plugins/gravityforms/cssforms.css" type="text/css" media="screen" />

but it's "css/forms.css" and not "cssforms.css"

you shouldn't have to load the styles manually though. It's preferred to let the plugin do it for you because it only loads them on pages that have forms and not everywhere which is better for performance, page loads, etc.

Let me know about the settings and if that's not it, maybe you can send us an admin login to your site via our contact form and we can dig further.

Scott,

The form is inheriting two properties from the theme stylesheet that are causing problems. It's floating all divs in the content area to the left, and applying a display property of inline as well. This is what's throwing off the formatting of the form.

You can try appending this to the bottom of your theme style sheet and it should work for you. This also removes the default list background images from the form as well.

.gform_body, .ginput_container {float:none!important; display:block!important}
.gform_wrapper li, .gform_wrapper form li, .gform_wrapper form ul li { list-style-type:none!important; background-image:none!important}

It worked okay in my test. You may want to tweak some from there, but it should get you started.

test screenshot

Travis, please send your access info, along with the form page URL via our contact form and we'll be happy to look at it further.

Travis, the forms are working normally now.

When you add forms via the function call in the page template, or in the sidebar using a widget, etc, you have to manually add some script to your functions file to enqueue the necessary scripts and styles for the forms. This is done automatically for you when you add a form using the shortcode in the post editor.

I added this to your functions.php file

// enqueue the scripts and styles needed for Gravity Forms placed outside the loop

wp_enqueue_script("gforms_ui_datepicker", WP_PLUGIN_URL . "/gravityforms/js/jquery-ui/ui.datepicker.js", array("jquery"), "1.3.9", true);

wp_enqueue_script("gforms_datepicker", WP_PLUGIN_URL . "/gravityforms/js/datepicker.js", array("gforms_ui_datepicker"), "1.3.9", true);

wp_enqueue_script("gforms_conditional_logic_lib", WP_PLUGIN_URL . "/gravityforms/js/conditional_logic.js", array("gforms_ui_datepicker"), "1.3.9", true);

wp_enqueue_style("gforms_css", WP_PLUGIN_URL . "/gravityforms/css/forms.css");

Now, the CSS and scripts are loaded on any page that has a form and they won't load on pages that don't.

I removed the hard-coded css reference (the path was still off btw) from the header.php file as it's not needed.

If you want to tweak the styles, remember to put your custom CSS in with your theme styles and not to directly modify the forms.css file in the plugin folder. That file is replaced during the update process and if you make changes there, you may lose them when updating.