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.

Any way to achieve this look?

Gravity Support Forums » Plugin Support » Gravity Forms

  1. openfire9
    Member

    I like the form on this site http://www.butlermortgage.ca/index-v/

    Is it possible to create a form that looks like this with gravity forms? I'm not a css wizard so any tips would be greatly appreciated!

    thx

    Posted 12 years ago on Wednesday August 17, 2011 | Permalink

  2. Kevin Flahaut
    Administrator

    yep, you could do something similar. You would want to target the list items that contain each field then apply a border, border-radius, background color and a bottom margin to separate each one visually.

    It's not super-difficult, but you're going to need to be comfortable with CSS to get it done. You may need to override some of the default form CSS to apply the new properties.

    When you create your form, if you get stuck you can share a URL to the form page with us and we'll be happy to take a look and help you along the way.

    Posted 12 years ago on Wednesday August 17, 2011 | Permalink

  3. openfire9
    Member

    Awesome!

    I'll hack away with the info you gave and see if I can get 'er done.

    Thx!

    Posted 12 years ago on Wednesday August 17, 2011 | Permalink

  4. openfire9
    Member

    Kevin, I did it up quick in firebug, exactly as you stated... worked like a charm!

    Only thing I noticed was that it affected all of the list items in my sidebar, not just the form. It's not a big deal as it actually looks better, but just for argument's sake, what would be the exact selector to isolate just the form list items?

    Posted 12 years ago on Wednesday August 17, 2011 | Permalink

  5. Chris Hajer
    Key Master

    You can start your selector with .gform_wrapper. Each form begins like this:

    <div class='gform_wrapper'

    By adding that to the beginning of all your rules, you will restrict the style to just list items inside the form.

    Posted 12 years ago on Wednesday August 17, 2011 | Permalink

  6. Kevin Flahaut
    Administrator 

    [css]
body .gform_wrapper .gform_body .gform_fields {border:1px solid red}

    is the recommended way to target the list items with the class "gform_fields" using inheritance from the "gform_wrapper" as Chris suggested. I like to add in the body element in the inheritance as well to increase the specificity.

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

    Posted 12 years ago on Wednesday August 17, 2011 | Permalink

  7. openfire9
    Member

    OK, I changed this (which worked, but affected everything in my sidebar)

    [css]
.divider, .divider_line, .commentlist li, .entry .entry_meta, #sidebar .widget li, #sidebar .widget_pages ul ul, #about_the_author .author_content {
    -moz-border-radius: 5px 5px 5px 5px;
    background-color: #F3F3F3;
    border: 1px solid #D1D1D1;
    margin-bottom: 8px;
    padding-bottom: 10px;
    padding-left: 16px;
}

    to this:

    [css]
.gform_wrapper {
    -moz-border-radius: 5px 5px 5px 5px;
    background-color: #F3F3F3;
    border: 1px solid #D1D1D1;
    margin-bottom: 8px;
    padding-bottom: 10px;
    padding-left: 16px;
}

    and the result was that I lost the individually separated list items in the form... what am I missing in the above?

    thx

    Posted 12 years ago on Wednesday August 17, 2011 | Permalink

  8. openfire9
    Member

    woops, I posted that before I saw your reply Kevin...

    OK I tried this:

    [css]
body .gform_wrapper .gform_body .gform_field {
    -moz-border-radius: 5px 5px 5px 5px;
    background-color: #F3F3F3;
    border: 1px solid #D1D1D1;
    margin-bottom: 8px;
    padding-bottom: 10px;
    padding-left: 16px;
}

    and lost the styling all together.

    hhhmmmm...

    Posted 12 years ago on Wednesday August 17, 2011 | Permalink

  9. Kevin Flahaut
    Administrator

    you're applying the properties to the wrapper element, not the list items that are children of the wrapper which is what you need to do. Try this instead.

    [css]
body .gform_wrapper .gform_body .gform_fields .gfield {
-moz-border-radius: 5px 5px 5px 5px;
background-color: #F3F3F3;
border: 1px solid #D1D1D1;
margin-bottom: 8px;
padding-bottom: 10px;
padding-left: 16px;
}
    Posted 12 years ago on Wednesday August 17, 2011 | Permalink

  10. Kevin Flahaut
    Administrator

    Can you post a URL to your form page? I think we're disconnecting here and seeing the actual form will help me help YOU. :)

    Posted 12 years ago on Wednesday August 17, 2011 | Permalink

  11. openfire9
    Member

    OK got it working now!!!

    I was a) missing the "s" at the end of .gform_field"s" and b) I was missing .gfield

    This worked beautifully: 

    [css]
.gform_wrapper .gform_body .gform_fields .gfield {
    -moz-border-radius: 5px 5px 5px 5px;
    background-color: #F3F3F3;
    border: 1px solid #D1D1D1 !important;
    margin-bottom: 8px;
    padding-bottom: 10px;
    padding-left: 16px;
}

    Thanks guys! Much appreciated!

    Posted 12 years ago on Wednesday August 17, 2011 | Permalink

  12. Kevin Flahaut
    Administrator

    Wonderful. You're a Rockstar. Thanks for the update.

    Posted 12 years ago on Wednesday August 17, 2011 | Permalink

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