CODEWITHSUNDEEP
radio-buttongravity-forms-plugin
user1192309
user1192309

Reputation: 57

Gravity Forms - Radio buttons with individual descriptions

I have some radio buttons that need text descriptions for each choice so users know what they are choosing.

I would like to add an input field in the radio buttons options for each radio button option that can accept HTML. This then needs to be displayed within each radio list item. I've tried simply adding the details to a HTML area underneath, but this is not suitable for mobile screens as the details are independant from the radio choices and so do not appear under each radio when the screen is re-sized.

Upvotes: 0

Views: 1916

Answers (1)

Dave from Gravity Wiz
Dave from Gravity Wiz

Reputation: 2859

Have you considered including the description inside the Radio Button label? If you configure each choice label like so:

<div><span>First Choice</span><span>And this is the description.</div>

You could style it with the following CSS:

.ginput_container_radio input {
    vertical-align: bottom;
}

.ginput_container_radio label span {
    display: block;
}

.ginput_container_radio label span:nth-child(2) {
    opacity: 0.6;
    font-size: 0.9em;
}

And it'd look something like this:

Screenshot of Radio Button Field

Upvotes: 3

Related Questions