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 Layout Assistance

  1. Hello.

    I have a couple of layout questions so I've attached a screen shot of what I want to do.

    1) Change the width of the Fields
    2) Add the "$" to some of the Fields
    3) Add the "%" to the back of some of the fields

    If you go to the link below you can see how it currently looks
    http://www.mtvistahomes.com/tax-benefits-of-home-ownership/

    The link below is of how I would like it to look.
    http://i49.tinypic.com/14m48dt.png

    Thank you

    Shawn

    Posted 7 years ago on Tuesday March 12, 2013 | Permalink
  2. Any chance of getting some assistance with this?

    Posted 7 years ago on Thursday March 14, 2013 | Permalink
  3. Please see our response time commitments here:
    http://www.gravityhelp.com/support-times/

    Also, bumping the topic moves you further away from getting assistance, because we normally try to go from oldest to newest, and when you add a reply, you reset the clock, and the topic appears newer than it is.

    That said, you can format a field as currency by using this approach:
    http://gravitywiz.com/format-field-as-currency/

    Or, you can add this CSS to one of your theme's stylesheets to get it to look like your screenshot:

    [css]
    #field_1_7 .ginput_container:after,
    #field_1_12 .ginput_container:after,
    #field_1_13 .ginput_container:after,
    #field_1_18 .ginput_container:after,
    #field_1_14 .ginput_container:after {
      content: "%";
    }
    
    #field_1_17 .ginput_container:before,
    #field_1_6 .ginput_container:before,
    #field_1_8 .ginput_container:before,
    #field_1_9 .ginput_container:before,
    #field_1_11 .ginput_container:before,
    #field_1_10 .ginput_container:before,
    #field_1_15 .ginput_container:before,
    #field_1_16 .ginput_container:before {
      content: "$ ";
    }

    Screenshot: http://minus.com/lbkxUx9wKU6lpe

    From the screenshot, it looks like you want the percentage fields to be narrower? You can adjust the size in the form builder by using the drop down for "Field Size" (small, medium or large) on the advanced tab. Screenshot: http://minus.com/lJkYPrybfueLt

    Or we can add CSS again to change the width of individual fields to some specific width if the drop down is not accurate enough for you.

    Posted 7 years ago on Thursday March 14, 2013 | Permalink
  4. Thank you.

    I played with the Field Size by adding this CSS to the end of my style.css but, it's not working for items in the Fields Set. Why?

    .gform_wrapper
    .top_label input.small,
    .gform_wrapper
    .top_label select.small
    {
    width:5% !important;
    }

    .gform_wrapper
    .top_label input.medium,
    .gform_wrapper
    .top_label select.medium
    {
    width:10% !important;
    }

    Posted 7 years ago on Thursday March 14, 2013 | Permalink
  5. Try this CSS instead:

    [css]
    body .gform_wrapper fieldset input.small {
        width:5%!important;
    }
    body .gform_wrapper fieldset input.medium {
        width:10%!important;
    }
    Posted 7 years ago on Thursday March 14, 2013 | Permalink
  6. Thank you again.

    One last edit/question on the Field Set. The "Box" extends all the way to the right of the page I would like to bring that in a bit to say half the width of the page. Can you point me to where I would make that adjustment?

    Thank you,

    Shawn

    Posted 7 years ago on Thursday March 14, 2013 | Permalink
  7. More CSS here. Add this to one of your theme's stylesheets:

    [css]
    body .gform_wrapper fieldset {
      width: 50%;
    }
    Posted 7 years ago on Thursday March 14, 2013 | Permalink
  8. Perfect one last change and than I'm out of your hair.

    The Field Set Input Boxes (the space where the text shows up in the input boxes) what is the CSS for changing the size of the Box and the Text in the box?

    Thx

    Shawn

    Posted 7 years ago on Thursday March 14, 2013 | Permalink
  9. Something like this:

    [css]
    body .gform_wrapper fieldset input.medium,
    body .gform_wrapper fieldset input.small {
        line-height: 1.8em;
        font-size: 1.6em;
    }

    You could combine that with the previous rules if you wanted to.

    Posted 7 years ago on Thursday March 14, 2013 | Permalink