将“成功”消息添加到 html 表单答案

【问题标题】：add 'success' message to html form将“成功”消息添加到 html 表单
【发布时间】：2020-10-01 13:54:03
【问题描述】：

我有一个 HTML 表单，我是自定义编码，与滴灌（电子邮件平台）表单集成。我正试图让它显示“成功”消息（例如“感谢您订阅我们的时事通讯”。

在提交操作后调整 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>

谢谢！

【问题讨论】：

标签： wordpress forms

【解决方案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/)，但不能保证他们会及时回复，因此您很可能不要把事情复杂化。

希望这有帮助！

【讨论】：