Help Wordpress contact form 7 issue with input widths on radio buttons?

Question

Hi all fellow wordpressers

I'd like to customize the width of the radio buttons on contact form 7. Is there a way to tell the radio buttons to be a different width to the input fields in the css.

When I put a width on the input fields I don't want this to apply to the radio buttons.

Thanks for all your help

Regards judi

Answer 1

Hi, @judi!

You can assign a class to the radio button in your form template on the settings page. Then open the Contact Form 7's CSS stylesheet file, possibly located at:

/wp-content/plugins/contact-form-7/stylesheet.css

and setup css rules for the input with class "radio":

input.my_radio {
width: 140px;
}

To assign a class to radio input or to checkbox input use:

[radio your-eyes-color class:my_radio "brown" "green" "blue"]

Above code will generate the markup:

<input type="radio" name="your-eyes-color" class="my_radio" value="brown" /> brown
<input type="radio" name="your-eyes-color" class="my_radio" value="green" /> green
<input type="radio" name="your-eyes-color" class="my_radio" value="blue" /> blue

Learn more at Contact Form 7 website. Good luck!