As a CSS hack I am having a problem turning my GravityForm into a piece of art. As it is now, I could have done the same thing using ContactForm7. So who wants to help me fall in love with Gravity Forms? ;)
This is my fugly form now:
http://www.kalan.ca/?page_id=367&preview=true
I'd be fine having the above form look like GF's contact form. Simple and clean.
http://www.gravityhelp.com/contact-us/
thanks for the help
Can you post a live URL to your form, the one above its a preview link.
So, first off - these generic element selectors from your theme is the root cause of how things are looking: Screenshot
The Contact Us form you linked to, has the "Top Label" placement of the labels, yours has the "Left Aligned". So you can change that via the form settings in the formbuilder. Doing so will give you this result: Screenshot
Can you provide more info as to what you are trying to achieve as far as the form fields go?
Thx.
The link I sent http://www.kalan.ca/contact-kalan/
will replace http://www.kalan.ca/contact-us/
I re-aligned the labels but as far as customizing this more I'd like the form to fit the space better, (name fields are bleeding over) limit the length of some fields, increase font size and have the field highlight red when inputting data. And space the description on the name fields better as it is not aligned properly as is.
If I want the Phone input field and the Email input field on the same line is this a change I can do from within the form settings? or is this CSS?
Sorry....this would take me hours to figure out. Thx for the help.
You can use our ready classes to try to display the fields you want inline, just note that you will need to use the top label placement for them to work:
http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes
Also, keep in mind that Gravity Forms is inheriting the styles from your theme and following the rules that are in place. You might want to consider hiring a professional to customize and overwrite your theme styles appropriately. You can post on our job board or I'd be happy to do this for you at a flat-rate if you'd like to email me: rob@rocketgenius.com
http://www.gravityhelp.com/forums/forum/job-board
Otherwise, all I can give you are the CSS selectors to use and target in terms of guidance. If you had one thing to change it probably wouldn't be a big deal for me to pop in a snippet for you to use, but your theme has a bit of generic element styling going on, and will need some CSS mastery to do so effectively and to achieve the details you are looking for, without getting rid of the generic selectors I pointed out in the screenshot above.
Also, in this Screenshot, something is injecting break tags into the form's code. This will either be coming from the theme or another plugin and it's something you will want to remedy as that could also cause some of your spacing woes.
By default the browser should automatically add that. I'm seeing it in Chrome when clicking into an input and the textarea. It's a subtle change, but it's there. See this Screenshot
Your theme has a :focus selector in place to use box-shadow. Keep in mind that IE6/7/8 will not render box-shadow because it's a CSS3 property.
This is how you could select only Gravity Forms inputs on focus:
[css]
.gform_wrapper input[type="text"]:focus, .gform_wrapper input[type="url"]:focus, .gform_wrapper input[type="email"]:focus, .gform_wrapper input[type="tel"]:focus, .gform_wrapper input[type="number"]:focus, .gform_wrapper input[type="password"]:focus, .gform_wrapper textarea:focus {}