FormSubmit.co表单电子邮件验证失败重定向优化指南

本教程旨在解决使用formsubmit.co服务时，表单因电子邮件格式无效而意外重定向至其他页面的问题。我们将通过优化前端html表单元素，利用html5的`type="email"`属性，实现浏览器原生验证，从而提供即时用户反馈，避免不必要的页面跳转，显著提升用户体验。

理解问题：FormSubmit.co与重定向行为

在使用FormSubmit.co这类第三方表单处理服务时，开发者通常会配置一个提交成功后的跳转页面（通过_next字段）。然而，当用户在表单中输入了格式不正确的电子邮件地址时，FormSubmit.co在进行服务器端验证后，可能会根据其内部逻辑或默认设置，将用户重定向到一个通用页面（例如，网站主页），而不是返回到表单页面并显示错误信息。这不仅打断了用户流程，也使得用户难以理解错误原因并进行修正，严重影响用户体验。

原始代码示例中，电子邮件输入字段使用了标签，这本身就不符合电子邮件地址的输入规范，且无法利用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 type="email" 进行前端验证

解决上述问题的最直接且高效的方法是利用HTML5的input标签的type="email"属性进行前端验证。当浏览器检测到type="email"的输入字段时，它会自动对用户输入的内容进行基本的电子邮件格式校验。如果格式不正确，浏览器会在提交表单前显示一个内置的错误提示，阻止表单提交，并保持用户停留在当前页面，从而避免了FormSubmit.co的意外重定向。

这种方法具有以下优点：

即时反馈： 用户在提交前就能看到错误，无需等待服务器响应。
提升用户体验： 避免了不必要的页面跳转，用户可以在同一页面修改错误。
简单易实现： 仅需修改HTML代码，无需编写J*aScript。
浏览器原生支持： 兼容性良好，且通常具有良好的可访问性。

实施步骤与代码示例

要实现这一优化，只需将电子邮件输入字段的标签替换为<input type="email">。

Waifulabs

一键生成动漫二次元头像和插图

317 查看详情 Waifulabs

修改后的表单代码片段（电子邮件部分）：

<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>

注意： 在原始代码中，电话号码的标签末尾错误地使用了。在上述完整修改后的代码中，已将其修正为正确的。

注意事项与最佳实践

前端验证与后端验证： type="email" 提供了方便的前端验证，但它不能替代后端验证。FormSubmit.co作为后端服务，会进行自己的服务器端验证。前端验证是为了提供更好的用户体验，减少无效请求；后端验证则是确保数据完整性和安全性不可或缺的环节。
自定义错误消息： 不同的浏览器可能会显示不同的默认错误消息样式和内容。如果需要更统一或定制化的错误提示，可以通过CSS伪类（如:invalid, :valid）来样式化输入框，或者结合J*aScript（例如使用setCustomValidity()方法）来创建自定义的错误消息。
兼容性： 现代浏览器对type="email"有良好的支持。对于极少数旧版浏览器，type="email"会退化为type="text"，此时将失去原生验证功能，但表单提交仍能正常进行。
required属性： 结合required属性可以确保该字段必须填写。当字段为空时，浏览器也会阻止提交并提示用户。
placeholder属性： placeholder属性可以为用户提供输入示例，进一步指导用户正确填写。

总结

通过将电子邮件输入字段从更正为<input type="email">，并确保required属性的正确使用，我们可以有效地利用HTML5的原生能力，在客户端层面实现即时、友好的电子邮件格式验证。这不仅解决了FormSubmit.co表单在验证失败时意外重定向的问题，极大地提升了用户体验，也简化了前端验证的实现复杂度，是构建健壮且用户友好型表单的推荐实践。

以上就是FormSubmit.co表单电子邮件验证失败重定向优化指南的详细内容，更多请关注其它相关文章！

# 跳转 # 昌平网站建设管家 # 提供品牌营销推广 # 搜狗seo怎么做分类 # seo哪个环节重要 # seo四大境界 # 乳山网站优化团队 # 淘宝关键词排名是什么排名 # 门票推广方式和营销策略 # 山西环保营销培训推广 # 快速谷歌seo企业 # 这不 # 错误提示 # 自己的 # 不正确 # 自定义 # css # 重定向 # 电子邮件 # 表单 # html表单 # cdn # ai # 后端 # 浏览器 # html5 # go # 前端 # html # java # javascript

返回目录在线咨询

上一篇：利用CSS Z-index在地图上方叠加下拉菜单的教程
下一篇：Flexbox嵌套卡片布局如何实现_Flex direction与align-items优化方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。