Form spacing and font « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

blaiset
Member

Hello:

All of our forms look great. But I have the need to create a new form that is very compact with very little to no spacing between fields. In turn, I only need for this change to take effect on one specific form. How would I do this?

Additionally, I would like to make the form input font (the text typed into the form) to be much larger as larger text in forms seems to be the new trend. I would normally implement this on a global bases but I can't for the compact form above to save space. In turn, how do I implement a font size change and possibly bold text only for specific forms?

Thank you in advance.

Posted 12 years ago on Friday September 21, 2012 | Permalink
David Peralty

Can you please link to your form? One of our support team would be happy to give you some tips on making this happen.

If you require extensive customization of the design of the form, we recommend hiring a designer/developer to handle this.

Posted 12 years ago on Friday September 21, 2012 | Permalink
blaiset
Member

Thanks for the reply.

URL to one of the forms that we wish to change the size of the font in the forms: http://tinyurl.com/bwvm2ap
We wish to make the font in the form fields to be larger and bold.

URL to form that needs to be compact and remove spacing: http://tinyurl.com/9hx5bxr
This form will be placed into a side bar widget and needs to be very vertically and horizontally compact.

Thank you.

Posted 12 years ago on Friday September 21, 2012 | Permalink
Rob Harrell
Member
Looks like the font is already bold. You can use this to change the font-size of the labels globally.
```
[css]
body .gform_wrapper .gfield_label {
font-size: 18px;
}
```
If you want to place that other form in the side bar widget we can help provide you with changes once it is placed.
Posted 12 years ago on Friday September 21, 2012 | Permalink
blaiset
Member

Rob:

Thanks for the reply.

I can't do any of the changes globally as the compact form needs to be different then the other forms.
So, how do I implement your suggestion on any single form?
I would also appreciate the code to remove or change the amount of spacing on a single form and not globally. http://tinyurl.com/9hx5bxr is the form I will using once I get it to the right size.

Thanks in advance.

Posted 12 years ago on Friday September 21, 2012 | Permalink
blaiset
Member

Rob:

BTW, I need to change the size of the font in the form and not the label.

Thanks again.

Posted 12 years ago on Friday September 21, 2012 | Permalink
Chris Hajer
Key Master
To apply Rob's code to just one form, not all forms, use this (for form 5, from your link):
```
[css]
body #gform_wrapper_5 .gfield_label {
    font-size: 18px;
}
```
Posted 12 years ago on Saturday September 22, 2012 | Permalink
blaiset
Member

Chris:

Thank you. I will try that. To confirm though I wish to change the size of the font IN the forms and not for the labels.

Thank you.

Posted 12 years ago on Saturday September 22, 2012 | Permalink
Chris Hajer
Key Master

Which font are you referring to? I don't see any text displayed other than the labels right now. Are you talking about some other text?

Posted 12 years ago on Sunday September 23, 2012 | Permalink
blaiset
Member

Hi Chris:

I am referring to the text that the user will input in to the form. The size of the font "in" the form, not the labels.

Thanks.

Posted 12 years ago on Monday September 24, 2012 | Permalink
Chris Hajer
Key Master
You mean the size of the font inside your form fields then. The font is size 11px right now. You can change that by adding this to your theme's style.css:
```
[css]
body #gform_wrapper_5 input[type="text"],
body #gform_wrapper_5 input[type="email"],
body #gform_wrapper_5 input[type="tel"] {
    background-color: red;
    color: black;
    font-size: 8px;
}
```
I added the colors to this CSS so you can be sure you are targeting the correct elements. You can remove the red and black once you are happy with the results.
Posted 12 years ago on Monday September 24, 2012 | Permalink
charismaarts
Member

Hello: I have a similar need and want to make the same change to a form of mine; I am using twentyeleven theme with a child theme; I tried to use the css inputed above by Chris Hajer, the form in question is on this page (http://charismaarts.com/dear-wayne-form) and the form id is 104; so I just added Chris's code to my style css and made it form 104 instead of form 5; but it didnt work; I have tried to figure this out a few different ways but with no luck, does the code need to be different for my site/form?
Thanks, Gerard

Posted 12 years ago on Monday October 15, 2012 | Permalink
Chris Hajer
Key Master
I think the new rules you inserted are not working because you have invalid CSS right before it:
```
[css]
h3.widget-title (font-size: 11.1px;}
.widget-title (font-size: 11.1px;}
```
You opened those with a parenthesis ( rather than a brace {. Fix that and I think you will be fine.

In the future, because every issue is unique, we need to troubleshoot them separately. Please start a new topic and describe what you would like to do, on which site, and what code you have added to make that work. Please be sure to include the URL as you have done here, so we can check it out. Thank you.
Posted 12 years ago on Monday October 15, 2012 | Permalink
charismaarts
Member

thanks Chris, that did the trick!

Posted 12 years ago on Monday October 15, 2012 | Permalink
Chris Hajer
Key Master

You're welcome Gerard.

Posted 12 years ago on Monday October 15, 2012 | Permalink
dennisrosenberg
Member

Similar question: I need to increase the size of the text that the user types in for all of the fields in this form: http://limitlessnewpatients.com/thankyoustrategysession/

Can you provide the CSS for that?

Thanks!

Posted 12 years ago on Tuesday October 16, 2012 | Permalink

David Peralty

Try the following:

.gform_wrapper input[type="text"], .gform_wrapper input[type="url"], .gform_wrapper input[type="email"], .gform_wrapper input[type="tel"], .gform_wrapper input[type="number"], .gform_wrapper input[type="password"]
{
font-size: 16px !important;
}

Posted 12 years ago on Tuesday October 16, 2012 | Permalink

dennisrosenberg
Member

That code didn't seem to change anything. I'm using a theme called Flexsqueeze and put the CSS code into the admin area for that theme that allows custom CSS code to be entered.

Posted 12 years ago on Tuesday October 16, 2012 | Permalink
David Peralty

I don't see that theme pushing out the CSS for that field. Are you using a caching plugin? I'm not certain. We usually have people put it directly in the theme's stylesheet.

Posted 12 years ago on Tuesday October 16, 2012 | Permalink
dennisrosenberg
Member

Thanks, put the code directly in the stylesheet as you suggested and it worked for most of the fields...but it's not affecting the longer paragraph fields. Is there another line to add for those fields?
http://limitlessnewpatients.com/thankyoustrategysession/

Posted 12 years ago on Tuesday October 16, 2012 | Permalink
David Peralty
Yup, put:
```
.gform_wrapper textarea {
font-size: 16px !important;
}
```
Posted 12 years ago on Tuesday October 16, 2012 | Permalink
dennisrosenberg
Member

All good now, many thanks.

Posted 12 years ago on Tuesday October 16, 2012 | Permalink

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