Hugo+Netlify站点表单可提交但无法跳转至确认页的求助

我之前也踩过Netlify表单跳转的坑，结合你的情况，给你几个实用的排查和解决方向：

1. 强制禁用Netlify的AJAX自动提交 #

Netlify默认会给表单启用AJAX提交，这会导致页面不刷新也不跳转。你可以在表单标签里添加data-netlify-ajax="false"属性，强制让表单用传统的POST方式提交，这样就能触发action指定的跳转了。修改后的表单开头应该是这样：

<form id="contact-form" name="contact-form" data-netlify="true" data-netlify-ajax="false" method="post" role="form" action="{{ .URL }}formsuccess">

这是最常见的解决方法，建议先试试这个。

2. 确认action路径的正确性 #

虽然你说锚点能访问，但Hugo的{{ .URL }}可能会生成带末尾斜杠或者不带的路径，导致拼接后的formsuccess路径不符合预期。比如：

• 如果当前页面URL是/contact/，{{ .URL }}formsuccess会变成/contact/formsuccess
• 如果你的确认页是根目录下的/formsuccess/，那路径就错了

可以尝试用绝对路径代替模板变量，比如直接写action="/formsuccess/"，或者用Hugo的全局变量确保路径正确：

action="{{ site.BaseURL }}formsuccess"

另外要确认formsuccess页面部署后确实能访问，没有404错误。

3. 检查Netlify表单的识别状态 #

Netlify是通过解析部署时的HTML来识别表单的，如果你的表单是Hugo动态生成的（比如在partial或者短代码里），有时候会出现识别不完整的情况。可以先把渲染后的静态HTML表单代码复制出来，单独放到一个静态页面测试，看跳转是否生效：

• 如果静态页面能正常跳转，说明是Hugo模板渲染的问题，检查模板里有没有影响HTML结构的代码
• 如果静态页面也不行，那可能是Netlify的配置问题，去Netlify后台的Forms页面确认表单已经被正确识别

4. 排查自定义JS的拦截 #

看看你的网站有没有自定义的JavaScript代码监听了表单的submit事件，并且调用了event.preventDefault()，这会阻止表单的默认提交行为，导致页面不跳转。可以暂时移除所有自定义JS，测试表单是否能正常跳转，逐步排查找到问题代码。

内容的提问来源于stack exchange，提问作者Jakob Jan Kamminga