How can I wrap 3 GF radio button fields under one div?

Get Help
,
1

Hi,

How can I wrap 3 GF radio button fields under one div? My goal is to have a colored background around these 3 radio button fields to separate this section from the main form. I figure if the radio button fields are inside a div I can style the div to give it a different color background.

Something like this screenshot: https://snipboard.io/xd5y2N.jpg

Thanks, Greg

2

Ever since Gravity Forms version 2.5 you can now group fields into the same row by dragging a field to the left or right of a field. When you do this you can then target the grid ID for the row and add CSS.

3

@517design1 To target the ID we would need to use vanilla JS or jQuery, so to keep things simple, here is a CSS snippet.

.gform_wrapper.gravity-theme .gform_fields {
    grid-column-gap: 0%;
}
.gform_wrapper.gravity-theme .gfield.gfield--width-third {
    background: #d4d4d4;
    padding: 5% 4% 10% 4%;
}
.gform_wrapper.gravity-theme legend {
    position: relative;
    top: 15%;
}

For your form design specifically, you will want to make the label bold, increase the font, and adjust the vertical positioning. So replace the third snippet with the one below.

.gform_wrapper.gravity-theme legend {
    position: relative;
    top: 30%;
    font-weight: bold;
    font-size: 20px;
}

Hope this helps.

1 Like
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.