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.

Forms are unstyled

  1. I do have the "output css" radio button checked and yet Gravity Forms seems to not be outputting the css. Not sure why this is happening...

    http://aforsay.org/wp/join-us/membership-form/

    Posted 13 years ago on Friday April 15, 2011 | Permalink
  2. Check your theme to make sure the header.php file has the wp_head() function and the footer.php file has the wp_footer() function call. Both of these are necessary to load the Gravity Forms CSS & JavaScript.

    http://codex.wordpress.org/Function_Reference/wp_head
    http://codex.wordpress.org/Function_Reference/wp_footer

    Posted 13 years ago on Friday April 15, 2011 | Permalink
  3. A step in the right direction since adding wp_head to my header (hangs head in shame), but the fields are still not defined. Are the fields and text areas up to me to style? No problem, just unsure.

    http://aforsay.org/wp/join-us/membership-form/

    Posted 13 years ago on Friday April 15, 2011 | Permalink
  4. The issue is styles coming from a jQuery plugin on your site. It is setting EVERYTHING to have border: none; and this is getting applied to all input elements on your form which is why they do not have a border.

    It's coming from the Sliding Boxes and Captions jQuery Plugin that must be part of your theme. Here is the CSS it is outputting:

    http://grab.by/9TkA

    You will see it's applying a global border; none; to the * element which means EVERYTHING. So the way CSS inheritance works, it's automatically applying border: none; to all the form inputs.

    You need to remove that border: none; element.

    Posted 13 years ago on Friday April 15, 2011 | Permalink
  5. Wow awesome support here! I got rid of the universal selector and voila, there is the styling. Can you share with me how you were able to determine it was that mosaic plugin (css).

    Thanks Kevin and Carl!

    Posted 13 years ago on Friday April 15, 2011 | Permalink
  6. I used the Firebug add-on for FireFox to inspect the HTML/CSS and saw what styles were being applied by which CSS stylesheet on your site to narrow down which one was causing the issue.

    Posted 13 years ago on Friday April 15, 2011 | Permalink