Toggle fields in Marketo forms

Question

Hello All,
 
We would like to display toggle fields to switch to yes/no in our Marketo form embedded on our website.

Is it something to set up in Marketo, like adding CSS in the form or could it be done only in the code of our website?
 
Has anyone already perform this?
 
Thank you.
Regards,
Vincent

Dave_Roberts · Accepted Answer

Can you provide a link to your website with a form styled this way as a reference?

I agree w/ Sanford, this should be possible with some CSS and maybe a little JS to fill in the gaps. I'd be happy to have a look at how this is setup on website for context and think about how that might translate into a Marketo form.

In terms of how/where it's implemented (on the form vs. on the website) I'll normally recommend setting up on the website-end.
In a nutshell:

If you add it to the form, it'll travel with the form wherever it goes (on a Marketo LP, on the website, etc). MOST times this creates some kind of styling conflict b/c your Marketo LP templates and your website templates will often have different sets of form styling to work around.
If you add it to the website, the styles will translate to ANY form that you put on a page rather than "just this one form". This keeps you from having to copy/paste a bunch of CSS from form-to-form in Marketo as well.

If you'll need to use any JS to support this, I'd recommend adding that on the website end as well. While it is technically possible to add script to a Marketo form, it's not a best practice in my experience.

SanfordWhiteman · Answer

That “toggle button” widget is not a standard HTML input type. (There already is an HTML input type that has the same semantics, a single <input type="checkbox">.)

When you see a custom toggle button, it’s typically hiding the actual standard checkbox behind it and managing its checked/unchecked states using CSS label elements against a colorful background. To get fancier animations between states, some versions use JS as well.

There’s no particular reason why you can’t use such a custom widget within a Marketo form. I would not advise trying to bundle their CSS and JS in Marketo Form Editor — this will be incredibly fragile. Rather, include custom CSS/JS right after the embed code.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded