Post-map-repost Marketo Referral Form

[dmartinijr]

I'm trying to submit a form twice via Marketo. The first submit should post all of the original data. The second submit should remap some of the form values. For some reason the form just gets stuck at "Please wait" when submitting. No errors - nothing. Can someone help me?

<script src="/js/forms2/js/forms2.min.js"></script> 
<form id="mktoForm_id" style="max-width:100%;"></form>

<script>
  MktoForms2.loadForm("/", "munchkinId", formId);

  MktoForms2.whenReady(function(form) {
    var originalValues;

    form.onSubmit(function(form) {
      originalValues = form.getValues(); // stores original values in variable
    })

    form.onSuccess(function(vals, thankYouURL) {
      this.onSuccess(); // clear onSuccess for 2nd run

      this.setValues({
        'FirstName': originalValues['referralFirstName'],
        'LastName': originalValues['referralLastName'],
        'Email': originalValues['referralEmail'],
        'Company': originalValues['referralCompanyName'],
        'referralFirstName': '',
        'referralLastName': '',
        'referralEmail': '',
        'referralCompanyName': '',
        'referralPhoneNumber': ''
      }); // remaps values for second submit

      this.submit(); // submits it again
    }.bind(form));

  });
</script>

[Darshil_Shah1]

Well, you're missing setting the '_mkt_trk' to null during the 2nd form post in the onSuccess method (and a separate form for the person being referred won't be submitted).

See my comments in the script below!

<script src="/js/forms2/js/forms2.min.js"></script> 
<form id="mktoForm_1347" style="max-width:100%;"></form>

<script>
  MktoForms2.loadForm("/", "720-FTJ-659", 1347);

  MktoForms2.whenReady(function(form) {
    var originalValues;

    form.onSubmit(function(form) {
      originalValues = form.getValues(); // stores original values in variable
    })

    form.onSuccess(function(vals, thankYouURL) {
      this.onSuccess(); // clear onSuccess for 2nd run

      this.setValues({
        'FirstName': originalValues['referralFirstName'],
        'LastName': originalValues['referralLastName'],
        'Email': originalValues['referralEmail'],
        'Company': originalValues['referralCompanyName'],
        'referralFirstName': '', // These fields are required on the form but have no values assigned
        'referralLastName': '',
        'referralEmail': '',
        'referralCompanyName': '',
        'referralPhoneNumber': '',
        '_mkt_trk': '' //Clearing cookies before form-submit is critical for the referrer form setup
      }); // remaps values for second submit

      this.submit(); // submits it again
    }.bind(form));

  });
</script>

Also, I'd recommend using Sandy's newer and improved MktoForms2 :: Referral v2.0.2 script instead of this older version.

[dmartinijr]

Thank you very much for providing some insight here.

Unfortunately the form still does not post even when values are assigned to required fields & the "_mkt_trk" is set to null on the second post. Any other ideas? Is there any way to post errors to the console so I'm not just blindly guessing at what's wrong?

Also, is something so inherently wrong with the code that I should be using Sandy's newer version? I'll end up implementing the new code regardless, but just curious?

[Darshil_Shah1]

The newer version has a relatively smoother UX, i.e., unlike the previous version, the end user doesn't see on the web page that the form is being submitted twice. To give you more idea, with the older version, after the 1st submission, the data gets populated on the form for the 2nd form as per the script, and then it gets submitted again. All of this happens in front of the end-user (giving a sense of form being frozen for a very short moment after the 1st form post). However, with the V2, the form submission is much smoother, and the end user won't even notice that the form is being submitted twice.

[dmartinijr]

Thanks! This is very helpful. I will certainly work towards implementing the V2 of the code - but I'd like to at least get this V1 working since I believe I'm very close.

Any additional ideas as to why this would fail? Revised code below & updated JSFiddle for testing. Anything to do with hidden fields?

<script src="/js/forms2/js/forms2.min.js"></script> 
<form id="mktoForm_1347" style="max-width:100%;"></form>

<script>
  MktoForms2.loadForm("/", "720-FTJ-659", 1347);

  MktoForms2.whenReady(function(form) {
    var originalValues;

    form.addHiddenFields({
      '_mkt_trk': ''
    });

    form.onSubmit(function(form) {
      originalValues = form.getValues(); // stores original values in variable
    });

    form.onSuccess(function(vals, thankYouURL) {
      this.onSuccess(); // clear onSuccess for 2nd run

      this.setValues({
        'FirstName': originalValues['referralFirstName'],
        'LastName': originalValues['referralLastName'],
        'Email': originalValues['referralEmail'],
        'Company': originalValues['referralCompanyName'],
        '_mkt_trk': '' //clears MKTO cookie
      }); // remaps values for second submit

      this.submit(); // submits it again
    }.bind(form));

  });
</script>

[SanfordWhiteman]

Where in that code are you ensuring Required fields are not empty?

Also please at least move your code to CodePen as jsFiddle doesn’t have a raw testing (debug) mode that I know of.

[dmartinijr]

Since the fields are required to begin with, and I'm not changing or manipulating their values in any way, there shouldn't be any reason to force assign them a value. I've tried this method to rule it out, and ultimately reverted the code back because it was unnecessary. 

So oddly enough, the code runs on Codepen successfully. The same code still fails in my live environment & on JSFiddle. What the heck?

https://codepen.io/dmartinijr/pen/VwdNmaK?editors=1111

[SanfordWhiteman]

---

Since the fields are required to begin with, and I'm not changing or manipulating their values in any way, there shouldn't be any reason to force assign them a value.

---

In the current code, yes. In your previous code you were blanking out the values. And each time you submit, the fields are validated, though depending on how your event listeners are written the “The field is required” error may not be displayed.

jsFiddle’s IFRAME execution method is different from CodePen’s. One of the reasons I switched to CodePen years ago is Debug View, which eliminates the IFRAME completely to emulate a standalone site.

[SanfordWhiteman]

What is your live page URL?

[SanfordWhiteman]

Like Darshil says, please don’t use this code. Anything on jsFiddle is way outdated and all the latest snippets are on my CodePen.

In any case, the problem here is that you’re trying to submit the form (the second submit, on behalf of the referral) with required fields empty. That won’t work, so it fails silently.