[英]Vue.js Netlify form submission can't redirect to custom thank you page
在 Vue.JS 中创建表单并与 Netlify 的表单提交处理程序连接。 无法重定向到自定义感谢页面。 Netlify 的默认感谢页面总是出现。
在文档和论坛上搜索了一段时间,但无济于事。
我正确设置了路由以处理新页面/成功。 您可以在下面看到我在表单中添加了一个动作,该动作应该是正确的格式。
我认为问题要么与 Vue.JS 路由有关,要么与 Netlify 识别 /success 是否为活动组件/页面的方式有关。 正如在 netlify 文档中所说,如果操作路径无效,那么它将自动默认返回到 netlify 的感谢页面。
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
看起来你已经做了所有可能的事情。 在这个阶段,我不得不猜测使用带有 SPA 的自定义成功页面不是 Netlify 处理的。
我会改为使用AJAX 表单提交。
例如
<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
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.