Embedded Form Thank You Redirect

[James_Rubin]

Hi, 

We are using an embedded form on our website. We're testing the form in a 3rd-party pop-up, so it's running simultaneously with a mirror campaign on a Marketo landing page. We'd like to redirect the thank you page back to the standard Marketo thank you page. 

Here's the embed code I'm using.

MktoForms2.whenReady(function(form){

var formEl = form.getFormElem()[0];

var submitEl = formEl.querySelector('button[type="submit"]');

form.onSuccess(function(vals,tyURL){ 

    var loc = document.createElement('A'); 

    loc.href = tyURL; 

    loc.pathname = [loc.pathname,"thank-you"].join("/"); 

    document.location.href = loc.pathname + loc.search + loc.hash;

Any help would be appreciated. Thanks. -J

[James_Rubin]

Great thanks. We don't really care about the OM conversion; it's a means to an end...

One question. This form is being used in multiple campaigns, I'm not sure setting it to default will achieve the desired results. Most campaigns default to a generic thank you page, but this is different. Is there a way to force it to redirect to the specific thank you page set up for this campaign?

[SanfordWhiteman]

We don't really care about the OM conversion

I'd remove the OM conversion code completely, then, as it'll be misleading.

Is there a way to force it to redirect to the specific thank you page set up for this campaign?

Well, the concept of a Per-Campaign Thank You URL doesn't really exist in any built-in way.

There are Per-Form Thank Yous (either a single TY URL or multiple possible URLs using Advanced/Add Choice). And there are Per-LP Thank Yous.

What do you mean by Per-Campaign exactly?

[James_Rubin]

Sorry, what I meant was, this form is used by multiple landing pages, so defaulting to the per-Form Thank You for this Form is probably not going to work.

Maybe the easiest thing to do is just clone this form, set it to the desired thank you page, and use the simple snippet you recommended. 

[SanfordWhiteman]

Maybe the easiest thing to do is just clone this form, set it to the desired thank you page, and use the simple snippet you recommended. 

Ooh, no, I would never advise cloning the form for this.

Use a CMS page variable to set the Thank You URL. Then the CMS outputs that variable into the JS.

[James_Rubin]

I don't think that will work. The form is embedded into the OptinMonster pop-up which is set to display on a subset of pages on the site, based on a URL parameter, e.g. URL includes "product." 

Why not just create a form for this specific use case and set the default thank you to the specific page we want?

[SanfordWhiteman]

Then have the Thank You URL be part of the OM embed code instead. Put it in a JS variable.

I'd never clone forms just to set Thank Yous. Maintenance nightmare.

[James_Rubin]

Ok. This solved it:

MktoForms2.whenReady(function(form){
var formEl = form.getFormElem()[0];
var submitEl = formEl.querySelector('button[type="submit"]');
form.onSuccess(function(vals,tyURL){ 
    var loc = document.createElement('A'); 
    loc.href = tyURL; 
    window.location.replace("https://my-special-thank-you-page");‍‍‍‍‍‍‍

Thanks for the coaching!

[James_Rubin]

<script src="//app-ab27.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_xxxx"></form>
<script>MktoForms2.loadForm("//app-ab27.marketo.com", "xxx-xxx-xxxx", xxxx);</script>
 
<script>
MktoForms2.whenReady(function(form){
var formEl = form.getFormElem()[0];
var submitEl = formEl.querySelector('button[type="submit"]');
form.onSuccess(function(vals,tyURL){ 
    var loc = document.createElement('A'); 
    loc.href = tyURL; 
    loc.pathname = [loc.pathname,"thank-you"].join("/"); 
    document.location.href = loc.pathname + loc.search + loc.hash;
 /* // Get the form's jQuery element and hide it
 */
form.getFormElem().hide();
 /* // show confirmation
  */
document.getElementById('optinmonster-form-success').style.opacity = 1;
// Trigger a conversion of the form.
om{{id}}.Listeners.convert();
// Close the campaign.
om{{id}}.startClose();
 
                          /* // Return false to prevent the submission handler from taking the
lead to the follow up url
 */
  return false;
   });
 }); 
<div id="optinmonster-form-success" style="color:#fff;text-
align:left;opacity:0;transition: all 0.3s ease;">YOUR SUCCESS MESSAGE HERE</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[SanfordWhiteman]

OK (you can go back and delete the unhighlighted code btw).

So right now, you're deliberately overriding the the default behavior.

    var loc = document.createElement('A');
    loc.href = tyURL;
    loc.pathname = [loc.pathname,"thank-you"].join("/");     
    document.location.href = loc.pathname + loc.search + loc.hash;‍‍‍‍‍‍‍‍

This is appending the string /thank-you to the Thank You URL as set on the form (or on the LP), then redirecting to the new URL.

If you don't want to override the URL, then just

    document.location.href = tyURL;‍‍

uses the default URL.

You should also realize that trying to fire an OM conversion at the same time as redirecting is doomed to be unreliable. Whether it works or not is entirely dependent on browser and network conditions.

[SanfordWhiteman]

Please highlight your code (here and in the original post) with the Advanced Editor's syntax highlighter. I'm not even going to try to read it otherwise.

[SanfordWhiteman]

Can you please highlight your code using the Advanced Editor's syntax highlighter so it's readable?

I can already see you don't have a complete block of JS -- you don't have closing braces and parens in there.