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.

Make my forms look like the Gravity site?

  1. patrickcash6
    Member

    I'm using Thesis and am familiar with the custom.css file.
    I've tried looking at the Gravity site with firebug but I'm a novice at css, etc.

    Can someone please tell me what code I'd need to make the forms on my sites look like the forms on here (including the submit button).
    These all look so good and mine, well, mine not so much lol.

    Thanks!
    Patrick

    Posted 7 years ago on Tuesday July 19, 2011 | Permalink
  2. The forms on this site uses images for buttons. There is an option in the Form Settings under the Advanced tab to use an image for your Submit button. You select that option and then enter the full path to the image you want to use. It's as simple as telling you waht code you need to make your form look like ours because we use 3rd party services such as TypeKit for the fonts on our site, etc.

    The best thing to do is learn by trial and error, play around with the CSS. Inspect and browse our CSS using FireBug. Turn elements on and off using FireBug and see how it impacts the form, etc. Study the CSS Targeting documentation here:

    http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

    The key with CSS is simply putting it to use and learning via trial and error. Gravity Forms markup is standard markup and standard CSS so there isn't anything specific to Gravity Forms going on, it's all standards based design and markup.

    Posted 7 years ago on Tuesday July 19, 2011 | Permalink
  3. patrickcash6
    Member

    Thanks! The link really helped. I'm about 1/2 way there.

    Here's a link to the page.

    I have the following code in my custom.css file but no luck on the button.

    a.gf_home_pricing_button {
        background-image: url("../images/homepricingbutton.png");
        background-position: 0 0;
        background-repeat: no-repeat;
        color: #FFFFFF;
        display: block;
        font-family: "proxima-nova-1","proxima-nova-2",Helvetica,Arial,sans-serif;
        font-size: 22px;
        height: 92px;
        line-height: 60px;
        margin: 0 auto;
        text-align: center;
        text-decoration: none;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
        width: 410px;
    }

    I have set this form class to gf_home_pricing_button on the "form settings" tab.

    If I view source I do not see this class where the button is. I see a class of gform_image_button
    Can you see what I'm doing wrong?

    Thanks again!
    Patrick

    Posted 7 years ago on Tuesday July 19, 2011 | Permalink
  4. I can't really tell you what you're doing wrong unless I can see the form in the page. You're probably going to run into problems trying to copy our CSS directly because those buttons aren't necessarily applied to Gravity Forms and the markup may not be the same.

    I would suggest creating your buttons, then using the built-in image button option in the form editor. That's going to be a lot less of a headache for you.

    http://www.gravityhelp.com/documentation/page/Form_Settings

    http://www.gravityhelp.com/documentation/page/File:Form-settings-advanced.png

    Posted 7 years ago on Tuesday July 19, 2011 | Permalink
  5. patrickcash6
    Member

    Hi Kevin, ok I'm afraid I get some of this but not other parts. I used the image setting too. :(

    Here's the page it's on. I'm really just trying to get a feel for this at this point...
    http://www.gadsden-alabama.com/submit-or-edit-your-business-listing

    Here is a screenshot of the setting.
    http://www.screencast.com/t/ehwfIif2FdV

    Posted 7 years ago on Tuesday July 19, 2011 | Permalink
  6. Yep, that's a button. It's a huge button, but the plugin is doing exactly what you tell it to do, it's outputting the button path you put in the admin. I would suggest creating a smaller button image, but it is working properly.

    I notice you put a button class name in the form settings. You shouldn't need that there. The CSS class name setting there is applied to the main FORM tag so a button class wouldn't necessarily apply. If you've already defined styles for that class, you could end up with some other wonky styling because you're trying to apply button properties/styling to the form element itself.

    Posted 7 years ago on Tuesday July 19, 2011 | Permalink
  7. patrickcash6
    Member

    ok i can live with that. Is there a simple way to add the text to the button rather than have to create a button for each form?

    Thank you guys so much for your help.

    Patrick

    Posted 7 years ago on Wednesday July 20, 2011 | Permalink
  8. You would have to create background images for the buttons, then apply styles to the submit element, etc. "Simple" is very relative. If you're not very proficient with CSS, the button image is your best bet. The nicest thing about that is the buttons look the same in all the browsers without a lot of CSS tweaking to pull it off.

    Posted 7 years ago on Wednesday July 20, 2011 | Permalink