Divi Design Tips Blog

Frustration Vented (#02) : CSS Styling On Gravity Form

Here's how we used some basic CSS to style a Gravity Form in WordPress using Divi.

What We Created: A Gravity Form In Divi
How We Did It: WordPress, Divi, Gravity Forms, Gravity Forms Image Choices, Divi Gravity Forms and some CSS
Main Features: Better UX and mobile display
Plugins We Used:

Late last year, we built a new website for a client using Divi and WordPress. One of the requirements was a ‘quote builder’ form, which we built using Gravity Forms,

We used the main Gravity Forms plugin, and Divi Gravity Forms to place and style the form on the page.

We also used Gravity Forms Image Choices to allow us to have a question in the form that displayed the choices as images.

It all looked good, apart from two things.

1. The selected image choice had a black border, which was very difficult to see

To get around this, we used the following code:

.image-choices-field .image-choices-choice-image-wrap {
width: 150px!important;
height: 150px!important;
}

.image-choices-choice-selected {
border-color: #86f144!important;
}


2. On mobile, we wanted the next question to be visible as soon as you selected an answer.

To get round this, we adjusted the image sized and margins using this code:

@media only screen and (max-width: 736px) {
.image-choices-field .image-choices-choice-image-wrap {
width: 100px!important;
height: 65px!important;
margin-bottom: 2px!important;
margin-top: 2px!important;
}
}

Here are the results…

BEFORE CSS: Once selected, the image has a black border, which you can see but not very well.

AFTER CSS: The selected image now has a green border. We also made the image choice area wider.

ON MOBILE: Using conditional logic, the next question only displays once an image is selected. Before we wrote the CSS the next question was off-screen.

About The Divi Design Tips Blog

We use Divi as our primary way to build WordPress websites. Our main focus in always on the design, ‘look and feel’ and the user experience of the websites we create. 

The Divi Design Tips Blog isn’t intended as a how-to-use Divi guide, as there are loads of great resources out there for that already. 

Instead, we launched the blog series as our way of giving an insight into some of the ways we use Divi, associated plugins, and custom CSS, Javascript and PHP, to get things looking – and working – how we want them for our clients.