我在我的网站主页上添加了电子邮件注册表单。但是,当用户输入电子邮件并点击“提交”时-没有反馈是否发送成功。此外,输入表单没有清除,键入的电子邮件仍留在那里。
如何添加一个成功/错误消息,将显示在下面的形式,并在一段时间后自动消失?这里是我的形式:
<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支持,例如,挂钩到表单提交的成功处理程序。