Bina Laman Web Borang Pendaftaran Surat Berita-tutorial js-php.cn

Build a Newsletter Signup Form Website

pengenalan

Helo, pembangun! Saya teruja untuk berkongsi projek terbaharu saya: Borang Pendaftaran Surat Berita. Projek ini sesuai untuk mereka yang ingin mencipta borang yang berfungsi dan menarik secara visual yang mengumpulkan alamat e-mel pengguna untuk surat berita menggunakan HTML, CSS dan JavaScript. Ini cara yang bagus untuk meningkatkan kemahiran pembangunan bahagian hadapan anda dan membina alat yang berguna untuk mengurus langganan.

Gambaran Keseluruhan Projek

Borang Pendaftaran Surat Berita ialah aplikasi web yang direka untuk membolehkan pengguna melanggan surat berita. Borang ini termasuk pengesahan e-mel dan memaparkan mesej kejayaan apabila langganan berjaya. Dengan reka bentuk yang bersih dan interaktif, projek ini menunjukkan cara mencipta bentuk yang praktikal dan mesra pengguna.

Ciri-ciri

Pengesahan E-mel: Memastikan pengguna memasukkan alamat e-mel yang sah sebelum penyerahan.
Mesej Kejayaan: Memaparkan mesej pengesahan selepas langganan berjaya.
Reka Bentuk Responsif: Borang ini responsif sepenuhnya, memastikan ia kelihatan hebat pada kedua-dua peranti desktop dan mudah alih.

Teknologi yang Digunakan

HTML: Menyediakan struktur untuk Borang Pendaftaran Surat Berita.
CSS: Menggayakan borang untuk menjadikannya menarik secara visual dan mesra pengguna.
JavaScript: Mengendalikan pengesahan e-mel dan memaparkan mesej kejayaan berdasarkan input pengguna.

Struktur Projek

Berikut ialah gambaran keseluruhan struktur projek:

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

Salin selepas log masuk

index.html: Mengandungi struktur HTML untuk Borang Pendaftaran Surat Berita.
style.css: Termasuk gaya CSS untuk mencipta reka bentuk moden dan responsif.
script.js: Mengurus elemen interaktif dan mengendalikan pengesahan e-mel dan pemesejan kejayaan.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

Klon repositori:

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

Salin selepas log masuk

Buka direktori projek:
```
cd Newsletter-Signup-Form
```
Salin selepas log masuk
Jalankan projek:
- Buka fail index.html dalam penyemak imbas web untuk melihat Borang Pendaftaran Surat Berita.

Penggunaan

Buka tapak web dalam penyemak imbas web.
Masukkan alamat e-mel anda ke dalam medan input.
Klik butang Langgan untuk menyerahkan e-mel anda.
Lihat mesej kejayaan dipaparkan selepas langganan berjaya.

Penerangan Kod

HTML

Fail index.html mentakrifkan struktur Borang Pendaftaran Surat Berita, termasuk medan input, butang dan kawasan paparan hasil. Berikut adalah coretan:

<!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>

Salin selepas log masuk

CSS

Fail style.css menggayakan Borang Pendaftaran Surat Berita, menjadikannya menarik dan mudah digunakan. Di bawah ialah beberapa gaya utama:

* {
  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;
  }
}

Salin selepas log masuk

JavaScript

Fail script.js mengandungi logik untuk mengendalikan pengesahan e-mel dan memaparkan mesej kejayaan. Berikut adalah coretan:

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

Salin selepas log masuk

Demo Langsung

Anda boleh melihat demo langsung projek Borang Pendaftaran Surat Berita di sini.

Kesimpulan

Mencipta Borang Pendaftaran Surat Berita ialah cara terbaik untuk menggunakan kemahiran pembangunan bahagian hadapan untuk membina alat yang berfungsi dan menarik. Projek ini menunjukkan cara membuat borang interaktif dan responsif yang boleh digunakan untuk mengurus langganan e-mel. Saya harap ia memberi inspirasi kepada anda untuk membina alatan anda sendiri dan meningkatkan kemahiran pembangunan web anda. Selamat mengekod!

Kredit

Projek ini dibangunkan sebagai sebahagian daripada perjalanan pembelajaran berterusan saya dalam pembangunan web.

Pengarang

Abhishek Gurjar
- Profil GitHub

Atas ialah kandungan terperinci Bina Laman Web Borang Pendaftaran Surat Berita. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!