PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Within sidebar text widget, form improperly formatted.

  1. Nat
    Member

    Hi,

    I'm using a text widget to place my form into a sidebar. However, the bullets are not aligned with the corresponding text description. This also appears to be the case when using the GF widget. I confirm I am outputting the css in form settings. I'm using Suffusion theme in Wordpress 3.0.2. I'm adding the css code to the bottom of the Suffusion stylesheet.css. I have tried to piece together a solution from the posts on this topic, but can't seem to string together a final css code that works.

    Please see:

    http://acnemarketwatch.com/wordpress/get-started/

    As an aside, I have no understanding of css at all, but am very keen to learn to I can do this kind of stuff on my own. Any good beginners guides you could recommend, so I can take full advantage of GF?

    Lastly, any word on the MailChimp add-on that can be bought as a stand-alone package for a one-off fee (I only have the single licence for Gravity Forms).

    Thanks in advance,

    Nate

    Posted 13 years ago on Thursday December 2, 2010 | Permalink
  2. 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

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

    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 13 years ago on Thursday December 2, 2010 | Permalink

This topic has been resolved and has been closed to new replies.