如何在 email 表單中添加成功消息？

Question

我在我的網站主頁上添加了 email 注冊表單。 但是，當用戶輸入 email 並點擊“提交”時，沒有任何反饋是否發送成功。 此外，輸入表單未清除並輸入 email 保留在那里。

如何添加成功/錯誤消息顯示在表單下方並在一段時間后自動消失？ 這是我的表格：

<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 論壇帖子中的一個表格，它對我不起作用。 我想沒有驗證腳本：

<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 頁面，但沒有發現任何有用的東西。 另一個教程中的代碼效果不佳。

根據Ghost Docs在表單中添加<form data-members-form class="success">...</form>也不起作用。 請幫忙。

Answer 1

只需查看您鏈接到的文檔，我認為您可以快速做幾件事來讓您更接近您的目標。

首先，在Form States下，它指出 CSS 類被添加到form[data-members-form]對應於 state 的形式： loading ， success ， error 。

您可以利用這些類來實現顯示/隱藏您的成功 ( .success ) 和錯誤 ( .error ) 消息以及一些 CSS。

首先，我們將.error和.success的默認樣式設置為display: none ：

form[data-members-form] .error,
form[data-members-form] .success {
  display: none;
}

接下來，我們利用form[data-members-form]的 state 類，以便在表單位於相應的 state 中時顯示我們的（帶有display: block ）或.error和.success元素：

form[data-members-form].error .error {
  display: block;
}

form[data-members-form].success .success {
  display: block;
}

此外，在Error Messages下，文檔 state 具有屬性data-members-error的元素將顯示並在發生錯誤時填充錯誤消息。 這意味着您可以在form[data-members-form]中的某處添加一個空元素，以便向您的用戶顯示錯誤消息：

<p data-members-error></p>

至於清除表單輸入並讓錯誤和成功消息在一段時間后消失，這將需要一些 JavaScript，但我無法確定是否有支持的 API，例如掛接到表單的成功處理程序提交。