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.

Form does not appear on page correctly.

Gravity Support Forums » Plugin Support » Gravity Forms

  1. kevinpaul
    Member

    I am having an issue with the way the form comes up on the page. The styling looks incorrect and there is an extra form under the submit button.

    http://www.kevinpaulphotography.com/blog/contact/

    Thanks for any help!

    Kevin

    Posted 14 years ago on Wednesday January 12, 2011 | Permalink

  2. David Smith
    Member

    Hi Kevin,

    The form beneath the Gravity Form appears to be a default form that is part of your theme. More than likely there is a theme option to disable this.

    In regards to the styling of the form, Gravity Forms comes with a minimal amount of default styling and leaves the more advanced styling to the end user. In order to style the Gravity Form like the default form that is currently displaying beneath the Gravity Form, you'll want to modify the styles in your stylesheet.

    You can find the current styles used to style your theme's default form on this stylesheet:

    http://www.kevinpaulphotography.com/blog/wp-content/themes/TheStyle/epanel/page_templates/page_templates.css

    Posted 14 years ago on Wednesday January 12, 2011 | Permalink

  3. kevinpaul
    Member

    Thank you for the info. You were right about the built in form. So I was able to embed the gravity form on a standard template page so the built in form would not show up. So how do I go about taking that styling and applying it to the gravity form? Please forgive my ignorance as I am just getting into this blogging thing.

    Posted 14 years ago on Thursday January 13, 2011 | Permalink

  4. Kevin Flahaut
    Administrator

    This should get you close. I copied these styles from your existing form and targeted the proper elements in a Gravity Form.

    body .gform_wrapper input[type=text],
body .gform_wrapper input[type=email],
body .gform_wrapper input[type=phone],
body .gform_wrapper input[type=url],
body .gform_wrapper input[type=password],
body .gform_wrapper textarea {
    background: url("images/contact_input.png") repeat-x scroll 0 0 #F7F7F7;
    border: 1px solid #CCC;
    color: #111;
}

body .gform_wrapper .gform_footer input[type=submit] {
    background: url("images/contact_submit.png") no-repeat scroll 0 0 transparent;
    margin-right: 6px;
    width: 73px;
    border:none !important;
    color: #4C4B4B;
    float: right;
    font-size: 12px;
    height: 35px;
    margin-right: 9px;
    text-shadow: 1px 1px 1px #FFFFFF;
    text-transform: uppercase;
}

    If you need to apply other rules, you can check out this guide on how to properly target form elements in Gravity Forms

    http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/

    Posted 13 years ago on Friday January 14, 2011 | Permalink