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 Beritaialah aplikasi web yang direka bentuk 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 webdalam penyemak imbas web.
Masukkan alamat e-mel andake dalam medan input.
Klik butang Langganuntuk menyerahkan e-mel anda.
Lihat mesej kejayaandipaparkan 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:

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

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

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!