Name Email and Phone Fields « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

wmcdonald
Member
Hello,

Here is the link to the form on my mobile contact page:

http://www.guitarpianolessons.com/contact-mobile/

I'm not sure why there are bullets outside of the wrapper. Do I need them? If not how to get rid of them?

Also, trying to find a way to edit the labels for First and Last Name fields. Is there a way to position them somewhere else. Perhaps above the input boxes or even inside the input boxes?

Another issue I'm trying to resolve is adding some white space (verticle space) above and below the submit button. The reason is make it easier to touch tap.

Finally I've been trying to extend the width of the input boxes. How do I approach that?

I was able to reduce the width of the paragraph textarea with this little bit of css:
```
[css]
.gform_wrapper .ginput_container textarea.medium  {
    max-width: 299px;
}
```
But I have not been able to successfully edit (extend) the width of the other input boxes. I've been reading through the forum posts and documentation. Honestly, most of this info is way over my head. I'm just a musician, the documentation is like a foreign language to me. I'm lost most of the time when reading this stuff. :)

Any ideas or code most appreciated.

Thank you,

-Warren
Posted 12 years ago on Saturday September 22, 2012 | Permalink
Chris Hajer
Key Master
1. Bullets: see this FAQ item:
http://www.gravityhelp.com/question/why-is-my-form-showing-up-with-list-bullets/

Adding this CSS to your mobile.css removed the bullets for me:
```
[css]
body .gform_wrapper form .gform_body ul,
body .gform_wrapper form .gform_body ul li {
	list-style-type: none !important;
	list-style-image: none !important;
	list-style: none !important;
	background-image: none !important;
	background: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important
}
```
2. For the first and last name labels, I think you might want to use placeholder text and position the labels inside the form inputs. There is a new plugin which claims to do just that (it's not currently a feature of Gravity Forms): http://wordpress.org/extend/plugins/gravity-forms-placeholders/ If you are using a "Normal" name field, the First and Last are actually sub labels. It will be easier to position them where you want them if you have two separate text inputs and give them labels of First Name and Last Name.

3. Add white space above and below the submit button: add this to your theme's mobile.css:
```
[css]
body .gform_wrapper .gform_footer .gform_button {
    margin: 20px 0;
}
```
4. Extend the width of the input fields: add this to your mobile.css:
```
[css]
body .gform_wrapper .gform_body input[type="text"] {
    width: 300px;
}
```
Posted 12 years ago on Sunday September 23, 2012 | Permalink
wmcdonald
Member

WOW thanks! Appreciate your help! Thank you.

Posted 12 years ago on Monday September 24, 2012 | Permalink

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