Is there a way to have multiple forms running on a single website that have different styling? For instance, a regular contact form on one page and then a compact sidebar form on another.
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.
Different Styles for Different Pages
-
Yes, you can add multiple forms to a page, and each form has a unique ID that can be targeted for styling with CSS. In the example below, I have two forms, IDs gform_8 and gform_9. Using CSS inheritance, you can style elements like the form title differently.
form#gform_8 .gform_heading h3.gform_title { color:green } form#gform_9 .gform_heading h3.gform_title { color:blue }Posted 15 years ago on Friday November 20, 2009 | Permalink -
Yes, the forms are all created and administered in the form plugin editor. No, currently, there isn't a way to edit the forms CSS directly in the editor. Here's the best way to handle CSS changes.
First, go to the Gravity Forms settings page and disable the default CSS output.
Then, you'll need to go to the wp-content/plugins/gravityforms/css/ folder and copy the contents of the forms.css file to the style.css (or default theme style sheet) file in your theme folder.
Copying the default styles to your theme style sheet is recommended instead of editing the default form.css, file as it will be overwritten whenever you update gravity forms.
Once you've copied the CSS, you can then modify the styles to your liking using CSS inheritance based on the form ID as in the previous example.
Posted 15 years ago on Friday November 20, 2009 | Permalink -
Well, this did not go well. I may have misunderstood. When I copied the form.css to the style.css is completely replaced the stlyle.css folder with the forms.css. bad move! Now that I have my stylesheet back and have changed back all the customization that was done to it I am back to where I was before. Did I misunderstand?
Posted 15 years ago on Saturday November 21, 2009 | Permalink -
Yes, I guess something was lost in the translation. I meant to copy the content from the forms.css file and paste it into the style.css file below your other styles. We just want to append the theme style sheet, not replace it totally.
If you want to keep the form styles completely separate. You can just copy the forms.css file to your theme folder (I would rename it to avoid confustion - something like myforms.css) and reference it there by adding the following inside the <head > tags in your theme header file.
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/myforms.css" type="text/css" media="screen" charset="utf-8" />then, you can edit the myforms.css file to suit your needs.
Posted 15 years ago on Saturday November 21, 2009 | Permalink -
You're looking for the "option" element. You'll find that cross browser support for styling the select (drop down) form element and options is very limited. A google search will probably point you in the right direction.
Since there's very little you can do with select boxes, there are a lot of script-based solutions to provide enhanced styling. Most dynamically replace the actual select/options elements with a list that can be styled.
Here's one good example http://www.brainfault.com/jquery-plugins/jquery-selectbox-replacement
It requires a little more effort, but it depends on how important styling the select/options is to you.
Posted 14 years ago on Wednesday January 13, 2010 | Permalink
