Your default form CSS isn't being loaded. That's why you're seeing the weird layout.
Go to your form settings and make sure the "output css" option is set to "yes". If so, how are you embedding the form? Are you using the shortcode in the page content or are you using the php function call to embed the form somewhere else?
When using a Gravity Form in a sidebar widget or embedding it anywhere using the php function call, you need to manually enqueue the scripts and CSS by placing a short script block in your theme's functions.php file.
wp_enqueue_script("gforms_ui_datepicker", WP_PLUGIN_URL . "/gravityforms/js/jquery-ui/ui.datepicker.js", array("jquery"), "1.4", true);
wp_enqueue_script("gforms_datepicker", WP_PLUGIN_URL . "/gravityforms/js/datepicker.js", array("gforms_ui_datepicker"), "1.4", true);
wp_enqueue_script("gforms_conditional_logic_lib", WP_PLUGIN_URL . "/gravityforms/js/conditional_logic.js", array("gforms_ui_datepicker"), "1.4", 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
Posted 8 years ago on Wednesday April 13, 2011 | Permalink