Radio buttons with individual paragraphs [RESOLVED]

Get Help
, ,
1

My form has radio buttons each with different content. For example, I have three horizontal radio buttons in three columns and each radio button has a checklist under it. I can style a row of radio buttons with and place an HTML Block under the row with three columns but it won’t work in responsive when each radio button will need the associated checklist under it. Is there some way to achieve the layout I need?

2

You should use conditional logic to render the checklist based on the radio selection.

3

I need to show each checklist under each radio button by default, not just when a specific radio button is selected.

Radio 1

  • List item
  • List item
  • List item
  • List item
  • List item

Radio 2

  • List item
  • List item
  • List item
  • List item
  • List item

Radio 3

  • List item
  • List item
  • List item
4

Can you send the URL?

5

It’s on a local development site for now but here’s a simple HTML example.

https://jsfiddle.net/yourbudweiser/kquwjgnh/6/

6

Instead of using flexbox perhaps you should use a responsive three column layout.

https://www.w3schools.com/howto/howto_css_three_columns.asp

Your CSS is set to 33% but that applies to all break points.

Apart from the three-column layout tutorial link above you could also try the CSS below with your current configuration. Again, without a direct link to your site it can be difficult to provide the exact CSS.

@media only screen and (max-width: 675px) {
.step {
    width:100%;
  }
}
7

Thanks but I am not looking for CSS help. The fiddle is a quick example I threw together to illustrate my original question which was how can I achieve that layout using the Gravity Forms radio button field? One row, three columns, each column with a radio button and content under it.

8

Yeah I’m not sure how to help. You’re at the mercy of Gravity Forms default layout. You’re not building an HTML form of your own and connecting it with your database.

The only way to make this work is using CSS to achieve this. Of course perhaps I’m misunderstanding.

Anyway sounds like I can’t be of help. Hopefully someone else will chime in and enlighten the both of us.

9

It’s not pretty but have you considered putting all that HTML in the radio button label?

Alternately, you can use the gform_field_choice_markup_pre_render filter to modify the HTML via PHP and target each choice individually.

10

Hi David,

Would it be possible for you to provide a simple example of using the gform_field_choice_markup_pre_render filter

The layout I am trying to accomplish is:

<li class='gchoice_10_5_0'>
    <input name='input_5' type='radio' value='Item 1|10'  id='choice_10_5_0' tabindex='1' />
    <label for='choice_10_5_0' id='label_10_5_0'>First Choice</label>
    <div>New html here</div>
</li>
11

Sure thing, Marc (@user561).

Something like this:

add_filter( 'gform_field_choice_markup_pre_render', function( $choice_markup, $choice ) {

    $search  = '</label>';
    $replace = $search;

    switch( $choice['value'] ) {
        case 'First Choice':
	        $replace .= '<div>New html here for First Choice!</div>';
            break;
        case 'Second Choice':
	        $replace .= '<div>New html here for Second Choice!</div>';
            break;
        case 'Third Choice':
	        $replace .= '<div>New html here for Third Choice!</div>';
            break;
    }

    $choice_markup = str_replace( $search, $replace, $choice_markup );

    return $choice_markup;
}, 10, 2 );

Will give you something like this:

1312×1012

@chrishajer Feel free to add that to the filter doc if you think it’s useful.

1 Like
12

Thanks a lot David!

I actually came up with this after playing around for hours!

    add_filter( 'gform_field_choice_markup_pre_render_4', function ( $choice_markup, $choice, $field, $value ) {
    if ( $field->get_input_type() == 'radio' && rgar( $choice, 'text' ) == 'Option 1' ) {
        $description = '<div>New html here</div>';
        return str_replace( "</label>", "</label>$description", $choice_markup );
    }

    return $choice_markup;
}, 10, 4 );
1 Like