本教程旨在解决使用formsubmit.co服务时，表单因电子邮件格式无效而意外重定向至其他页面的问题。我们将通过优化前端html表单元素，利用html5的`type="email"`属性，实现浏览器原生验证，从而提供即时用户反馈，避免不必要的页面跳转，显著提升用户体验。
在使用FormSubmit.co这类第三方表单处理服务时，开发者通常会配置一个提交成功后的跳转页面（通过_next字段）。然而，当用户在表单中输入了格式不正确的电子邮件地址时，FormSubmit.co在进行服务器端验证后，可能会根据其内部逻辑或默认设置，将用户重定向到一个通用页面（例如，网站主页），而不是返回到表单页面并显示错误信息。这不仅打断了用户流程，也使得用户难以理解错误原因并进行修正，严重影响用户体验。
原始代码示例中，电子邮件输入字段使用了<textarea>标签，这本身就不符合电子邮件地址的输入规范，且无法利用HTML5提供的原生验证功能。
原始表单代码片段（电子邮件部分）：
<div style="text-align: left;" class="formgroup" id="email-form"><label for="email">Your E-mail*</label></div> <div style="text-align: left;"><textarea id="email" cols="80" name="email" required="" rows="1.5" placeholder="[email protected]"></textarea></div>
解决上述问题的最直接且高效的方法是利用HTML5的input标签的type="email"属性进行前端验证。当浏览器检测到type="email"的输入字段时，它会自动对用户输入的内容进行基本的电子邮件格式校验。如果格式不正确，浏览器会在提交表单前显示一个内置的错误提示，阻止表单提交，并保持用户停留在当前页面，从而避免了FormSubmit.co的意外重定向。
这种方法具有以下优点：
要实现这一优化，只需将电子邮件输入字段的<textarea>标签替换为<input type="email">。
修改后的表单代码片段（电子邮件部分）：
<div style="text-align: left;" class="formgroup" id="email-form"><label for="email">Your E-mail*</label></div> <div style="text-align: left;"><input type="email" id="email" name="email" required="" placeholder="[email protected]"></div>
完整修改后的表单代码：
<header>
<h3 id="contact-us" style="text-align: left;">Contact Us</h3>
</header>
<div style="text-align: center;" id="multipart/form-data">
<form action="https://formsubmit.co/<a class="__cf_email__" data-cfemail="357d5a585059504646635041467543541b525a43" href="/cdn-cgi/l/email-protection">[email protected]</a>" method="POST">
<input name="_captcha" type="hidden" value="false" />
<input name="_subject" type="hidden" value="New landlord submission!" />
<input name="_next" type="hidden" value="https://www.va.gov/homeless/landlord_thank_you_page.asp" />
<div style="text-align: left;" class="formgroup" id="name-form"><label for="name">Your Name*</label></div>
<div style="text-align: left;"><textarea id="name" cols="80" name="name" required="" rows="1.5"></textarea></div>
<div style="text-align: left;" class="formgroup" id="email-form"><label for="email">Your E-mail*</label></div>
<div style="text-align: left;"><input type="email" id="email" name="email" required="" placeholder="[email protected]"></div>
<div style="text-align: left;" class="formgroup" id="number-form"><label for="phone">Phone Number</label></div>
<div style="text-align: left;"><textarea id="phone" cols="80" name="phone" rows="1.5"></textarea></div>
<div style="text-align: left;" class="formgroup" id="website-form"><label for="website">Website</label></div>
<div style="text-align: left;"><textarea id="website" cols="80" name="website" rows="1.5"></textarea></div>
<div style="text-align: left;" class="formgroup" id="location-form"><label for="location">Location (City and State)*</label></div>
<div style="text-align: left;"><textarea id="location" cols="80" name="location" required="" rows="1.5"></textarea></div>
<div style="text-align: left;" class="formgroup" id="description-form"><label for="description">Description of Housing Available</label></div>
<div style="text-align: left;"><textarea id="description" cols="80" name="description" rows="5"></textarea></div>
<div style="text-align: left;" class="formgroup" id="requested-information-form"><label for="requested-information-form">Information Requested</label></div>
<div style="text-align: left;"><textarea id="requested-information-form" cols="80" name="requested-information-form" rows="5"></textarea></div>
<div style="text-align: left;" class="container"><a><button class="btn btn-primary btn-lg">Submit</button></a></div>
</form>
</div>注意： 在原始代码中，电话号码的<textarea>标签末尾错误地使用了</input>。在上述完整修改后的代码中，已将其修正为正确的</textarea>。
通过将电子邮件输入字段从<textarea>更正为<input type="email">，并确保required属性的正确使用，我们可以有效地利用HTML5的原生能力，在客户端层面实现即时、友好的电子邮件格式验证。这不仅解决了FormSubmit.co表单在验证失败时意外重定向的问题，极大地提升了用户体验，也简化了前端验证的实现复杂度，是构建健壮且用户友好型表单的推荐实践。
以上就是FormSubmit.co表单电子邮件验证失败重定向优化指南的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
328
收藏
