SOLVED

Re: Page reloads in Vue 3 after form is submitted.

Go to solution
Aaron_Krug
Level 2

Page reloads in Vue 3 after form is submitted.

I am trying to create a Vue 3 Component  for Marketo Form. The form is loading fine and submitting fine but for some reason the page reloads even though I am doing a `return false` in the OnSuccess method. If I change the settings in Marketo for the "Thank you page" to external url from stay on page  it will redirect to that url. It seems the "return false" is being ignored as the alert is displayed when the form is submitted. Thanks you for any help.

 

<template>
  <form :id="formId"></form>
</template>

<script>

export default {
  props: {
    mktoFormId: {
      type: Number,
      required: true,
    },
  },

  setup(props, { slots }) {
    const formId = "mktoForm_" + props.mktoFormId;

    if (window.MktoForms2) {
      MktoForms2.loadForm(
        "//app-ab13.marketo.com",
        "736-VEE-917",
        props.mktoFormId,
        function (mktoForm) {
          mktoForm.onSuccess(function () {
            alert("Success");
            return false;
          });
        }
      );

      MktoForms2.whenReady(function (mktoForm) {
        console.log("Load");
      });
    }

    return {
      formId,
    };
  },
};
</script>

 

Tags (2)
3 ACCEPTED SOLUTIONS

Accepted Solutions
Aaron_Krug
Level 2

Re: Page reloads in Vue 3 after form is submitted.

Here you go.

https://www.retirepathva.com/contact/subscribe 

The code I posted above is as basic as I could get trying to figure out the problem. This page has more code and should show a success message when submitted.

View solution in original post

SanfordWhiteman
Level 10 - Community Moderator

Re: Page reloads in Vue 3 after form is submitted.

Because you have another onSuccess listener loading via GTM, and that one redirects.

View solution in original post

Aaron_Krug
Level 2

Re: Page reloads in Vue 3 after form is submitted.

Thanks the helped fix it. Adding what I changed to fix it for others.

I had the following code in a tag in Google Tag Manager. I removed the 'eventCallback'.

form.onSuccess(function handleSuccess (values, followUpUrl) {
  window.dataLayer.push({
    "event": "mkto.form.success",
    "mkto.form.id": form.getId(),
    "mkto.form.values": values,
    "mkto.form.followUpUrl": followUpUrl,
    "eventCallback": function () {
      document.location.href = followUpUrl;
    },
    "eventTimeout" : 3000
  });
  return false;
});
 

View solution in original post

5 REPLIES 5
SanfordWhiteman
Level 10 - Community Moderator

Re: Page reloads in Vue 3 after form is submitted.

Can you link to a page where this is rendered please? Otherwise we have to set up a Vue environment just to test.

Aaron_Krug
Level 2

Re: Page reloads in Vue 3 after form is submitted.

Here you go.

https://www.retirepathva.com/contact/subscribe 

The code I posted above is as basic as I could get trying to figure out the problem. This page has more code and should show a success message when submitted.

SanfordWhiteman
Level 10 - Community Moderator

Re: Page reloads in Vue 3 after form is submitted.

Because you have another onSuccess listener loading via GTM, and that one redirects.
Aaron_Krug
Level 2

Re: Page reloads in Vue 3 after form is submitted.

Thanks the helped fix it. Adding what I changed to fix it for others.

I had the following code in a tag in Google Tag Manager. I removed the 'eventCallback'.

form.onSuccess(function handleSuccess (values, followUpUrl) {
  window.dataLayer.push({
    "event": "mkto.form.success",
    "mkto.form.id": form.getId(),
    "mkto.form.values": values,
    "mkto.form.followUpUrl": followUpUrl,
    "eventCallback": function () {
      document.location.href = followUpUrl;
    },
    "eventTimeout" : 3000
  });
  return false;
});
 
SanfordWhiteman
Level 10 - Community Moderator

Re: Page reloads in Vue 3 after form is submitted.

Except people should not just be removing that line. That’s the correct implementation if you’re logging to the GTM dataLayer and not staying on the page afterward. It’ll confuse people to say the eventCallback isn’t necessary.

 

It should be clear that “not redirecting“ and “deliberately redirecting“ are in conflict with each other.