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.

Making GF look sexy.

  1. OK...this is not as easy as everyone says.

    All I want to do is create a simple box to capture customer email addresses. I can design this and drop the code into WP but it looks god awful.

    I want nice rounded corners, a big sexy email capture box and an even sexier 'Subscribe' button but I am not a CSS whiz.

    Is there any cut and paste type samples or are we stuck with ugly forms? The last thing I want to do is spend endless hours playing around in Firebug in attempts to get it right.

    Go to the bottom of GravityForms.com and you'lll see the exact example of what I want to achieve. A nice and simple email capture field.

    Anyone? Bueller? ..... Bueller?

    Posted 8 years ago on Wednesday March 7, 2012 | Permalink
  2. This is all possible via CSS, however there are no cut and paste samples. Can you post a link to your form and I can provide you with something to get you started selector-wise so you can modify to your liking.

    Posted 8 years ago on Wednesday March 7, 2012 | Permalink
  3. thanks for the quick response.

    I have made a quick form on this page:
    http://vancouverrealestate.ca/testing-page

    Ideally I'd like it to look like the form look like the email capture form at the bottom of the gravityforms.com index page.

    I am using thesis so any CSS I will have to add to the custom.css file. Not sure if that matters at all.

    Thanks Rob.

    Posted 8 years ago on Wednesday March 7, 2012 | Permalink
  4. OK, try dropping this in. This should get you the overall same look. We are also targeting only the .gform_body class of Form ID 3 and also only the input with the ID of input_3_1 as well as only the .gform_footer class of Form ID 3. For your button you have two options. You can create your own image (the one on the GF site is an image) or style it. I noticed your theme is styling the button as it is now.

    [css]
    #gform_wrapper_3 .gform_body {
    float: left;
    }
    #input_3_1 {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color: white;
    color: #333;
    border: 1px solid #CCC;
    font-size: 14px!important;
    box-shadow: inset 0px 0px 5px #e5e5e5;
    -moz-box-shadow: inset 0px 0px 5px #e5e5e5;
    -webkit-box-shadow: inset 0px 0px 5px #e5e5e5;
    word-spacing: 0.4pt;
    letter-spacing: 0.2pt;
    color: #ADADAD;
    height: 60px;
    width: 500px;
    font-size: 24px!important;
    line-height: 62px;
    padding: 0 10px;
    }
    #gform_wrapper_3 .gform_footer {
    float: right;
    clear: none;
    }
    Posted 8 years ago on Thursday March 8, 2012 | Permalink
  5. more please! Thanks Rob. Your reply is great.

    Posted 8 years ago on Tuesday April 3, 2012 | Permalink
  6. OK, where do exactly do I paste the above code in the css theme file? I'm really struggling to make things look better and would love a quick tutorial on how to make all the fields like the one above. Thank you,

    Posted 7 years ago on Thursday November 29, 2012 | Permalink
  7. The CSS posted by Rob will go anywhere in your theme's style.css (normally.) Some themes provide a special theme options page where you can enter your own CSS. If your theme has this, you can paste the code there. Otherwise, just at the end of your theme's style.css.

    http://www.gravityhelp.com/documentation/page/Where_Do_I_Put_This_Code%3F#CSS

    Posted 7 years ago on Thursday November 29, 2012 | Permalink
  8. Chris, thank you for your swift reply! I don't have familiarity with CSS and how it works - it seems simple enough, but I've tried various ways to get it to work and keep coming up empty handed. I've appended it to the end of the style.css file, insert it into my theme's CSS box, searched to make sure I don't have a custom.css file, and nothing I do seems to change the plain-box styling of the forms I've created. ANy further tips other than finding a developer that knows CSS? Thank you,

    Posted 7 years ago on Thursday November 29, 2012 | Permalink
  9. I am also having this issue, I have pasted the styles within my stylesheet and tried to pinpoint the divs and have had no luck whatsoever. I have a custom theme, but that shouldn't matter. It should take the styles and it is not at all.

    Posted 7 years ago on Thursday November 29, 2012 | Permalink
  10. Travis and WDT, please share a link to the page on your site, where the form is embedded, and ensure you have added to CSS to one of your theme's stylesheets, so we can see what is going on.

    On lines 1, 4 and 24, there are specific form and field related IDs which you will have to change to make it work on your form. Rob's example targeted form 3, and on line 4, specifically field 1 in form 3. If your form is not form ID 3, and the field is not field 1, that CSS will not help you. You need to customize it for your form ID and field ID.

    Posted 7 years ago on Saturday December 1, 2012 | Permalink