Erstellen Sie eine Website mit einem Newsletter-Anmeldeformular-js-Tutorial-php.cn

Build a Newsletter Signup Form Website

Einführung

Hallo Entwickler! Ich freue mich, Ihnen mein neuestes Projekt vorzustellen: ein Newsletter-Anmeldeformular. Dieses Projekt ist perfekt für diejenigen, die ein funktionales und optisch ansprechendes Formular erstellen möchten, das Benutzer-E-Mail-Adressen für Newsletter mithilfe von HTML, CSS und JavaScript sammelt. Dies ist eine großartige Möglichkeit, Ihre Fähigkeiten in der Frontend-Entwicklung zu verbessern und ein nützliches Tool für die Verwaltung von Abonnements zu erstellen.

Projektübersicht

Das Newsletter-Anmeldeformular ist eine Webanwendung, die es Benutzern ermöglicht, Newsletter zu abonnieren. Das Formular umfasst eine E-Mail-Validierung und zeigt bei erfolgreicher Anmeldung eine Erfolgsmeldung an. Mit einem klaren und interaktiven Design zeigt dieses Projekt, wie man ein praktisches und benutzerfreundliches Formular erstellt.

Merkmale

E-Mail-Validierung: Stellt sicher, dass Benutzer vor der Übermittlung eine gültige E-Mail-Adresse eingeben.
Erfolgsmeldung: Zeigt nach einem erfolgreichen Abonnement eine Bestätigungsmeldung an.
Responsives Design: Das Formular ist vollständig responsiv, sodass es sowohl auf Desktop- als auch auf Mobilgeräten gut aussieht.

Verwendete Technologien

HTML: Stellt die Struktur für das Newsletter-Anmeldeformular bereit.
CSS: Gestaltet das Formular so, dass es optisch ansprechend und benutzerfreundlich ist.
JavaScript: Verwaltet die E-Mail-Validierung und zeigt die Erfolgsmeldung basierend auf Benutzereingaben an.

Projektstruktur

Hier ein Überblick über die Projektstruktur:

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

Nach dem Login kopieren

index.html: Enthält die HTML-Struktur für das Newsletter-Anmeldeformular.
style.css: Enthält CSS-Stile, um ein modernes und ansprechendes Design zu erstellen.
script.js: Verwaltet die interaktiven Elemente und kümmert sich um die E-Mail-Validierung und Erfolgsmeldungen.

Installation

Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:

Klonen Sie das Repository:

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

Nach dem Login kopieren

Öffnen Sie das Projektverzeichnis:
```
cd Newsletter-Signup-Form
```
Nach dem Login kopieren
Führen Sie das Projekt aus:
- Öffnen Sie die Datei index.html in einem Webbrowser, um das Newsletter-Anmeldeformular anzuzeigen.

Verwendung

Öffnen Sie die Website in einem Webbrowser.
Geben Sie Ihre E-Mail-Adresse in das Eingabefeld ein.
Klicken Sie auf die Schaltfläche „Abonnieren“, um Ihre E-Mail zu senden.
Sehen Sie sich die Erfolgsmeldung an, die nach erfolgreichem Abonnement angezeigt wird.

Code-Erklärung

HTML

Die Datei index.html definiert die Struktur des Newsletter-Anmeldeformulars, einschließlich Eingabefeldern, Schaltflächen und Ergebnisanzeigebereichen. Hier ist ein Ausschnitt:

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

Nach dem Login kopieren

CSS

Die style.css-Datei gestaltet das Newsletter-Anmeldeformular und macht es attraktiv und benutzerfreundlich. Nachfolgend sind einige wichtige Stile aufgeführt:

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

Nach dem Login kopieren

JavaScript

Die Datei „script.js“ enthält die Logik für die E-Mail-Validierung und die Anzeige der Erfolgsmeldung. Hier ist ein Ausschnitt:

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

Nach dem Login kopieren

Live-Demo

Sie können sich hier die Live-Demo des Projekts „Newsletter-Anmeldeformular“ ansehen.

Abschluss

Die Erstellung des Newsletter-Anmeldeformulars war eine hervorragende Möglichkeit, Frontend-Entwicklungsfähigkeiten anzuwenden, um ein funktionales und ansprechendes Tool zu erstellen. Dieses Projekt zeigt, wie man ein interaktives und reaktionsfähiges Formular erstellt, das zur Verwaltung von E-Mail-Abonnements verwendet werden kann. Ich hoffe, es inspiriert Sie dazu, Ihre eigenen Tools zu entwickeln und Ihre Webentwicklungsfähigkeiten zu verbessern. Viel Spaß beim Codieren!

Credits

Dieses Projekt wurde als Teil meiner kontinuierlichen Lernreise in der Webentwicklung entwickelt.

Autor

Abhishek Gurjar
- GitHub-Profil

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Website mit einem Newsletter-Anmeldeformular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!