Handy CSS hacks for Gravity Forms

Gravity Forms is a popular plugin for WordPress that allows you to create custom forms for your website. The plugin includes a wide range of styling options, but you can also use CSS to further customize the appearance of your forms. Here are some handy CSS hacks you can use to customize your Gravity Forms:

1. Change the font: You can change the font of your forms by adding the following code to your site's CSS: "font-family: 'your font name';"
2. Change the form color: You can change the color of your form by adding the following code to your site's CSS: "background-color: #hexcode;"
3. Change the button color: You can change the color of your submit button by adding the following code to your site's CSS: "input[type='submit'] {background-color: #hexcode;}"
4. Center the form: You can center your form on the page by adding the following code to your site's CSS: "form.gform_wrapper {margin: 0 auto;}"
5. Change the input field width: You can change the width of your input fields by adding the following code to your site's CSS: "input[type='text'] {width: pixels;}"
6. Add a border to the form: You can add a border to your form by adding the following code to your site's CSS: "form.gform_wrapper {border: 1px solid #hexcode;}"
7. Add a hover effect: You can add a hover effect, such as changing the color of a button when someone hovers over it, by adding the following code to your site's CSS: "input[type='submit']:hover {background-color: #hexcode;}"
8. Style radio and checkboxes: You can customize the appearance of radio and checkboxes in your form by adding the following code to your site's CSS: "input[type='radio'], input[type='checkbox'] {property: value;} "

It's important to note that to add custom CSS to your Gravity Forms, you will need to access your WordPress site's CSS editor and add the code to the appropriate area. Additionally, Gravity forms allow for custom styling for specific forms via the settings. It's also recommended to back up your website before making any changes to the site's code, in case something goes wrong. It's also a good idea to have a general understanding of CSS and its syntax before making any major changes, as it can make debugging and troubleshooting easier.

Read More

How to make the Gravity Forms field titles not be bold

 To disable to automatic bold setting on Gravity Forms field titles, add this CSS code to your WordPress theme:

body .gform_wrapper .gfield_label {

    font-weight: normal !important;

}

Read More

Aligning Gravity Forms survey responses side by side

The Gravity Forms plugin has a nice Survey add-on that can be installed. You can align the answers of the survey side by side if you wish so they are not stacked.

They are stacked on top of each other by default and the picture below will give you an idea of that.

 

If you wish to have the Gravity Forms survey form slightly more condensed as per the 1st question in the above example then all you need to do is a add a ready made CSS style. 

The custom CSS class to add is: gf_list_inline

You can add this by editing form and adding the text to the Custom CSS class as pictured below.

Read More

Custom CSS to use with Gravity Forms on dark background

Using the Gravity Forms plugin for WordPress is a great way to build some awesome forms. I recently added some forms to a page with a dark background. I found some text hard to read. I was able to fix this by adding the below custom CSS code...

body .gfield_description {
    color:#fff;
}

body .gf_step_label {
    color:#fff;
    font-size:20px;
font-weight:500;
line-height:1.4em;
}

body .validation_error {
    color:#fff!important;
}

body .gfield_label {
    color:#fff!important;
}

body .gfield gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_below field_description_below gfield_visibility_visible {
    color:#fff!important;
}

Read More

Add Star Rating to Gravity Forms

By adding the Survey module that comes with Gravity Forms, you can create star ratings. By default the star is pretty small but I found this code from GravityWP that makes them much bigger as pictured below.

Enter this custom CSS code:

.gsurvey-rating:not(:checked) > label, .gsurvey-rating:not(:checked) > label:hover, .gsurvey-rating:not(:checked) > label:hover ~ label, .gsurvey-rating:not(:checked) > label, .gsurvey-rating:not(:checked) > label:hover, .gsurvey-rating:not(:checked) > label:hover ~ label, .gsurvey-rating > input:checked ~ label {

width: 65px;

line-height: 50px;

background-size: 50px 50px;

color: rgba(221, 221, 221, 0) !important;

}

Read More

Transparent Fields With Gravity Forms

 Add this custom CSS and then set the class in the form you are building to:
“gf_custom_contact”

 

.gf_custom_contact input, .gf_custom_contact textarea, .gf_custom_contact textarea.large {

background-color:transparent !important;

Read More

Integrating Gravity forms with DIVI

If you are using the best forms plugin (Gravity Forms) with one of the best WordPress themes (DIVI), you will notice that they do not integrate very well together. A recent web design project required various forms to all look similar so I set to work on integrating the two. Adding the below code to your custom CSS box in DIVI theme options should be enough for a get DIVI looking forms powered by Gravity Forms.

div.entry-content .gform_wrapper form div.gform_body ul.gform_fields input,
div.entry-content .gform_wrapper form div.gform_body ul.gform_fields select {
margin-bottom: 0
}

body .gform_wrapper input {
 margin:-31px 0 -42px 0!important;
}
.entry-content .gform_wrapper input {
margin-bottom:-90px!important;
}

body .gform_wrapper h3.gform_title {
font-size:26px;
font-weight:500;
font-color:#00a94f;
}

body .gform_wrapper .gform_footer,body .gform_wrapper .gform_page_footer {
overflow:hidden;
text-align:right;
}

body .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),body .gform_wrapper textarea.textarea,body div.form_saved_message div.form_saved_message_emailform form input[type=text] {
background-color:#fff;
border: 1px solid #00a94f;;
-moz-border-radius:0;
-webkit-border-radius:0;
border-radius:0;
font-size:14px;
color:#00a94f;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
line-height:initial;
height:initial;
padding:6px 20px;
}

body .gform_wrapper select {
display:inline-block;
height:31px;
font-size:14px;
color:#999;
background:#eee;
border:none;
}

body .gform_wrapper .gform_footer input.button,body .gform_wrapper .gform_footer input[type=submit],body .gform_wrapper .gform_page_footer input.button,body .gform_wrapper .gform_page_footer input[type=submit],body .gform_wrapper input[type=button],body div.form_saved_message div.form_saved_message_emailform form input[type=submit] {
background:0 0;
font-size:20px;
font-weight:500;
line-height:1.4em;
font-family:inherit;
color:inherit;
border:2px solid;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-transition:all .2s;
-webkit-transition:all .2s;
transition:all .2s;
padding:5px 5px;
}

body div.form_saved_message div.form_saved_message_emailform form input[type=submit] {
margin-left:auto;
margin-right:auto;
}

body .gform_wrapper .gform_footer input[type=submit],body .gform_wrapper .gform_page_footer .button.gform_button,body .gform_wrapper .gform_page_footer .button.gform_next_button {
margin-right:0;
}

body .gform_wrapper .gform_footer input.button:hover,body .gform_wrapper .gform_footer input[type=submit]:hover,body .gform_wrapper .gform_page_footer input.button:hover,body .gform_wrapper .gform_page_footer input[type=submit]:hover,body .gform_wrapper input[type=button]:hover,body div.form_saved_message div.form_saved_message_emailform form input[type=submit]:hover {
cursor:pointer;
}

body .gform_wrapper .gform_fileupload_multifile input[type=button] {
font-size:14px;
}

body .gform_wrapper li.gfield.gfield_error.gfield_contains_required {
margin-top:0;
margin-bottom:0!important;
}

body .gform_wrapper li.gfield.gfield_error,body .gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {
background-color:transparent;
margin-bottom:0!important;
border:none;
padding:0!important;
}

body .gform_wrapper .top_label .gfield_error {
width:inherit;
}

body .gform_wrapper .gfield_error .gfield_label {
color:inherit;
}

body .gform_wrapper .top_label li.gfield.gfield_error.gf_left_third,body .gform_wrapper .top_label li.gfield.gfield_error.gf_middle_third,body .gform_wrapper .top_label li.gfield.gfield_error.gf_right_third {
width:32%;
}

body .gform_wrapper .datepicker {
width:17em!important;
margin-top:0;
margin-bottom:0!important;
line-height:initial;
height:initial;
padding:6px 20px;

}

body .gform_wrapper .gfield_date_day input,body .gform_wrapper .gfield_date_month input,body .gform_wrapper .gfield_date_year input,body .gform_wrapper .gfield_time_hour input,body .gform_wrapper .gfield_time_minute input {
padding-right:6px!important;
}

body .gform_wrapper .gfield_time_hour i {
width:25%;
}

body .gform_wrapper .gfield_date_day,body .gform_wrapper .gfield_date_month {
width:4.5em;
}

body .gform_wrapper .gfield_date_year {
width:5.5em!important;
}

body .gform_wrapper .gf_progressbar_percentage {
font-family:inherit;
}

@media max-width641px{
body .gform_wrapper .gform_page_footer .button.gform_button,body .gform_wrapper .gform_page_footer .button.gform_next_button,body .gform_wrapper .gform_page_footer .button.gform_previous_button {
margin:0 0 .5em;
}
}

@media min-width641px{
body .gform_wrapper .gform_footer a.gform_save_link,body .gform_wrapper .gform_page_footer a.gform_save_link {
float:left;
}
}

body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_required {color: transparent}

body .gform_wrapper input {
 margin:10px 0 0 0!important;
}

.entry-content .gform_wrapper input {
    margin-bottom: 0;
}

.gform_footer {margin: 0px !important;}

body .gform_wrapper ul li.gfield {
margin-top: 0 !important;
margin-bottom: 5px;
}
.gform_wrapper .top_label .gfield_label {
display: none;
}

#field_1_10 textarea#input_1_10 {
margin-top: 10px;
}
li#field_1_6 {
margin-bottom: 15px !important;
}

body .gform_wrapper textarea {
    height: 150px!important;
}

Read More

Reduce vertical spacing between Gravity Forms fields

To reduce the spacing between vertical forms fields you can remove the upper wrapper to push things up a bit, add this css code to your stylesheet.

body .gform_wrapper ul li.gfield {
margin-top: 0 !important;
margin-bottom: 15px;
}
.gform_wrapper .top_label .gfield_label {
display: none;
}

Read More

Hide the "required" * with Gravity Forms

If you want the * to not appear if a field is required but I still want to be able to use the "required" functionality. Add the following to your CSS file.

body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_required {color: transparent}

Read More

Add a background and border to Gravity Forms

 Want to add background and border with radius. Simply add this css code to your style.css file.

.gform_wrapper {
    background-color: #339999;
    border: 1px solid #112233;
    border-radius: 8px;
    padding: 20px;
}

Read More

Editing the Gravity Forms validation error with CSS

You can add and modify this CSS code to your stylesheet to change the look of the Validation Error message.

.gform_wrapper div.validation_error {
    color: #000 !important;
    font-size: 100% !important;
    font-weight: normal !important;
    border: 1px solid #e8e8e8 !important;
    padding: 1em 0px 1em 20px !important;
    } 1em 0px 1em 20px !important; 8 }

Read More

How to center align the Gravity Forms submit button

If you are looking to center align the Gravity Forms submit button then add this CSS code to your stylesheet.

div.gform_footer.top_label {
 text-align: center;
}

Read More

How to change colour of the Form Title with Gravity Forms

You can add following code to Quick CSS box.

gform_wrapper h3.gform_title { color: red; }

Read More