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

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.