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.

Two forms on one page - override styles

  1. Sorry if someone already posted it here before. I couldn't find it.

    I set styles for one form and it works fine. When I add a second form to the same page without any styles it changes the look of my previous form.. So, now I have set styles for both forms. Why does it work like that? Why one form overrides styles of another form?

    Posted 9 years ago on Wednesday May 19, 2010 | Permalink
  2. Would have to see your form page to be able to tell you anything. It could be a variety of issues. If you'd like to post a URL, it would make it a lot easier to help you out.

    Posted 9 years ago on Wednesday May 19, 2010 | Permalink
  3. Ok, this is a development version of the website.

    Here is a link to the page with 2 styled forms in the sidebar (works fine):
    http://tomaldesign.com/production/elitewindowsandsiding.com/?page_id=44

    Now, I added a one form to the center without any styles:
    http://tomaldesign.com/production/elitewindowsandsiding.com/?page_id=40

    Look what happens with my 2 forms from the sidebar. Any idea?

    Posted 9 years ago on Thursday May 20, 2010 | Permalink
  4. Yep, on the first page, you're including the forms in a widget or via the function call and the default Gravity Forms styles aren't being included. On the second page, you've included the form via a shortcode in the post body and Gravity Forms has loaded the appropriate CSS for the form. Now that the forms.css is being loaded from the plugin folder, your sidebar forms are inheriting from the rules in that file.

    For consistency across the forms (in both sidebar and post body) you'll want to enqueue the CSS and scripts manually by putting a script snippet in your functions.php file. You can find that information at the bottom of the documentation page here..

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

    Then, if you want to do a lot of custom styling, this is my recommendation. Go to the wp-content/plugins/gravityforms/css folder and copy the entire contents of the forms.css file. Go to your theme stylesheet and append those styles to the end. Then, go to the Forms settings page and select the option to disable the CSS output. That way, all of your styles are coming directly from your theme stylesheet.

    screenshot

    Now that you've done that, you can tweak and style everything to suit your preferences, across both the forms in the sidebar and post body.

    Posted 9 years ago on Thursday May 20, 2010 | Permalink
  5. I just realized an included .css file and was wondering how can I get rid of it. However, I'll do what you suggested. Thanks!

    Posted 9 years ago on Thursday May 20, 2010 | Permalink
  6. Great. Just be sure to add the enqueue script to your functions file. It's for more than just loading CSS. You're going to need it if you want to use the conditional logic, datepicker, etc. in the sidebar forms.

    Posted 9 years ago on Thursday May 20, 2010 | Permalink