我在我的网站主页上添加了电子邮件注册表单。但是，当用户输入电子邮件并点击“提交”时-没有反馈是否发送成功。此外，输入表单没有清除，键入的电子邮件仍留在那里。
如何添加一个成功/错误消息，将显示在下面的形式，并在一段时间后自动消失？这里是我的形式：
<form class="data-members-form" data-members-form>
<input class="subscribe-form" data-members-email type="email" required="true" placeholder="Enter your email"/>
<button class="subscribe-button" type="submit">Subscribe</button>
</form>下面是Ghost forum post中的一个表单，我认为没有验证脚本：
<form data-members-form="signup" class="post-subscribe-form">
<input data-members-email type="email" required="true" placeholder="email@address.net" class="post-subscribe-input"/>
<button type="submit" title="Subscribe by email." class="post-subscribe-button">Subscribe</button>
<div class="success">Success! Please click the link in we sent to your email to finalize your subscription.</div>
<div class="error">Something went wrong. Contact <a href="mailto:placeholder@address.com">support</a>.</div>
</form>我从Ghost Portal浏览了一下SignupPage.js page，但是没有找到任何有用的东西。another tutorial的代码也没有工作。
按照Ghost Docs在窗体内添加<form data-members-form class="success">...</form>没有正常工作。请帮助。
1条答案
按热度按时间u3r8eeie1#
刚刚看了一下您链接到的文档，我认为您可以快速完成一些事情，以更接近您的目标。
首先，在Form States下，声明CSS类被添加到与表单状态对应的
form[data-members-form]中：一米一米一，一米二米一，一米三米一。您可以利用这些类通过一些CSS实现成功（
.success）和错误（.error）消息的显示/隐藏。首先，我们将
.error和.success的默认样式设置为display: none：接下来，我们利用
form[data-members-form]的状态类，以便在表单处于相应状态时显示我们的（使用display: block）或.error和.success元素：另外，在Error Messages下，文档声明当错误发生时，具有属性
data-members-error的元素将显示并填充错误消息，这意味着您可以在form[data-members-form]中的某个位置添加一个空元素，以便向您的用户显示错误消息：至于清除表单输入并使错误和成功消息在一段时间后消失，这将需要一些JavaScript，但我无法确定是否有API支持，例如，挂钩到表单提交的成功处理程序。