Vue.js Netlify form submission can't redirect to custom thank you page

Question

Creating a form in Vue.JS and connecting with Netlify's form submission handler. Can't redirect to a custom thank you page. Netlify's default thank you page always appears.

Searched for awhile on doc and forums but to no avail.

I have the routes setup correctly to handle the new page /success. Below you can see I have added an action to the form which should be in the correct format.

I think the problem is either something to do with Vue.JS routing or Netlify's way of identifying if /success is an active component/page. As in the netlify docs it says if the action path is not valid then it will automatically default back to netlify's thank you page.

https://github.com/DanielGibsonOrchid/freightlegend

https://freightlegend.netlify.com/

        <form 
          action="/success"
          class="get-started-form" 
          name="get-started" 
          method="post" 
          data-netlify="true"
          data-netlify-honeypot="bot-field"
        >
          <input type="hidden" name="bot-field" />
          <input type="hidden" name="form-name" value="get-started" />
          <div class="form-content flex">

            <input type="text" name="name" placeholder="Your name" class="input-main" required />
            <input type="email" name="email" placeholder="Your email" class="input-main input-margin" required />
            <div class="select-div">
              <select name="country" class="input-main">
                <option value="New Zealand">New Zealand</option>
                <option value="Australia">Australia</option>
                <option value="USA">USA</option>
                <option value="Other">Other</option>
              </select>
            </div>
          </div>
          <input type="submit" class="btn-main" />
          <!-- <button type="submit" class="btn-main">Submit Query</button> -->
        </form>

`public/_redirects`

/locale.json  /locales/us.json  302  Country=us
/locale.json  /locales/au.json  302  Country=au
/locale.json  /locales/nz.json  302  Country=nz

/*            /index.html       200

See https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations and https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps — Phil, Oct 13 '19 at 23:02
From the linked duplicate, see [this answer](https://stackoverflow.com/a/58368467/283366) — Phil, Oct 13 '19 at 23:06
Hi Phil, yes I saw that answer before and tested it already but it still doesn't work. When submitting the form it still shows the default netlify success page even though I have set the form's "action" to a custom page. Any help would be appreciated — Daniel Gibson, Oct 14 '19 at 20:37
You couldn't have seen it before because I only just added it. Please show your up-to-date `_redirects` configuration since the one in your GitHub project does not have the SPA redirect — Phil, Oct 14 '19 at 20:40
Hi Phil, thanks for the reply. It's now updated on the github repo. I've been searching around for a long time on this issue, I know I had seen the answer about the redirect before but it must have been someone on another forum. I know it fixes the page refreshing 404 which is useful but since it didn't fix this submissions issue I removed it from the repo temporarily. Please do let me know if you manage to find a fix for this, thanks — Daniel Gibson, Oct 15 '19 at 02:29
Have you read this ~ https://www.netlify.com/blog/2018/09/07/how-to-integrate-netlify-forms-in-a-vue-app/ — Phil, Oct 15 '19 at 04:24

Phil · Accepted Answer · 2019-10-15T05:46:49.920

Looks like you've done just about everything possible. At this stage, I'd have to guess that using a custom success page with a SPA is not something Netlify handles.

I would instead use an AJAX form submission.

For example

<form @submit.prevent="handleFormSubmit" ...>

methods: {
  async handleFormSubmit ($event) {
    const form = $event.target
    const body = new URLSearchParams(new FormData(form))
    try {
      const res = await fetch(form.action, { method: 'POST', body })
      if (res.ok) {
        this.$router.push({ name: 'thanks' })
      } else {
        throw res
      }
    } catch (err) {
      console.error(err)
      // you don't have an error page but maybe you should add one
    }
  }
}

Vue.js Netlify form submission can't redirect to custom thank you page

public/_redirects

1 Answers1

`public/_redirects`