建立时事通讯注册表单网站-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
    });
  }
});

登录后复制