Opt-in checkbox for Progressive Profiling Form

[Anonymous]

Hi all,

I'm trying to get an opt-in checkbox to appear as the last item of a progressive profiling form on this Nokia page. Does anyone have any recommendations to do this? It's set up so that if country selected is Canada, the checkbox is not ticked by default.

Cheers

Hakim

[Anonymous]

Terribly sorry. Accidental character add to URL. This should be the URL: https://pages.nokia.com/1255.Bank-of-the-future.html​

To explain further, when building the form, the checkbox at the top that allows people to opt into receiving communications is dependent on the value they select for country. If it's Canada, by default, the box is unchecked (due to Canadian Anti-Spam Law). For every other country, this box is ticked by default. My issue is that due to the nature of the way forms are built in marketo, I can't drag this box to the bottom (right before the submit button but outside of the form). It works if it is placed at the top but when at the bottom, it acts as if it's part of the progressive form and won't display. 

Hope this clarifies my question a bit.

2299065421

[Anonymous]

Hi Hakim,

Thank you for the clarification. As you have found, you can't put a "regular" field below the progressive profiling fields by dragging it. This might be possible to do with special code (as Dory suggests) and I've just sent a note to my coding expert to ask.

I wasn't aware that you could cause a checkbox to be checked or unchecked based on the value in another field. How are you doing this? And is it definitely working? When I selected Canada on your form the Opt-in Checkbox remained unchecked.

The only way I can think of to make the checkbox pre-checked for Canada but not for other countries is to create a second field for that purpose - Opt-In for Canada, for example. Then use visibility rules so that if Canada is chosen for Country, the pre-checked Opt-In for Canada field is displayed. And if any other country is chosen, the regular Opt-In field (not pre-checked) appears. And then use a triggered campaign to copy the value from the Opt-In Canada field to the regular Opt-In field.

Denise

[SanfordWhiteman]

When I selected Canada on your form the Opt-in Checkbox remained unchecked.

What browser were you using for this test?  It should be unchecked for Canada.  The design is that it is forcibly unchecked for Canada (requiring manual intervention) otherwise forcibly checked.  Works even on IE 8 for me.

I'm not crazy about the UX, though.  I would feel better if the checkbox weren't displayed at all if the lead had not yet chosen a country.  The fact that you can see it going from unchecked to checked is a bit too literal for me.

[SanfordWhiteman]

Denise, using basic JS it's simple to link the state of a checkbox to the value of a select. The current code on Hakim's site is a bit more generic than I'd like, but there's no need for separate server-side fields (nor even *any* server-side fields, since the checkbox can be in a rich text area).

[Dory_Viscoglio]

Looks like I'll have to study up on my *basic* JS, cause I use plenty of server-side fields for those pesky Canadians

[SanfordWhiteman]

Admittedly, "basic" is pretty ambiguous with JavaScript, as copy-and-pasting buggy code seems to constitute "intermediate" JS knowledge on some resumes I've seen.

Anyway, check this demo: MktoForms2 :: Opt-In Client Side (an expansion of an earlier example).  Here, the Opt-In checkbox is contained within a Rich Text area and doesn't have a corresponding server-side field in Marketo, but it still must be checked for the form to submit. 

In the optInDefaultsByCountry object, you set any special defaults by country. Here, I've configured it so:

• when a Country has not been chosen yet (empty value '') the Opt-In checkbox is grayed out
• if Country has been chosen as Canada ('CA'), then the checkbox is left unchecked, requiring a manual click by the lead
• if any other Country has been chosen, Opt-In is checked automatically, though it can be unchecked manually
• once a user has either manually checked or unchecked the checkbox, leave it under user control from then on (to avoid surprising the user by undoing their manual choice)

Obviously there are other ways to manage the widget interactions, but this gives a few ideas for how inputs that only exist client-side can add needed functionality.

[Dory_Viscoglio]

Ah, Sanford Whiteman​ might have some fancy code to bring that field down even though it's involved in progressive profiling. But, that is one reason I dislike some of Marketo's progressive profiling functionality.

You could also have a field that is shown conditionally based on existing field values (sort of a progressive profiling hack).

[Anonymous]

Hi Hakim,

Could you be more specific about what the problem is?

I don't see the form on that page, by the way.

Denise

[Anonymous]

Sorry: See my post below for correct URL and better explanation

[SanfordWhiteman]

Quite simple:

MktoForms2.whenReady(function(form){
  var formEl = form.getFormElem()[0],
  inputRows = formEl.querySelectorAll('.mktoFormRow'),
  buttonRow = formEl.querySelector('.mktoButtonRow'), 
  optInRow = [].filter.call(inputRows,function(itm){ return itm.querySelector('INPUT#mktoOptin');}).shift();
  formEl.insertBefore(optInRow,buttonRow);
});

I'm uncomfortable with the way you're managing the checkbox value.  You should use Forms 2.0 API setValues/getValues as much as possible or it's not guaranteed to continue to work (though it does work now).

[Anonymous]

Thank you Sanford Whiteman​, Dory Viscogliosi​ and Denise Greenberg​ for your help on this. I'm going to try out Sanford's recommendation and get back to you all in a few days. If this works I'll be sure to mark it correct and distribute my knowledge to the rest. As you can imagine, I took over this Marketo instance and these forms were already created. I wasn't satisfied with having the checkbox at the top and now that you've mentioned this I'll go take a look for sure!

Cheers

Hakim

[SanfordWhiteman]

I agree, I don't see a Marketo form there.