Making GF look sexy. « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

kdmmdk1
Member

OK...this is not as easy as everyone says.

All I want to do is create a simple box to capture customer email addresses. I can design this and drop the code into WP but it looks god awful.

I want nice rounded corners, a big sexy email capture box and an even sexier 'Subscribe' button but I am not a CSS whiz.

Is there any cut and paste type samples or are we stuck with ugly forms? The last thing I want to do is spend endless hours playing around in Firebug in attempts to get it right.

Go to the bottom of GravityForms.com and you'lll see the exact example of what I want to achieve. A nice and simple email capture field.

Anyone? Bueller? ..... Bueller?

Posted 12 years ago on Wednesday March 7, 2012 | Permalink
Rob Harrell
Member

This is all possible via CSS, however there are no cut and paste samples. Can you post a link to your form and I can provide you with something to get you started selector-wise so you can modify to your liking.

Posted 12 years ago on Wednesday March 7, 2012 | Permalink
kdmmdk1
Member

thanks for the quick response.

I have made a quick form on this page:
http://vancouverrealestate.ca/testing-page

Ideally I'd like it to look like the form look like the email capture form at the bottom of the gravityforms.com index page.

I am using thesis so any CSS I will have to add to the custom.css file. Not sure if that matters at all.

Thanks Rob.

Posted 12 years ago on Wednesday March 7, 2012 | Permalink

OK, try dropping this in. This should get you the overall same look. We are also targeting only the .gform_body class of Form ID 3 and also only the input with the ID of input_3_1 as well as only the .gform_footer class of Form ID 3. For your button you have two options. You can create your own image (the one on the GF site is an image) or style it. I noticed your theme is styling the button as it is now.

[css]
#gform_wrapper_3 .gform_body {
float: left;
}
#input_3_1 {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background-color: white;
color: #333;
border: 1px solid #CCC;
font-size: 14px!important;
box-shadow: inset 0px 0px 5px #e5e5e5;
-moz-box-shadow: inset 0px 0px 5px #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #e5e5e5;
word-spacing: 0.4pt;
letter-spacing: 0.2pt;
color: #ADADAD;
height: 60px;
width: 500px;
font-size: 24px!important;
line-height: 62px;
padding: 0 10px;
}
#gform_wrapper_3 .gform_footer {
float: right;
clear: none;
}

Posted 12 years ago on Thursday March 8, 2012 | Permalink

Gadarian
Member

more please! Thanks Rob. Your reply is great.

Posted 12 years ago on Tuesday April 3, 2012 | Permalink
Travis Ramos
Member

OK, where do exactly do I paste the above code in the css theme file? I'm really struggling to make things look better and would love a quick tutorial on how to make all the fields like the one above. Thank you,

Posted 12 years ago on Thursday November 29, 2012 | Permalink
Chris Hajer
Key Master

The CSS posted by Rob will go anywhere in your theme's style.css (normally.) Some themes provide a special theme options page where you can enter your own CSS. If your theme has this, you can paste the code there. Otherwise, just at the end of your theme's style.css.

http://www.gravityhelp.com/documentation/page/Where_Do_I_Put_This_Code%3F#CSS

Posted 12 years ago on Thursday November 29, 2012 | Permalink
Travis Ramos
Member

Chris, thank you for your swift reply! I don't have familiarity with CSS and how it works - it seems simple enough, but I've tried various ways to get it to work and keep coming up empty handed. I've appended it to the end of the style.css file, insert it into my theme's CSS box, searched to make sure I don't have a custom.css file, and nothing I do seems to change the plain-box styling of the forms I've created. ANy further tips other than finding a developer that knows CSS? Thank you,

Posted 12 years ago on Thursday November 29, 2012 | Permalink
WDT
Member

I am also having this issue, I have pasted the styles within my stylesheet and tried to pinpoint the divs and have had no luck whatsoever. I have a custom theme, but that shouldn't matter. It should take the styles and it is not at all.

Posted 12 years ago on Thursday November 29, 2012 | Permalink
Chris Hajer
Key Master

Travis and WDT, please share a link to the page on your site, where the form is embedded, and ensure you have added to CSS to one of your theme's stylesheets, so we can see what is going on.

On lines 1, 4 and 24, there are specific form and field related IDs which you will have to change to make it work on your form. Rob's example targeted form 3, and on line 4, specifically field 1 in form 3. If your form is not form ID 3, and the field is not field 1, that CSS will not help you. You need to customize it for your form ID and field ID.

Posted 12 years ago on Saturday December 1, 2012 | Permalink