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.

Selecting Pre-defined CSS Styles

  1. Something similar to what cforms II has, being able to select pre-defined CSS styles and see how the form would look like, members could also contribute all kinds of CS styles and then anybody could use those styles in their own GF forms. I think this would be a great addition.

    Posted 13 years ago on Tuesday April 26, 2011 | Permalink
  2. We're considering doing some kind of Styling/Formatting add-on with some pre-defined CSS themes. There are some complexities we would have to work out, but it's something we want to look at in the near future.

    Posted 13 years ago on Tuesday April 26, 2011 | Permalink
  3. This would be a very good idea. I was surprised it was not already in GF.

    Posted 13 years ago on Wednesday April 27, 2011 | Permalink
  4. "This would be a very good idea. I was surprised it was not already in GF."

    That makes two of us. I bought expecting at least some sort of built in functionality for styling forms. I don't even know CSS :(

    Posted 13 years ago on Thursday May 12, 2011 | Permalink
  5. A few quick notes

    We offer a full working demo of the plugin so there's really no reason to be surprised about what is or isn't part of the functionality. We like our customers to be informed and have several avenues to answer questions pre-sale including a "pre-sale questions" forum here as well as answering questions via twitter, email, etc.

    CSS is very easy to learn and to help out we also provide documentation and actual CSS samples of how to properly target and manipulate all of the form elements. We also created a visual guide/map to help you understand how the forms are structured and how the elements work together.

    http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples
    http://rkt.gs/cssguide

    Beyond that, we're here on the forums every day answering layout/styling related questions. You're always welcome to join in the conversations.

    As I mentioned above, we do want to add some kind of theming/styling capabilities but there are some difficulties that present themselves because of the way the forms are rendered inline with the other markup. Other hosted form services like Wufoo or Formspring do this pretty easily, but they only allow you to iframe (embed another page in a hidden window) the content into another site so their form markup isn't influenced by the parent page's CSS rules.

    Gravity Forms was built to be embedded and rendered inline with the actual page markup and was intentionally designed to inherit many of the properties of the parent page. That way, the majority of the time, the forms look good and blends in with just about any theme right out of the box.

    While that's a plus on some accounts, it makes trying to add pre-defined styles or themes to the forms more difficult. Any pre-defined form styles can easily be overridden by the theme CSS so we're back to square one. It's very difficult to try and "bullet-proof" the form styles and guarantee they'll always work the same when the forms are used with literally thousands of custom WordPress themes.

    So, we've got a challenge ahead to add this kind of functionality but if you're going to be spending any real customizing WordPress themes, you'll most likely benefit from learning at least some basic CSS or will probably want to find a good front-end developer to assist you with the customizations.

    Here's a good place to get the CSS basics if you're interested.

    http://www.w3schools.com/css/default.asp

    Posted 13 years ago on Friday May 13, 2011 | Permalink
  6. Just adding to what you've said, I had no idea of using CSS and was a little scared about it all, but it's surprisingly easy to pick up and there aren't too many things to remember.

    Those things you do use are pretty straight-forward, for example, you want to bring in the left margin by 10 pixels, you use the command:

    margin-left: 10px;

    Posted 13 years ago on Wednesday May 18, 2011 | Permalink