ニュースレター登録フォーム Web サイトを構築する-jsチュートリアル-php.cn

ニュースレター登録フォーム Web サイトを構築する

王林

リリース： 2024-08-31 06:34:33

オリジナル

422 人が閲覧しました

Build a Newsletter Signup Form Website

導入

開発者の皆さん、こんにちは！私の最新プロジェクトであるニュースレター登録フォームを共有できることを嬉しく思います。このプロジェクトは、HTML、CSS、JavaScript を使用してニュースレター用のユーザーの電子メールアドレスを収集する、機能的で視覚的に魅力的なフォームを作成したい人に最適です。これは、フロントエンド開発スキルを強化し、サブスクリプションを管理するための便利なツールを構築するための優れた方法です。

プロジェクト概要

ニュースレター登録フォームは、ユーザーがニュースレターを購読できるように設計された Web アプリケーションです。フォームには電子メール検証が含まれており、購読が成功すると成功メッセージが表示されます。このプロジェクトは、クリーンでインタラクティブなデザインを使用して、実用的でユーザーフレンドリーなフォームを作成する方法を示します。

特徴

電子メールの検証: 送信前にユーザーが有効な電子メールアドレスを入力していることを確認します。
成功メッセージ: 購読が成功した後に確認メッセージが表示されます。
レスポンシブデザイン: フォームは完全にレスポンシブで、デスクトップとモバイルデバイスの両方で見栄えが良くなります。

使用されている技術

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
```
ログイン後にコピー
プロジェクトを実行します:
- Web ブラウザでindex.html ファイルを開いて、ニュースレター登録フォームを表示します。

使用法

Web ブラウザで Web サイトを開きます。
メールアドレスを入力フィールドに入力してください。
[購読] ボタンをクリックしてください メールを送信してください。
サブスクリプションが成功した後に表示される成功メッセージを表示します。

コードの説明

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
    });
  }
});

ログイン後にコピー

ライブデモ

ここでニュースレターサインアップフォームプロジェクトのライブデモをチェックできます。

結論

ニュースレター登録フォームの作成は、フロントエンド開発スキルを適用して機能的で魅力的なツールを構築するための優れた方法でした。このプロジェクトでは、電子メール購読の管理に使用できる対話型で応答性の高いフォームを作成する方法を示します。この記事が、独自のツールを構築し、Web 開発スキルを向上させるきっかけになれば幸いです。コーディングを楽しんでください!