Toggle fields in Marketo forms

[Vincent_Ferugl1]

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

[SanfordWhiteman]

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.

[Vincent_Ferugl1]

Hello @SanfordWhiteman ,

Thank you for your useful feedback.

Ok to not add some script in Marketo form and add it instead on the website.

Sorry, I can't accept your answer as the solution, there is an error message.

Kind Regards,

Vincent

[Dave_Roberts · Accepted solution]

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.

[Vincent_Ferugl1]

Hello @Dave_Roberts ,

Thank you for your feedback.

For the moment, we don't have a kind of feature on our website, we just have a mock-up to create a new preference center.

Example below of some fields.

I'll follow your recommendations and tell our website team that the dev must be done only on the website.

Kind Regards,

Vincent