Form to fit Sidebar « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

Will
Member

I want to put a smaller contact form to fit the narrow sidebar. To make it compact, I would like to do the following:

1. Put the field names inside the field boxes
2. Decrease the distance between the field boxes
3. Reduce the font size of field names
4. Reduce the distance between the name of the contact form and first field box

The website is http://www.stephengoldenlaw.com. There's a form in the Contact Us page. There is no form yet in the sidebar but you will have an idea how narrow it is.

Will appreciate your help.

Posted 11 years ago on Friday February 22, 2013 | Permalink
Will
Member

More than 24 hours and no reply?

Help please.

Posted 11 years ago on Saturday February 23, 2013 | Permalink
Chris Hajer
Key Master

We strive for a response within 48 hours, and there is no support on the weekend during non-business hours. Please see this: http://www.gravityhelp.com/support-times/

1. To put the field labels inside the boxes, you want to use placeholder text. There are a couple 3rd party add-ons available which will do this for you:

http://wordpress.org/extend/plugins/gravity-forms-placeholders/
http://wordpress.org/extend/plugins/gravity-forms-auto-placeholders/

For 2, 3 and 4, please insert a form into your sidebar so we can see which fields we are talking about.

Posted 11 years ago on Sunday February 24, 2013 | Permalink
Will
Member

Thank you for the add-on. The field labels are now inside the boxes.

The form is live at http://www.stephengoldenlaw.com.

Referring to my first post, will appreciate your help on the following:

1. Decrease the distance between the field boxes
2. Reduce the font size of field names
3. Reduce the distance between the description and first field box
4. Reduce the distance between the last field box (Message) and the Send button.

Thanks.

Posted 11 years ago on Tuesday February 26, 2013 | Permalink

Please add this to one of your theme's stylesheets:

[css]
/* #1 */
body .gform_wrapper li,
body .gform_wrapper form li {
        padding: 2px 0;
}
/* #2 */
body .gform_wrapper input[type="text"],
body .gform_wrapper input[type="url"],
body .gform_wrapper input[type="email"],
body .gform_wrapper input[type="tel"],
body .gform_wrapper input[type="number"],
body .gform_wrapper textarea,
body .gform_wrapper input[type="password"] {
         font-size: 8px;
}
/* #3 */
body .gform_wrapper .gform_heading {
        margin-bottom: 0px;
}
/* #4 */
body .gform_wrapper .gform_footer {
        margin-top: 0px;
        padding-top: 0px;
}

Screenshot: http://minus.com/lbkZPTOIECvt5p

You can adjust all those values as you see fit. I just wanted to show you how to target everything properly.

Posted 11 years ago on Tuesday February 26, 2013 | Permalink

Will
Member

That worked smoothly. Thank you so much!

Posted 11 years ago on Friday March 8, 2013 | Permalink

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