Embedded Form Thank You Redirect

Highlighted
Level 1

Embedded Form Thank You Redirect

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

11 REPLIES 11
Highlighted
Level 10 - Community Moderator

Re: Embedded Form Thank You Redirect

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.

Level 10 - Community Moderator

Re: Embedded Form Thank You Redirect

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.

Highlighted
Level 1

Re: Embedded Form Thank You Redirect

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

Re: Embedded Form Thank You Redirect

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.

Highlighted
Level 1

Re: Embedded Form Thank You Redirect

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?

Highlighted
Level 10 - Community Moderator

Re: Embedded Form Thank You Redirect

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?

Highlighted
Level 1

Re: Embedded Form Thank You Redirect

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. 

Highlighted
Level 10 - Community Moderator

Re: Embedded Form Thank You Redirect

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.

Highlighted
Level 1

Re: Embedded Form Thank You Redirect

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?