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.

Styling Forms

  1. I'm really new to CSS, but found your examples in the documentation helpful. However, I can't determine where to actually make the changes. In this page: http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples it says to "simply view your source," but I'm not sure where to find that. Does this mean to view the source of my theme's style.css and edit it under the section labeled "Forms"?

    I'd specifically like to accomplish two things. 1. I'd like to decrease the spacing between lines (make the form a little smaller) and 2. Edit the form wrapper. Again, I think I've found the documentation to know the correct code, but I'm just not sure where to edit this.

    Posted 12 years ago on Thursday May 24, 2012 | Permalink
  2. You will always want to place CSS into your theme's stylesheet. Each theme is different, so sometimes they are setup with custom.css files and others you can just place them in style.css like you mentioned. If you need more specific help or get stuck, just post a link to your form and I can help you out.

    Posted 12 years ago on Thursday May 24, 2012 | Permalink
  3. David Peralty

    View source is a function of most web browsers. If you right click on a page, you should have an option to view source. You can then look through the code that makes up your page and figure out what CSS class is effecting which element and edit your style.css file in your theme.

    Posted 12 years ago on Thursday May 24, 2012 | Permalink
  4. Thanks David. I'm familiar with "view source" when right clicking from a browser. I thought maybe there was some other secret that I didn't know about! Based on your description, I feel pretty confident that I can take it from there and make the necessary changes.

    Thanks again!

    Posted 12 years ago on Thursday May 24, 2012 | Permalink
  5. Alright Rob. I may have overestimated my abilities to track where everything is pulling from in my theme. Can you take a look at this link to my landing page and tell me how I would edit both the form size and also create a colored form wrapper?

    Thanks!

    Here's the link: http://www.expiredsupport.com

    Posted 12 years ago on Thursday May 24, 2012 | Permalink
  6. Sure thing, to target just this form's wrapper you could use:

    [css]
    #gform_wrapper_1 {
    background-color: white;
    }

    What do you mean when you say form size. Also, it looks like your theme is causing your Email and Phone field's inputs to not have a background-color or border. Are you looking to style the inputs and/or decrease spacing between each field?

    Posted 12 years ago on Thursday May 24, 2012 | Permalink
  7. Thanks Rob. I read some of the tutorials on how to change the wrapper earlier, but I'm just not sure where I actually add the code snippet you have above. Are you able to tell that from looking at my source code?

    In terms of the form size, I feel like it is a little too long on the page compared to the video. What do you think? I was thinking if I was able to create less space between each field, it might look better.

    Oh, and I'm glad you mentioned the piece about the Email and Phone fields background color. Do you know how to fix that? I obviously would like it to look like the other fields.

    Thanks so much for your help!!!!

    Posted 12 years ago on Thursday May 24, 2012 | Permalink
  8. No problem. As I said above: You will always want to place CSS into your theme's stylesheet. Each theme is different, so sometimes they are setup with custom.css files and others you can just place them in style.css like you mentioned. That holds true. I'd have to see your WP Admin to tell you for certain where to place custom CSS. Can you send me a WP Admin login to rob@rocketgenius.com - please reference this post in your email.

    Posted 12 years ago on Thursday May 24, 2012 | Permalink
  9. Thanks Rob. Just sent you an email...

    Posted 12 years ago on Thursday May 24, 2012 | Permalink

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