A confirmation popup bar for Marketo Forms

Y'all have seen this type of double-confirmation popup, I'm sure:

It's helpful if you want to give end users a little additional nudge, for example to use their legal name, a working email address, and so on — stuff that you can't force them to do but maybe can guilt them into.☺

No one but me would claim it's “easy” to add this functionality to a Marketo form. It only took an hour to whip it up, but as you know, I waste spend more time in Forms 2.0 API-land than anybody else. Lucky for you, I've provided a big leg up by linking to a working CodePen (below) that you can spin off for your own site.

Most of the heavy lifting is done in CSS: overlaying the background, positioning the popup bar, changing the color of the Cancel/Go Back button.

Aside from managing the visibility of the bar (display: block or display: none) there's not a huge amount happening in JavaScript.

• Since the new buttons should match the style of the Submit button,[1] I decided to go heavy on cloneNode, copying the existing wrapper and buttons instead of building new ones from scratch.
• Then a click event listener to handle Cancel or Confirm using the Forms API submittable accessor method.
• Finally, a Forms 2.0 onValidate listener to manage the bar and it's good to go.

Here's the running demo:

The usual caveat

If you're using other custom onValidate or onSubmit JavaScript, you need to position the popup logic correctly within the rest of your code. (Same as with any custom forms behaviors: you have to know the context you're deploying in so you don't break/skip one feature while adding another.)

Notes

[1] I used the Forms 2.0 Simple theme here, and you'll need to make appropriate changes to integrate with your theme.