Adding Images to a Radio Button set

Jo_Pitts1
Level 10 - Community Advisor

Adding Images to a Radio Button set

Hi there.

I'm working on a Marketo form, and would like to be able to have images next to radio buttons.

This example shows checkboxes below house types, and I want to do basically the same thing, but radio buttons not checkboxes.

https://www.auranga.co.nz/enquire/

2 REPLIES 2
SanfordWhiteman
Level 10 - Community Moderator

Re: Adding Images to a Radio Button set

You'd need to either [a] inject the row of images as a Rich Text area above the set of radios and then align the two sections; [b] move both images and radios into a grid layout after the form is rendered; [c] try to use :before and :after elements only.

But gotta say: if you're new to CSS, it's weird that you're charged with reproducing a quite complex and elegant custom form. I don't mean that in a bad way, just a practical one... you're not going to be able to get a form that repro's your model, and even CSS guru would take awhile to get it right.

Have you thought about using the Forms JS API to submit the existing form instead? (You'd need to hire a developer for this, but it would be a pretty quick job compared to trying to build that whole thing as a Marketo form.)

Jo_Pitts1
Level 10 - Community Advisor

Re: Adding Images to a Radio Button set

Sanford,

I'm using this as a baptism by fire learning opportunity (my favorite kind )

There are many challenges I am facing (and enjoying working through)

  • Images/Radio Buttons
  • Styling on the submit button (including hover state)
  • Getting the font right
  • etc.

And yes, it means I need to lean on experts, however so far I've been lucky that experts (well an expert (i.e. you) ) have been very generous with their knowledge).  I figure it is pay back for the many many forum questions I've answered over the years on various topics