Einführung

Hallo Entwickler! Ich freue mich, Ihnen mein neuestes Projekt vorzustellen: einNewsletter-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

DasNewsletter-Anmeldeformularist 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

• 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:

1. Klonen Sie das Repository:
   

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

   Nach dem Login kopieren

2. Öffnen Sie das Projektverzeichnis:
   

   cd Newsletter-Signup-Form

   Nach dem Login kopieren

3. Führen Sie das Projekt aus:

   • Öffnen Sie die Datei index.html in einem Webbrowser, um das Newsletter-Anmeldeformular anzuzeigen.

Verwendung

1. Öffnen Sie die Websitein einem Webbrowser.
2. Geben Sie Ihre E-Mail-Adressein das Eingabefeld ein.
3. Klicken Sie auf die Schaltfläche „Abonnieren“, um Ihre E-Mail zu senden.
4. 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:

         
  
 
 
 
Stay Updated!
 
Join our mailing list to receive updates and promotions.
 
 
Email Address
 
Valid Email Required
 
 
   
 
 
  
 
 
 
 
Made with ❤️ by Abhishek Gurjar
 
  

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

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 = ` 
  
Thanks for subscribing!
 
 A confirmation email has been sent to ${emailInput.value}. Please open it and click the button inside to confirm your subscription. 
 
Dismiss message
 
`; // 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 }); } });

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!