By rcls on

Hi,

I'm using Webform to create a three-step order form. Our first page we have radio inputs with three options. I would like to alter these three to have an HTML structure where I could insert content inside the label and use the label:checked in CSS to actually see which one gets selected and hide the input[type=radio] button. Basically:

<label>
   <h2>Option 1</h2>
   <p>This is a description of this option</p>
   <input type="radio" name="webform-option1">
</label>

Can I somehow, with a hook or otherwise, modify the HTML structure of one single field in the webform? I won't use Javascript as I cannot force it upon a client.

⋅ Categories: Drupal 7.x

Comments

nevets’s picture

nevets commented

I suspect if you do that the webform module will not "see" which one was checked.

rcls’s picture

rcls commented

Actually you can. Wrapping radio or checkbox inputs in label element, the label works as a button for it all.

onejam’s picture

onejam commented

Maybe you are going about it the wrong way. Perhaps you need to use webform conditionals for the radio options?

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien