Horizontal Radio Buttons with centred labels

Jo_Pitts1
Level 10 - Community Advisor

Horizontal Radio Buttons with centred labels

Good afternoon all.

I've seen a few discussions around horizontal radio button layouts with labels in various positions but I've yet to come across a universal and well explained answer.

What I would like to achieve is a set of radio buttons that are arranged horizontally with the labels either above or below each button (un-decided yet), with the buttons equidistantly spaced.

I'm presuming this can be done with some custom CSS in the form itself, but my fiddling hasn't gotten me where I want.

Any assistance would be much appreciated.

Cheers

Jo

3 REPLIES 3
Gerard_Donnell4
Level 10

Re: Horizontal Radio Buttons with centred labels

Hi Jo Pitts​,

I'm guessing its something like this you are trying to do?

Screen Shot 2018-02-20 at 07.42.02.png

I haven't seen this done in Marketo myself.  What is the use case? Is there no way you could embed a survey using something like Qualtrics are Survey Monkey.  This can be achieved in seconds using those.

Thanks,

Gerard

Grégoire_Miche2
Level 10

Re: Horizontal Radio Buttons with centred labels

The basic HTML layout of radio buttons is

<div ...

     <input...

     <label...

     <input...

     <label...

     <input...

</div>

There is no wrapper arounf each couple of input+label, which will make it a little difficult without some JS to do it. Sanford Whiteman​ will be the guru for this.

Once the wrappers are added, it becomes a mere CSS exercise.

-Greg

SanfordWhiteman
Level 10 - Community Moderator

Re: Horizontal Radio Buttons with centred labels

Start from here: MktoForms2 :: Radios - Horizontal