Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #8261

    How can I change Gravity Forms to match the form styling that’s built-in to propulsion? Is there a specific css that I need to link it to? I tried changing the form CSS class name to point to base.css and style.css but it didn’t work as intended. I also disabled Gravity Forms css output but the forms are still not matching correctly. The spacing between form fields seems too large. The form can be seen on the footer at brgreenlawncare.com

    #60840

    Hey,
    it seems like wp-content/plugins/gravityforms/css/forms.css overwrites all default styles. They can be found in css/base.css and affect all form fields with the same type (text, password, etc.) – these styles will also apply to Gravity Forms input fields. Our contact form doesn’t offer all field types so many elements require custom css code.

    The only code which needs to be changed is:

    #submit, .button{<br />
    padding:9px 22px;<br />
    cursor:pointer;<br />
    border:none;<br />
    }

    and:

    .input-text {<br />
    -webkit-appearance: none;<br />
    border: 1px solid #e1e1e1;<br />
    padding: 6px 4px;<br />
    outline: none;<br />
    font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;<br />
    color: #777;<br />
    margin: 0;<br />
    width: 210px;<br />
    max-width: 100%;<br />
    display: block;<br />
    margin-bottom: 20px;<br />
    background: #fff;<br />
    }

    because GF doesn’t an element with the id “submit ” or “button/input text” class. However the input text class code is also used for all text input fields and I’m not sure if it’s required for GF.

    #60841

    Adding this to custom.css seems to have done the trick.

    body .gform_wrapper .gform_body .gform_fields .input-text,

    body .gform_wrapper .gform_body .gform_fields input[type=”text”],

    body .gform_wrapper .gform_body .gform_fields input[type=”input”],

    body .gform_wrapper .gform_body .gform_fields input[type=”password”],

    body .gform_wrapper .gform_body .gform_fields input[type=”email”],

    body .gform_wrapper .gform_body .gform_fields textarea,

    body .gform_wrapper .gform_body .gform_fields select {

    margin: 0 0 0 0 !important

    }

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Gravity Forms Styling’ is closed to new replies.