How to style gravity forms | Rhys Hughes

How to style gravity forms

Gravity forms looks pretty bad out of the box.

Luckily for you I will give you the code it make it look nice, like in the image above.

If you are more experienced then just visit their documentation website, they provide pre-made CSS classes for us. If you don’t know what that is, just read below and I’ll baby you through.

If you would prefer to watch my video tutorial, go ahead and do that.

 

How to make fields go into rows/columns of your choosing

Click Forms > Select the form of your choice > Select the field > Appearance > Custom CSS Class.

 

 

 

So, if you’d like two columns, use gf_left_half and gf_right_half in your first two fields, and repeat for as many fields as necessary.

If you want thirds, use gf_left_third, gf_middle_third_ and gf_right_third in your first three fields.

How to hide field labels, and just use placeholder text

This option is actually disabled by default. That’s because it’s not recommended, people using screen readers or those with poor eyesight might actually have a hard time seeing your form. So you’re only doing this to make your form look cool.

Open your functions.php in WordPress and enter this line of code at the top, after <?php is opened

add_filter( ‘gform_enable_field_label_visibility_settings’, ‘__return_true’ );

Your file should look something like this.

This now unlocks the option to hide field labels, which you can find under appearance for each form. Bear in mind, each time you update your theme, this line of code will get removed, but it will not change your existing forms.

 

Here’s the CSS you’ll need

Cool, now you’ve got the right columns and field labels set to how you want. Now it’s just CSS. You need to enter this code in your custom CSS area for your website.

/* This is styling the Contact Form Button */
#gform_submit_button_1 {
    color: #fff;
    background-color: #00A759;
    border: 1px solid transparent !important;
    cursor: pointer;
    outline: none;
    text-align: center;
    text-decoration: none;
    background-image: none !important;
    padding: 7px 50px 7px 50px;
    font-size: 18px;
    font-family: Source Sans Pro,sans-serif;
    font-weight: 400;
    -webkit-transition-duration: 1.0s; /* Safari */
    transition-duration: 1.0s;
    border-radius: 3px;
}
/* This is styling the Contact Form Button Hover */
#gform_submit_button_1:hover {
    background-color: #4cc18a; /* Green */
    color: white;
}
/* This is styling the contact form */
body #gform_wrapper_1 {
    border: 1px solid red ;
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #bbb;
    border-top-color: rgb(187, 187, 187);
    border-top-style: solid;
    border-top-width: 1px;
    border-right-color: rgb(187, 187, 187);
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: rgb(187, 187, 187);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: rgb(187, 187, 187);
    border-left-style: solid;
    border-left-width: 1px;
}
/* This removes margins from the top rows of the form */
#field_1_1, #field_1_2, #field_1_3, #field_1_5 {
    margin-top: 0px;
}
/* This centres the button in my contact form */
div.gform_footer.top_label {
text-align: center;
}

 Changing the colour of your form confirmation/error text

In addition to above, you might need to change the colour of the confirmation or error messages, depending on what background you chose. Here’s the CSS.
/* This makes the error text on my form white instead of red */
.gform_wrapper div.validation_error, .gform_wrapper .validation_message, #gform_confirmation_message_1 {
    color: #ffffff;
    font-size: 18px;
    padding: 10px 10px 10px 10px;
    text-align: center;
}
If it’s not working for you, check your form ID, and change the code above, from 1, to that ID number.
And that’s it! Your form should look exactly like mine, and you can just play around with this code to suit you.
Let me know if you have any questions.

Click Here to Leave a Comment Below

Leave a Reply: