Need Help: Gravity Forms Displays across the whole page

Gravity Support Forums » Plugin Support » Gravity Forms

Campbell
Member

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 12 years ago on Wednesday July 6, 2011 | Permalink
Kevin Flahaut
Administrator
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 12 years ago on Wednesday July 6, 2011 | Permalink
Campbell
Member

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 12 years ago on Wednesday July 6, 2011 | Permalink
Kevin Flahaut
Administrator

Cambell,

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

Let us know if you need anything else.

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