Gravity Forms CSS Styling & Formating

Hi WPMU Team,
I was chatting with @Adam Czajczyk in today's live support. I am running X Theme and I am trying to get Gravity Forms to look cleaner and more aesthetically pleasing. The main things I am looking to address is getting my form styles set. I contacted the support team at X Theme see this link to read the thread.

What I am looking to accomplish:

  1. Borders and background of forms – I want to change the color of the border around forms and have a solid color that is a background for the entire form area. This will then contrast with the actual form fields.
  2. Altering States of Forms –I want to change the background of a form field based on the state. Example: When hovering the fields background fades to a darker shade, when typing in the field the font may be slightly larger, when field contains valid content the background would be a light green if invalid a light red .
  3. Form Labels Inside Fields – Instead of the extremely busy form with labels above the fields and sometimes below, I want it to be within the field and not above.
  4. Changing The Font Attributes – I want to change the font attributes (i.e font face, spacing, weight, size, and color) of the form elements so that they are consistent with my overall theme.
  5. Alignment, Spacing & Padding - I would like form element spacing to be even and clean as to not have ridiculously large gaps or overlap between fields and/or elements.

I created a page for testing Gravity Forms called, Testing Gravity Forms. I was previously using Contact Form 7 so you may see other forms on my site that are not built with Gravity Forms. I am wanting to transition to Gravity Forms due to the enhanced feature set and integrations. The modifications I have made (the ones below) for some reason seem to also be affecting the way forms generated by Contact Form 7 appear on some pages.

Below is the CSS code that the X Theme Team provided which can also be seen in the post linked to above. I am not able to get this code to work properly. To say the least, I am having difficulting understanding the code. I have tried unsuccessfully to edit the code by testing individual selectors.

body .gform_wrapper input[type=text], body .gform_wrapper input[type=url], body .gform_wrapper input[type=email], body .gform_wrapper input[type=tel], body .gform_wrapper input[type=number], body .gform_wrapper input[type=password], body .gform_wrapper select, body .gform_wrapper textarea {
	border-color: yellow;
}

body .gform_wrapper input[type=text]:hover, body .gform_wrapper input[type=url]:hover, body .gform_wrapper input[type=email]:hover, body .gform_wrapper input[type=tel]:hover, body .gform_wrapper input[type=number]:hover, body .gform_wrapper input[type=password]:hover, body .gform_wrapper select:hover, body .gform_wrapper textarea:hover {
	border-color: green;
}

body .gform_wrapper input[type=text]:active, body .gform_wrapper input[type=url]:active, body .gform_wrapper input[type=email]:active, body .gform_wrapper input[type=tel]:active, body .gform_wrapper input[type=number]:active, body .gform_wrapper input[type=password]:active, body .gform_wrapper select:active, body .gform_wrapper textarea:active, body .gform_wrapper input[type=text]:focus, body .gform_wrapper input[type=url]:focus, body .gform_wrapper input[type=email]:focus, body .gform_wrapper input[type=tel]:focus, body .gform_wrapper input[type=number]:focus, body .gform_wrapper input[type=password]:focus, body .gform_wrapper select:focus, body .gform_wrapper textarea:focus {
	border-color: red;
}
.entry-wrap {
    font-family: "Lato",sans-serif !important;
}
body .gform_wrapper .top_label .gfield_label, body .gform_wrapper .left_label .gfield_label, body .gform_wrapper .right_label .gfield_label {
    font-weight: 400;
    font-size: 1.2em;
}

.gform_wrapper .gfield_error .ginput_complex .ginput_right input[type=email], .gform_wrapper .gfield_error .ginput_complex .ginput_right input[type=number], .gform_wrapper .gfield_error .ginput_complex .ginput_right input[type=password], .gform_wrapper .gfield_error .ginput_complex .ginput_right input[type=tel], .gform_wrapper .gfield_error .ginput_complex .ginput_right input[type=text], .gform_wrapper .gfield_error .ginput_complex .ginput_right input[type=url], .gform_wrapper .ginput_complex input[type=email], .gform_wrapper .ginput_complex input[type=number], .gform_wrapper .ginput_complex input[type=password], .gform_wrapper .ginput_complex input[type=tel], .gform_wrapper .ginput_complex input[type=text], .gform_wrapper .ginput_complex input[type=url] {
    font-size: 1em;
}

I have granted you all access to my sites admin via the WPMU Dashboard plugin. I greatly appreciate your help.

Thank you,

- Brandon Lipman

  • Nastia

    Hello @Brandon, I hope you are well today!

    I have tested the CSS code you provided and see that is not working with X theme.

    These modifications will require a lot of custom coding and this is outside the scope of our support we can provide here in the forum.

    If you not familiar with CSS code, please feel free to post a job in Jobs & Pros so a skillful developer can do the s for you.

    Let us know if you require any additional information!

    Have a nice day and take care :slight_smile:

    Kind Regards,
    Nastia

  • Michael Bissett

    Just to follow up from today's chat session, some of the code that was shared above wasn't working, and some of it could've used some consolidation, said code is as follows:

    body .gform_wrapper.gform_wrapper label.gfield_label {
    display: none;
    }
    
    .has_first_name.has_last_name label {
    display: none;
    }
    
    .gform_wrapper {
    background: #EDEFED;
    }
    
    body .gform_wrapper .ginput_container textarea,
    body .gform_wrapper .ginput_container input {
    font-size: 1.5em !important;
    font-weight: 300 !important;
    }
    
    body .gform_wrapper input,
    body .gform_wrapper select,
    body .gform_wrapper textarea {
    border-color: yellow;
    }
    
    body .gform_wrapper input:hover,
    body .gform_wrapper select:hover,
    body .gform_wrapper textarea:hover {
    border-color: green;
    }
    
    body .gform_wrapper input:active,
    body .gform_wrapper select:active,
    body .gform_wrapper textarea:active,
    body .gform_wrapper input:focus,
    body .gform_wrapper select:focus,
    body .gform_wrapper textarea:focus {
    border-color: red;
    }
    
    body .gform_wrapper .gform_footer input[type=submit] {
    border-color: black;
    }

    Kind Regards,
    Michael

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.