뉴스레터 가입 양식 웹사이트 구축-JS 튜토리얼-php.cn

뉴스레터 가입 양식 웹사이트 구축

王林

풀어 주다： 2024-08-31 06:34:33

원래의

375명이 탐색했습니다.

Build a Newsletter Signup Form Website

소개

안녕하세요, 개발자 여러분! 저의 최신 프로젝트인 뉴스레터 가입 양식을 공유하게 되어 기쁩니다. 이 프로젝트는 HTML, CSS 및 JavaScript를 사용하여 뉴스레터용 사용자 이메일 주소를 수집하는 기능적이고 시각적으로 매력적인 양식을 만들려는 사람들에게 적합합니다. 이는 프런트엔드 개발 기술을 향상시키고 구독 관리를 위한 유용한 도구를 구축할 수 있는 좋은 방법입니다.

프로젝트 개요

뉴스레터 가입 양식은 사용자가 뉴스레터를 구독할 수 있도록 설계된 웹 애플리케이션입니다. 양식에는 이메일 확인이 포함되어 있으며 구독 성공 시 성공 메시지가 표시됩니다. 깔끔하고 인터랙티브한 디자인을 갖춘 이 프로젝트는 실용적이고 사용자 친화적인 형태를 만드는 방법을 보여줍니다.

특징

이메일 확인: 제출하기 전에 사용자가 유효한 이메일 주소를 입력했는지 확인합니다.
성공 메시지: 구독 성공 후 확인 메시지를 표시합니다.
반응형 디자인: 양식은 완벽하게 반응하므로 데스크톱과 모바일 장치 모두에서 멋지게 보입니다.

사용된 기술

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
```
로그인 후 복사
프로젝트 실행:
- 뉴스레터 가입 양식을 보려면 웹 브라우저에서 index.html 파일을 엽니다.

용법

웹사이트를 엽니다 웹 브라우저에서
이메일 주소를 입력란에 입력하세요.
구독 버튼을 클릭하여 이메일을 제출하세요.
구독 성공 후 표시되는 성공 메시지를 확인하세요.

코드 설명

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

로그인 후 복사

자바스크립트

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

로그인 후 복사

라이브 데모

여기에서 뉴스레터 가입 양식 프로젝트의 라이브 데모를 확인할 수 있습니다.

결론

뉴스레터 가입 양식을 만드는 것은 프런트엔드 개발 기술을 적용하여 기능적이고 매력적인 도구를 구축할 수 있는 훌륭한 방법이었습니다. 이 프로젝트는 이메일 구독 관리에 사용할 수 있는 대화형 및 반응형 양식을 만드는 방법을 보여줍니다. 여러분이 자신만의 도구를 만들고 웹 개발 기술을 향상시키는 데 영감을 주기를 바랍니다. 즐거운 코딩하세요!