When using a Gravity Form in a sidebar widget or embedding it anywhere using the function call, you need to manually enqueue the scripts and CSS by placing a short script block in your theme's functions.php file. You only have to do this once and you're theme is set up for all of your forms.
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");
Without this, the conditional logic scripts, datepicker script, form CSS and other elements needed for the full form functionality aren't loaded.
You can find more information at the URL below
Once that's done, your forms should have the proper default formatting. That said, in looking at your theme, I see a few blanket CSS rules that may cause you a problem.
For one, on line 1332 of your style.css file, there is a "display:block" property applied to all label elements. This means it will force all your labels to be on a line by themselves, which you're already seeing inherited in the current form. You'll need to override that rule, or remove it from your stylesheet or it will cause formatting problems.
Any time a theme uses very general, blanket CSS rules for form styles, it's bad juju. Most often, your form will inherit from these and cause you grief. I see this a lot. I think it's just poor theme building.
Posted 9 years ago on Thursday December 2, 2010 | Permalink