Slider field in Marketo Forms

Debroop_Garai
Level 2

Slider field in Marketo Forms

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.

9 REPLIES 9
Grégoire_Miche2
Level 10

Re: Slider field in Marketo Forms

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

or some JS to replace them.

-Greg

Casey_Grimes
Level 10

Re: Slider field in Marketo Forms

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
Level 10

Re: Slider field in Marketo Forms

Hi Courtney,

I suppose Debroop likes the visual effect of a slider

-Greg

Casey_Grimes
Level 10

Re: Slider field in Marketo Forms

Debroop_Garai
Level 2

Re: Slider field in Marketo Forms

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

SanfordWhiteman
Level 10 - Community Moderator

Re: Slider field in Marketo Forms

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
Level 10 - Community Moderator

Re: Slider field in Marketo Forms

... 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
Level 2

Re: Slider field in Marketo Forms

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
Level 10 - Community Moderator

Re: Slider field in Marketo Forms

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".