建立時事通訊註冊表單網站-js教程-PHP中文網

Build a Newsletter Signup Form Website

介紹

開發者們大家好！我很高興分享我的最新項目：時事通訊註冊表。該專案非常適合那些希望創建一個實用且具有視覺吸引力的表單的人，該表單可以使用 HTML、CSS 和 JavaScript 收集新聞通訊的使用者電子郵件地址。這是增強前端開發技能和建立管理訂閱的有用工具的好方法。

項目概況

新聞通訊註冊表是一個網絡應用程序，旨在允許用戶訂閱新聞通訊。該表單包括電子郵件驗證，並在成功訂閱後顯示成功訊息。本專案採用簡潔且互動的設計，示範如何建立實用且使用者友善的表單。

特徵

電子郵件驗證：確保使用者在提交之前輸入有效的電子郵件地址。
成功訊息：訂閱成功後顯示確認訊息。
響應式設計：表單完全響應，確保它在桌面和行動裝置上看起來都很棒。

使用的技術

HTML：提供時事通訊註冊表單的結構。
CSS：設定表單樣式，使其具有視覺吸引力且使用者友好。
JavaScript：處理電子郵件驗證並根據使用者輸入顯示成功訊息。

專案結構

以下是項目結構的概述：

Newsletter-Signup-Form/
├── index.html
├── style.css
└── script.js

登入後複製

index.html：包含電子報註冊表單的 HTML 結構。
style.css：包含 CSS 樣式以創建現代且響應式的設計。
script.js：管理互動元素並處理電子郵件驗證和成功訊息傳遞。

安裝

要開始該項目，請按照以下步驟操作：

複製儲存庫：

git clone https://github.com/abhishekgurjar-in/Newsletter-Signup-Form.git

登入後複製

開啟專案目錄:
```
cd Newsletter-Signup-Form
```
登入後複製
運行項目:
- 在網頁瀏覽器中開啟 index.html 檔案以查看新聞通訊註冊表。

用法

在網頁瀏覽器中開啟網站。
在輸入欄位中輸入您的電子郵件地址。
點擊訂閱按鈕提交您的電子郵件。
查看訂閱成功後顯示的成功訊息。

程式碼說明

超文本標記語言

index.html 檔案定義電子報註冊表單的結構，包括輸入欄位、按鈕和結果顯示區域。這是一個片段：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Newsletter Signup Form</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,regular,500,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="./script.js" defer></script>
</head>
<body>
  <div class="container">
    <div class="box">
      <div class="left-box">
        <h1>Stay Updated!</h1>
        <p>Join our mailing list to receive updates and promotions.</p>
        <div class="email-text">
          <p>Email Address</p>
          <p class="not-valid">Valid Email Required</p>
        </div>
        <form>
          <input type="email" class="email-input" placeholder="email@company.com">
          <input type="submit" class="button" value="Subscribe to Newsletter">
        </form>
      </div>
      <div class="right-box">
        <img src="./assets/images/illustration-sign-up-desktop.svg" alt="">
      </div>
    </div>
  </div>
  <div class="footer">
    <p>Made with ❤️ by Abhishek Gurjar</p>
  </div>
</body>
</html>

登入後複製

CSS

style.css 檔案對電子報註冊表單進行樣式設計，使其更具吸引力且易於使用。以下是一些關鍵樣式：

* {
  box-sizing: border-box;
}

body {
  font-family: Roboto, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #36384e;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
}

.box {
  gap: 20px;
  max-width: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  margin-inline: auto;
  background-color: white;
  border-radius: 15px;
}

.left-box {
  margin: 20px;
  width: 50%;
}

.left-box h1 {
  font-size: 50px;
}

.left-box p {
  font-size: 20px;
}

.email-text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.success {
  display: inline;
}

.success-icon {
  width: 27px;
}

.email-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.not-valid {
  color: red;
  display: none;
}

input {
  font-size: 20px;
  width: 100%;
  height: 50px;
  border-radius: 15px;
  border: 2px solid black;
}

.button {
  font-size: 20px;
  width: 100%;
  border-radius: 15px;
  background-color: #242742;
  color: white;
}

.button:hover {
  background-color: #ff644b;
  cursor: pointer;
}

.right-box {
  width: 50%;
  margin: 0 20px;
}

.right-box img {
  width: 100%;
}

.footer {
  color: white;
  margin: 30px;
  text-align: center;
}

@media (max-width: 1200px) {
  .box {
    flex-direction: column-reverse;
  }
}

登入後複製

JavaScript

script.js 檔案包含處理電子郵件驗證和顯示成功訊息的邏輯。這是一個片段：

const submitBtn = document.getElementsByClassName("button")[0];
const emailInput = document.getElementsByClassName("email-input")[0];
const error = document.getElementsByClassName("not-valid")[0];
const box = document.getElementsByClassName("box")[0];

submitBtn.addEventListener("click", (event) => {
  event.preventDefault();
  const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  const isValid = emailPattern.test(emailInput.value);

  if (!isValid) {
    error.style.display = "block";
  } else {
    error.style.display = "none"; // Hide the error message if email is valid
    box.style.display = "none";

    // Create and show the message
    const message = document.createElement("div");
    message.className = "message";
    message.innerHTML = `
      <div class="message-content">
        <img src="./assets/images/icon-success.svg" alt="">
        <h1>Thanks for subscribing!</h1>
        <p>
          A confirmation email has been sent to ${emailInput.value}. Please open
          it and click the button inside to confirm your subscription.
        </p>
        <h2 class="closeBtn">Dismiss message</h2>
      </div>`;

    // Append the message to the body
    document.body.appendChild(message);

    // Select the close button from the newly created message element
    const closeBtn = message.querySelector(".closeBtn");
    closeBtn.addEventListener("click", () => {
      message.remove();
      location.reload(); // Reload the website
    });
  }
});

登入後複製