Jetpack Contact Form Radio Buttons formatting problem?

[Covenant Webmaster]

It seems there is a formatting problem using the Jetpack Contact Form plugin with Flexform. I’ve tried this with all other plugins disabled and get the same results. It happens with formatting radio buttons. I know, I know, I may just have to use Contact Form 7. But I’m handing this off to a client, and Jetpack’s forms are much more user friendly. Are you guys seeing this formatting problem too, or is it just me? Is there a solution? See screen cap below. It should have a section title (i.e. Missions) and then then radio buttons right beside the items below it. Thanks for any advice/help/suggestions!

[Swift Ideas – Ed]

Hi there,

If you send over a link to your site I’ll happily help out with some custom css!

Thanks,

– Ed

[Covenant Webmaster]

This reply has been marked as private.

[Swift Ideas – Ed]

Hi Rob,

Looks good! Glad you’re enjoying the theme.

This custom css should work with all the forms you use through the plugin.

Just add the following to Theme Options > General Options > Custom CSS:

label.grunion-radio-label {
display: inline-block;
text-align: left;
white-space: nowrap;
margin-bottom: 10px;
}
label.grunion-radio-label input[type='radio'] {
float: left;
display: inline;
margin: 0;
width: 25px;
margin-top: 3px;
}

Hope that helps!

– Ed

[Covenant Webmaster]

Beautiful! It works perfectly. I can’t thank you enough. I should have tested out some other Jetpack form options, too, but seeing this code, I’d imagine it’s fairly simple to figure how to modify it if, say, checkboxes aren’t formatting correctly. Thanks a ton. I’m loving the theme and the excellent support.

-Rob

[Swift Ideas – Ed]

You’re welcome, glad you’re happy!

– Ed