Slider field in Marketo Forms

[Debroop_Garai]

Hi there,

Can anyone help in understanding if we can use "slider field type" in marketo forms as a "Yes/No" field type?

Currently for the Slider field type we can set the "Min" and "Max" value as "0" and "1" and later control by a smart campaign to change the data value respectively. But how do we prevent displaying the number "1" and "2" in the form and instead  display "Yes" and "No" when the slider is toggled in the form by the user? Any CSS/JS which can control this?

Any suggestions/recommendations would be highly appreciated.

Thanks,

Debroop.

[Grégoire_Miche2]

You would use css :before pseudo elements to alter the values displayed.

or some JS to replace them.

-Greg

[Casey_Grimes]

The process to do this is pretty straightforward--use radio buttons instead of a slider and style them accordingly to achieve the same effect. No JS needed and easier if just recording yes/no.

[Grégoire_Miche2]

Hi Courtney,

I suppose Debroop likes the visual effect of a slider

-Greg

[Casey_Grimes]

Why not both? http://rubentd.com/radios-to-slider/

[Debroop_Garai]

Like this idea as well. Can be implemented in a different context also...thanks

[SanfordWhiteman]

I just played with this for a bit and -- contrary to my typical conclusion -- you should go straight to a widget library like the one Courtney points to instead of trying to touch up the Marketo slider.

The specific way Marketo captures range events makes relabeling the text labels very complex.. not impossible, but beyond reasonable effort given that I don't think type=range is the proper UX for this anyway. If you want a two-value, mutually exclusive widget, that's a radio button set. Styling it as a toggle/switch is a frill, but basic horizontal radios have the same meaning, while a range is meant to signify, well, numeric values (and an end user doesn't think of "no" and "yes" as on a numeric continuum, even if computers store boolean values as 0 or 1).

[SanfordWhiteman]

... aaaaaand then I decided to get it working anyway: MktoForms2 :: Custom Range Labels

Still don't think the UX is proper, but in technical terms this implements your spec.

[Debroop_Garai]

Thanks Sanford...I think this will work for me

Do we have any alternative CSS for this, or rather you would suggest to embed the Html piece into the landing page where this form would reside?

[SanfordWhiteman]

There isn't any CSS, just JS.

You would put that JS from the CodePen in a <script> tag after the embed code (on a non-Marketo LP) or just inside the closing </body> (on a Marketo LP).

Naturally, substitute your field name where I used "Unsubscribed".