将'success'消息添加到 HTML 表单

Question

我有一个HTML表单，我是自定义编码，它与drip(电子邮件平台(表单集成。我试图让它显示"成功"消息(例如"感谢您注册我们的时事通讯"。

在提交操作后调整 HTML 以允许该消息的最佳/最干净方法是什么？

这是我到目前为止的代码：

<form class="subscribe-form" form action="https://www.getdrip.com/forms/0123456789/submissions" method="post" data-drip-embedded-form="0123456789">
<div style="width:25vw">
<input class="subscribe-form__input" type="email" id="drip-email" name="fields[email]" placeholder="Email" value="" >
</div>
<button class="subscribe-form__submit" type="submit" data-drip-attribute="sign-up-button">Sign Up</button>
</form>

谢谢！

Answer 1

首先创建消息并正确设置其样式。也许像这样...

<form class="subscribe-form" form action="https://www.getdrip.com/forms/0123456789/submissions" method="post" data-drip-embedded-form="0123456789">
<div style="width:25vw">
<input class="subscribe-form__input" type="email" id="drip-email" name="fields[email]" placeholder="Email" value="" >
</div>
<button class="subscribe-form__submit" type="submit" data-drip-attribute="sign-up-button">Sign Up</button>
</form>
<p class="subscribe-form__thanks">Thanks for subscribing!</p>

如果您愿意，您甚至可以将感谢包含在div中，并添加一个"竖起大拇指"图标来填充空间。

一旦你对你的设计感到满意，把它添加到你的CSS中(如果你使用的是SASS/SCSS，你可以把它嵌套在元素中(：

hide {
display: none;
}

并将该类添加到您的"谢谢"消息中，如下所示：

<p class="subscribe-form__thanks hide">Thanks for subscribing!</p>

现在一切都设置好了，你只需要使用 JavaScript 从"谢谢"消息中删除hide类，并将其添加到表单中，这将显示消息并隐藏表单。

为了简洁起见，我将使用 JQuery，但 Vanilla JS 也可以很好地工作！

$(".subscribe-form__submit").onClick(()=>{
$(".subscribe-form").addClass("hide");
$(".subscribe-form__thanks").removeClass("show");
});

这一切都应该按预期工作 - 表单应该消失并且消息应该出现！动画可能有点不和谐，所以可以尝试淡入淡出然后隐藏，并匹配两个div的高度以避免页面必须更改大小。

这将隐藏表单，即使字段不正确/不完整，因此如果您有兴趣，可以查看 validate.js以提高可用性。

注意：这种使用onClick()JQuery 选择器的方法并不能保证用户实际上订阅了邮件列表 - 您的 Drip API 请求可能不正确，或者他们的 API 可能失败/脱机。

如果您有兴趣确保用户正确订阅，则可以查看 Drip API 的回调函数 (https://developer.drip.com/(，但不能保证他们会及时回复，因此您很可能会使事情过于复杂。

希望这有帮助！！