Créer un site Web de formulaire d'inscription à la newsletter-js tutoriel-php.cn

Créer un site Web de formulaire d'inscription à la newsletter

王林

Libérer： 2024-08-31 06:34:33

original

371 Les gens l'ont consulté

Build a Newsletter Signup Form Website

Introduction

Bonjour les développeurs ! Je suis ravi de partager mon dernier projet : un Formulaire d'inscription à la newsletter. Ce projet est parfait pour ceux qui cherchent à créer un formulaire fonctionnel et visuellement attrayant qui collecte les adresses e-mail des utilisateurs pour les newsletters en utilisant HTML, CSS et JavaScript. C'est un excellent moyen d'améliorer vos compétences en développement front-end et de créer un outil utile pour gérer les abonnements.

Aperçu du projet

Le Formulaire d'inscription à la newsletter est une application Web conçue pour permettre aux utilisateurs de s'abonner à des newsletters. Le formulaire comprend une validation par e-mail et affiche un message de réussite en cas d'abonnement réussi. Avec un design épuré et interactif, ce projet montre comment créer un formulaire pratique et convivial.

Caractéristiques

Validation de l'e-mail : garantit que les utilisateurs saisissent une adresse e-mail valide avant la soumission.
Message de réussite : affiche un message de confirmation après un abonnement réussi.
Conception réactive : le formulaire est entièrement réactif, ce qui garantit qu'il s'affichera parfaitement sur les ordinateurs de bureau et les appareils mobiles.

Technologies utilisées

HTML : fournit la structure du formulaire d'inscription à la newsletter.
CSS : stylise le formulaire pour le rendre visuellement attrayant et convivial.
JavaScript : gère la validation des e-mails et affiche le message de réussite en fonction de la saisie de l'utilisateur.

Structure du projet

Voici un aperçu de la structure du projet :

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

Copier après la connexion

index.html : Contient la structure HTML du formulaire d'inscription à la newsletter.
style.css : inclut des styles CSS pour créer un design moderne et réactif.
script.js : gère les éléments interactifs et gère la validation des e-mails et la messagerie de réussite.

Installation

Pour démarrer le projet, suivez ces étapes :

Cloner le dépôt :

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

Copier après la connexion

Ouvrez le répertoire du projet :
```
cd Newsletter-Signup-Form
```
Copier après la connexion
Exécuter le projet :
- Ouvrez le fichier index.html dans un navigateur Web pour afficher le formulaire d'inscription à la newsletter.

Usage

Ouvrez le site Web dans un navigateur Web.
Entrez votre adresse e-mail dans le champ de saisie.
Cliquez sur le bouton S'abonner pour soumettre votre e-mail.
Affichez le message de réussite affiché après un abonnement réussi.

Explication du code

HTML

Le fichier index.html définit la structure du formulaire d'inscription à la newsletter, y compris les champs de saisie, les boutons et les zones d'affichage des résultats. En voici un extrait :

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

Copier après la connexion

CSS

Le fichier style.css stylise le formulaire d'inscription à la newsletter, le rendant attrayant et facile à utiliser. Voici quelques styles clés :

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

Copier après la connexion

Javascript

Le fichier script.js contient la logique de gestion de la validation des e-mails et d'affichage du message de réussite. En voici un extrait :

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

Copier après la connexion

Démo en direct

Vous pouvez consulter la démo en direct du projet de formulaire d'inscription à la newsletter ici.

Conclusion

La création du formulaire d'inscription à la newsletter était un excellent moyen d'appliquer les compétences de développement front-end pour créer un outil fonctionnel et attrayant. Ce projet montre comment créer un formulaire interactif et réactif pouvant être utilisé pour gérer les abonnements par courrier électronique. J'espère que cela vous incitera à créer vos propres outils et à améliorer vos compétences en développement Web. Bon codage !