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.

Need Help: Gravity Forms Displays across the whole page

  1. Good morning,

    I have recently purchased a Dev License and I am new to Gravity Forms so please bear with me as I am unfamiliar with css and php coding.

    I am trying to correct the way that my Contact Page renders the Contact Form across the width of the whole page. I do not want it to display across the whole page on a full width page. I only want it to be about 60% of the entire page width.

    I am also trying to achieve a more custom Height Dimension and Layout of the Field Boxes Themselves as they are currently too squat and are not proportioned correctly in a sense that they are aesthetically pleasing in proportion or size.

    I would like to know how I can go about achieving this such as where exactly do I place the CSS code itself and what is the CSS code specifically?

    Here is my Contact Page on my Blog>> http://www.communitycomputerrepair.com/blog/contact

    Here is the example @ StudioPress that I wish to achieve on my contact form on my site>>

    http://www.studiopress.com/contact

    Thank you

    Campbell McArthur

    Posted 8 years ago on Wednesday July 6, 2011 | Permalink
  2. The form wrapper with can be defined easily. A width value isn't set by default so it can adapt to whatever size content area you have available.

    For your form, you would just need to add this rule to your theme stylesheet.

    [css]
    body #gform_wrapper_1 {
        width: 60%;
    }

    screenshot; http://bit.ly/nkDJyj

    You can reference the documentation at the link below to find how to properly target the different form elements for manipulation with CSS. There are examples using the shared CSS classes for applying changes to all like elements and examples of how to target elements based on the unique field ID to change only specific fields.

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

    http://www.gravityhelp.com/documentation/page/Where_Do_I_Put_This_Code%3F

    So, to do something similar to the StudioPress contact form, you would append new CSS rules to the end of your theme stylesheet like this.

    [css]
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=text],
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=email],
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=url],
    body .gform_wrapper .gform_body .gform_fields .gfield textarea {
        padding: 6px 0;
        border-radius: 4px;
        border: 1px solid #ccc;
        background-color: #eee;
        font-size: 14px
    }

    screenshot: http://bit.ly/rjgHG7

    After that, you just customize the CSS properties for the inputs to suit your preference. Good luck.

    Posted 8 years ago on Wednesday July 6, 2011 | Permalink
  3. Brother You Rock!

    That Works Kevin and thank you so much for your wonderful, insightful and timely support!

    Sincerely,

    Campbell McArthur
    Owner / Lead Engineer
    Community Computer Repair

    Posted 8 years ago on Wednesday July 6, 2011 | Permalink
  4. Cambell,

    Thanks for the update. I'm very pleased I could help out.

    Let us know if you need anything else.

    Posted 8 years ago on Wednesday July 6, 2011 | Permalink