Label for radio buttons inline

Get Help
,
1

I have two radio buttons inline and the label is on top. I would like the label to be to the left inline so everything is on one line. I would also like to style the radio buttons to be larger, have a bigger stroke and be a different color.

2

Hi Gus,

To make the radio button labels appear inline with the radio buttons, you can add the following CSS to your site. You can do this through your theme’s Additional CSS section (Appearance > Customize > Additional CSS) or in your child theme’s stylesheet.

Replace FORMID in the code below with your actual form ID. You can find your form ID by looking at the form shortcode or when you edit the form, the ID will be shown in the browser address bar.

Here is the CSS you need:

/* Make radio button choices display horizontally with label inline */
.gform_wrapper_FORMID .gfield_radio li {
    display: inline-flex;
    align-items: center;
    margin-right: 1.5em;
}

/* Ensure label flows next to the radio, not below */
.gform_wrapper_FORMID .gfield_radio .gchoice label {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin: 0;
}

Replace FORMID with your form ID number:

FORMID is just a placeholder. For example, if your form ID is 5, you would change it to 5 and the code would look like .gform_wrapper_5 .gfield_radio li.

To find your form ID, go to Forms in your WordPress dashboard, hover over the form name, and look at the link. The number at the end of the URL is your form ID.

Give it a try, and let me know how that goes! :grinning_face_with_smiling_eyes: