Crafting a Stylish and Interactive Registration Form with HTML, CSS, and JavaScript
Are you looking to enhance your website’s user registration experience? Want to make it not just functional but visually stunning and interactive? You’ve come to the right place. In this tutorial, I’ll guide you through creating a registration form that’s beautiful and engaging, using the power of HTML, CSS, and JavaScript.
The Alluring Design
The first step in our journey is to set up the HTML structure for our registration form. We’ll need fields for the username, email, password, and even an option to upload an avatar. This HTML structure serves as the foundation on which we’ll build our stylish registration form.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<form class="registration-form">
<h1>Registration Form</h1>
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Create a password" required>
<span class="show-password" onclick="togglePassword()">Show</span>
</div>
<div class="form-group">
<label for="avatar">Avatar:</label>
<input type="file" id="avatar" name="avatar">
</div>
<div class="form-group">
<label for="social-login">Register with Social Media:</label>
<div id="social-login">
<a href="#" class="social-button">Google</a>
<a href="#" class="social-button">Twitter</a>
<a href="#" class="social-button">Facebook</a>
</div>
</div>
<button type="submit" id="register-button">Register</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>A Touch of Elegance with CSS
Now that our HTML structure is in place, let’s make it visually appealing. We’ll add styles with CSS that give our registration form a sleek and elegant look. The combination of fonts, colors, animations, and layout will set the stage for the stylish registration form that we envision.
body{
font-family: Arial, sans-serif;
background-image: url("background-image.jpg");
background-size: cover;
background-position: center;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container{
background: rgba(255, 255, 255, 0.9);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
padding: 20px;
border-radius: 10px;
width: 450px;
text-align: center;
}
form{
display: flex;
flex-direction: column;
position: relative;
}
.form-group{
margin: 10px 10px;
text-align: left;
}
label{
font-weight: bold;
color: #333;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
input{
width: 100%;
padding: 10px;
margin: 5px 0;
border: none;
border-radius: 5px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
/* Adding transition for glowing effect */
outline: none;
transition: box-shadow 0.5s ease-in-out;
}
button{
background: linear-gradient(to bottom right, #4caf50, #45a847);
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s, transform 0.2s;
}
button:hover{
background: linear-gradient(to bottom right, #45a847, #4caf50);
animation: shine 1s infinite alternate;
transform: scale(1.05);
}
@keyframes shine {
0% {
background: linear-gradient(to bottom right, #45a847, #4caf50);
}
100% {
background: linear-gradient(to bottom right, #4caf50, #45a847);
}
}
.show-password{
cursor: pointer;
color: #3498db;
padding: 5px;
}
#avatar {
border: 1px solid #ccc;
padding: 5px;
border-radius: 5px;
}
#social-login{
display: flex;
justify-content: center;
gap: 10px;
}
.social-button{
background: #3498db;
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
text-align: center;
flex: 1;
}
/* Neon Glow Effects for the input field when in focus */
input.focus{
box-shadow: 0 0 10px rgba(0, 0, 255, 0.7);
transition: box-shadow 0.5s ease-in-out;
}
/* Neon breathing effect for the input field when typing */
input.typing{
box-shadow: 0 0 15px rgba(0, 0, 255, 0.9);
animation: neonBreathing 1.5s ease-in-out infinite;
}
@keyframes neonBreathing {
0% {
box-shadow: 0 0 10px rgba(0, 0, 255, 0.7);
}
50% {
box-shadow: 0 0 15px rgba(0, 0, 255, 0.9);
}
100% {
box-shadow: 0 0 10px rgba(0, 0, 255, 0.7);
}
}
/* Add Shaking animation to the container */
.shake{
animation: shake 0.5s;
}
@keyframes shake {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-10px);
}
50% {
transform: translateX(10px);
}
75% {
transform: translateX(-10px);
}
100% {
transform: translateX(10px);
}
}Adding the Wow Factor with JavaScript
Our form is already looking good, but we want it to be more than just looks. We want it to be interactive. With JavaScript, we’ll add delightful animations. When a user clicks on an input field, it’ll glow beautifully. And when they start typing, it will have a fantastic neon breathing effect. It’s like a dance party for your form.
// Get all input elements
const inputFields = document.querySelectorAll("input");
let isTyping = false;
// Function to apply the neon breathing effect
function applyNeonBreathingEffect(input){
input.classList.add("typing");
}
// Function to remove the neon breathing effect
function removeNeonBreathingEffect(input){
input.classList.remove("typing");
}
// Event listners for all input fields
inputFields.forEach((input) => {
// Event listener for input focus
input.addEventListener("focus", () => {
if (!isTyping) {
// Apply neon glow effect when the input is in focus
input.classList.add("focus");
}
});
// Event listener for input blur
input.addEventListener("blur", () => {
// Remove neon glow effect when the input loses focus
input.classList.remove("focus")
});
// Event listener for input typing
input.addEventListener("input", () => {
if (!isTyping){
isTyping = true;
applyNeonBreathingEffect(input); // Apply neon breathing effect when the user starts typing
}
});
// Event listener to detect when the user is not typing
input.addEventListener("blur", () => {
isTyping = false;
removeNeonBreathingEffect(input); // Remove the neon breathing effect when the user stops typing
});
});
// Function to Show and Hide Password
function togglePassword(){
const passwordField = document.getElementById("password");
if (passwordField.type === "password"){
passwordField.type = "text";
document.querySelector(".show-password").textContent = "Hide";
} else {
passwordField.type = "password";
document.querySelector(".show-password").textContent = "Show";
}
}
Registration with a Twist
Handling form submission is a breeze with JavaScript. We’ll use it to check if all the required fields are filled, validate the email format, and then, show an alert message with their entered details. And if the details are not filled properly then there will be a shake effect on the form.
// Get the "Register" button and the container
const registerButton = document.getElementById("register-button");
const container = document.querySelector(".container");
// Function to check if required fields are filled
function areFieldsFilled(){
const username = document.getElementById("username").value;
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
return username !== "" && email !== "" && password !=="";
}
function isValidEmail(email) {
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
return emailPattern.test(email);
}
// Event for the Register Button
registerButton.addEventListener("click", () => {
if (areFieldsFilled()) {
// Get the username and email
const username = document.getElementById("username").value;
const email = document.getElementById("email").value;
if (!isValidEmail(email)) {
// Email is invalid, show an error message
alert("Please enter a valid email address.")
return; // Prevent further execution of the code
}
// Display an alert message with a success message and the username and email
alert(`Registration successful!\n\nUsername: ${username}\nEmail: ${email}`);
// Clear the input fields
document.getElementById("username").value = "";
document.getElementById("email").value = "";
document.getElementById("password").value = "";
} else {
// If required fields are not filled, add the "shake" class to the container
container.classList.add("shake");
// Remove the "shake" class after the animation completes
setTimeout(() => {
container.classList.remove("shake");
}, 500); // 0.5s, which matches the animation duration
}
});Conclusion
And there you have it — a registration form that’s both visually stunning and interactive. The possibilities are endless; you can tweak and customize it to suit your website’s unique style.
So, what are you waiting for? Dive into the tutorial and start building your stylish registration form today. Your users will thank you for it!
Subscribe and Stay Inspired
If you’re passionate about web design and want to stay updated on more tips, tricks, and tutorials, please subscribe to our channel and hit the notification bell.
The world of web design is at your fingertips, and with these button animations, your website is about to shine brighter than ever before. Dive into the code, experiment, and watch your web design skills flourish!
Channel Link: https://www.youtube.com/@lostbongcoder
Happy Coding!!! 🌟🌟🙌😺