Project Gallery
Explore Modern Responsive Registration Form in detail
1
/1
100%
Project Overview
Modern Responsive Registration Form
Project Description
I have created a modern and responsive registration form using HTML, CSS, and JavaScript. The form features a clean and user-friendly design with proper alignment and spacing. It includes fields for name, email, password, and confirm password, along with a stylish submit button. The layout uses a modern color scheme and is fully responsive, ensuring a smooth experience on both desktop and mobile devices. Basic validation with JavaScript has been implemented to check user inputs and improve the overall registration process.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register | Create Your Account</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="left-side">
<div class="welcome-text">
<h1>Join Our Community</h1>
<p>Create your account today and unlock a world of possibilities. Join thousands of users who trust us with their journey.</p>
</div>
<div class="benefits">
<div class="benefit">
<div class="benefit-icon">
<i class="fas fa-rocket"></i>
</div>
<div class="benefit-text">
<h3>Get Started Instantly</h3>
<p>Quick setup and immediate access to all features</p>
</div>
</div>
<div class="benefit">
<div class="benefit-icon">
<i class="fas fa-shield-alt"></i>
</div>
<div class="benefit-text">
<h3>Secure Storage</h3>
<p>Your data is protected with bank-level encryption</p>
</div>
</div>
<div class="benefit">
<div class="benefit-icon">
<i class="fas fa-star"></i>
</div>
<div class="benefit-text">
<h3>Premium Features</h3>
<p>Access exclusive tools and resources</p>
</div>
</div>
<div class="benefit">
<div class="benefit-icon">
<i class="fas fa-users"></i>
</div>
<div class="benefit-text">
<h3>24/7 Support</h3>
<p>Our team is always ready to help you succeed</p>
</div>
</div>
</div>
</div>
<div class="right-side">
<div class="register-header">
<h2>Create Account</h2>
<p>Fill in your details to get started</p>
</div>
<form id="registerForm">
<div class="form-row">
<div class="form-group">
<div class="input-group">
<i class="fas fa-user"></i>
<input type="text" class="form-control" id="firstName" placeholder="First Name" required>
</div>
<div class="form-error" id="firstNameError">First name is required</div>
</div>
<div class="form-group">
<div class="input-group">
<i class="fas fa-user"></i>
<input type="text" class="form-control" id="lastName" placeholder="Last Name" required>
</div>
<div class="form-error" id="lastNameError">Last name is required</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<i class="fas fa-envelope"></i>
<input type="email" class="form-control" id="email" placeholder="Email Address" required>
</div>
<div class="form-error" id="emailError">Please enter a valid email address</div>
</div>
<div class="form-group">
<div class="input-group">
<i class="fas fa-phone"></i>
<input type="tel" class="form-control" id="phone" placeholder="Phone Number (Optional)">
</div>
</div>
<div class="form-group">
<div class="input-group">
<i class="fas fa-lock"></i>
<input type="password" class="form-control" id="password" placeholder="Create Password" required>
<span class="password-toggle" onclick="togglePassword('password')">
<i class="fas fa-eye"></i>
</span>
</div>
<div class="password-strength">
<div class="strength-meter">
<div class="strength-fill" id="strengthFill"></div>
</div>
<div class="strength-text" id="strengthText">Password strength</div>
</div>
<div class="form-error" id="passwordError">Password must be at least 8 characters</div>
</div>
<div class="form-group">
<div class="input-group">
<i class="fas fa-lock"></i>
<input type="password" class="form-control" id="confirmPassword" placeholder="Confirm Password" required>
<span class="password-toggle" onclick="togglePassword('confirmPassword')">
<i class="fas fa-eye"></i>
</span>
</div>
<div class="form-error" id="confirmPasswordError">Passwords do not match</div>
</div>
<div class="terms-agreement">
<input type="checkbox" id="terms" required>
<label for="terms">
I agree to the <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>. I understand that my data will be processed in accordance with these policies.
</label>
</div>
<div class="form-error" id="termsError">You must agree to the terms and conditions</div>
<button type="submit" class="register-btn">Create Account</button>
</form>
<div class="divider">
<span>Or sign up with</span>
</div>
<div class="social-register">
<button type="button" class="social-btn google-btn">
<i class="fab fa-google"></i>
Google
</button>
<button type="button" class="social-btn facebook-btn">
<i class="fab fa-facebook-f"></i>
Facebook
</button>
</div>
<div class="login-link">
<p>Already have an account? <a href="login.html">Sign in here</a></p>
</div>
</div>
</div>
</body>
</html>CSS
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
display: flex;
max-width: 1200px;
width: 100%;
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.left-side {
flex: 1;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 60px 40px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.left-side::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size: 20px 20px;
transform: rotate(45deg);
}
.welcome-text h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
position: relative;
z-index: 2;
}
.welcome-text p {
font-size: 1.1rem;
opacity: 0.9;
line-height: 1.6;
margin-bottom: 30px;
position: relative;
z-index: 2;
}
.benefits {
position: relative;
z-index: 2;
}
.benefit {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.benefit-icon {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
transition: transform 0.3s ease;
}
.benefit:hover .benefit-icon {
transform: scale(1.1);
}
.benefit i {
font-size: 1.2rem;
}
.benefit-text {
flex: 1;
}
.benefit-text h3 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 5px;
}
.benefit-text p {
font-size: 0.9rem;
opacity: 0.8;
margin: 0;
}
.right-side {
flex: 1;
padding: 60px 40px;
overflow-y: auto;
max-height: 90vh;
}
.register-header {
text-align: center;
margin-bottom: 40px;
}
.register-header h2 {
font-size: 2rem;
font-weight: 700;
color: #2d3748;
margin-bottom: 10px;
}
.register-header p {
color: #718096;
font-size: 1rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 25px;
}
.form-group {
margin-bottom: 25px;
}
.input-group {
position: relative;
}
.input-group i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #a0aec0;
z-index: 2;
}
.form-control {
width: 100%;
padding: 15px 15px 15px 45px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 1rem;
transition: all 0.3s ease;
background: #f7fafc;
}
.form-control:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
background: white;
}
.form-control.error {
border-color: #e53e3e;
}
.password-toggle {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #a0aec0;
z-index: 2;
}
.form-error {
color: #e53e3e;
font-size: 0.875rem;
margin-top: 5px;
display: none;
}
.terms-agreement {
display: flex;
align-items: flex-start;
margin-bottom: 30px;
gap: 10px;
}
.terms-agreement input {
margin-top: 3px;
accent-color: #667eea;
}
.terms-agreement label {
font-size: 0.9rem;
color: #4a5568;
line-height: 1.4;
}
.terms-agreement a {
color: #667eea;
text-decoration: none;
font-weight: 500;
}
.terms-agreement a:hover {
text-decoration: underline;
}
.register-btn {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.register-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.register-btn:active {
transform: translateY(0);
}
.divider {
margin: 30px 0;
position: relative;
text-align: center;
}
.divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #e2e8f0;
}
.divider span {
background: white;
padding: 0 15px;
color: #718096;
position: relative;
z-index: 1;
}
.social-register {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 30px;
}
.social-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
border: 2px solid #e2e8f0;
border-radius: 8px;
background: white;
cursor: pointer;
transition: all 0.3s ease;
}
.social-btn:hover {
border-color: #667eea;
transform: translateY(-1px);
}
.social-btn i {
margin-right: 8px;
font-size: 1.1rem;
}
.google-btn {
color: #db4437;
}
.facebook-btn {
color: #4267b2;
}
.login-link {
text-align: center;
margin-top: 20px;
}
.login-link p {
color: #718096;
}
.login-link a {
color: #667eea;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.login-link a:hover {
color: #5a67d8;
text-decoration: underline;
}
.password-strength {
margin-top: 10px;
background: #f7fafc;
border-radius: 8px;
padding: 15px;
border: 2px solid #e2e8f0;
}
.strength-meter {
height: 6px;
background: #e2e8f0;
border-radius: 3px;
margin-bottom: 10px;
overflow: hidden;
}
.strength-fill {
height: 100%;
width: 0%;
background: #e53e3e;
border-radius: 3px;
transition: all 0.3s ease;
}
.strength-text {
font-size: 0.8rem;
color: #718096;
text-align: center;
}
@media (max-width: 968px) {
.form-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.container {
flex-direction: column;
max-width: 500px;
}
.left-side {
padding: 40px 30px;
text-align: center;
}
.welcome-text h1 {
font-size: 2rem;
}
.right-side {
padding: 40px 30px;
}
.social-register {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
body {
padding: 10px;
}
.left-side, .right-side {
padding: 30px 20px;
}
.welcome-text h1 {
font-size: 1.8rem;
}
.register-header h2 {
font-size: 1.5rem;
}
}
</style>JavaScript
<script>
function togglePassword(inputId) {
const passwordInput = document.getElementById(inputId);
const eyeIcon = passwordInput.parentNode.querySelector('.password-toggle i');
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
eyeIcon.className = 'fas fa-eye-slash';
} else {
passwordInput.type = 'password';
eyeIcon.className = 'fas fa-eye';
}
}
function checkPasswordStrength(password) {
let strength = 0;
const strengthFill = document.getElementById('strengthFill');
const strengthText = document.getElementById('strengthText');
if (password.length >= 8) strength += 25;
if (/[A-Z]/.test(password)) strength += 25;
if (/[0-9]/.test(password)) strength += 25;
if (/[^A-Za-z0-9]/.test(password)) strength += 25;
strengthFill.style.width = strength + '%';
if (strength < 25) {
strengthFill.style.background = '#e53e3e';
strengthText.textContent = 'Very Weak';
strengthText.style.color = '#e53e3e';
} else if (strength < 50) {
strengthFill.style.background = '#ed8936';
strengthText.textContent = 'Weak';
strengthText.style.color = '#ed8936';
} else if (strength < 75) {
strengthFill.style.background = '#ecc94b';
strengthText.textContent = 'Good';
strengthText.style.color = '#ecc94b';
} else {
strengthFill.style.background = '#38a169';
strengthText.textContent = 'Strong';
strengthText.style.color = '#38a169';
}
}
document.getElementById('password').addEventListener('input', function() {
checkPasswordStrength(this.value);
});
document.getElementById('registerForm').addEventListener('submit', function(e) {
e.preventDefault();
const firstName = document.getElementById('firstName');
const lastName = document.getElementById('lastName');
const email = document.getElementById('email');
const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirmPassword');
const terms = document.getElementById('terms');
const errors = {
firstName: document.getElementById('firstNameError'),
lastName: document.getElementById('lastNameError'),
email: document.getElementById('emailError'),
password: document.getElementById('passwordError'),
confirmPassword: document.getElementById('confirmPasswordError'),
terms: document.getElementById('termsError')
};
let isValid = true;
// Reset errors
Object.values(errors).forEach(error => error.style.display = 'none');
[firstName, lastName, email, password, confirmPassword].forEach(input => input.classList.remove('error'));
// Validation
if (!firstName.value.trim()) {
errors.firstName.style.display = 'block';
firstName.classList.add('error');
isValid = false;
}
if (!lastName.value.trim()) {
errors.lastName.style.display = 'block';
lastName.classList.add('error');
isValid = false;
}
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!email.value || !emailRegex.test(email.value)) {
errors.email.style.display = 'block';
email.classList.add('error');
isValid = false;
}
if (password.value.length < 8) {
errors.password.style.display = 'block';
password.classList.add('error');
isValid = false;
}
if (password.value !== confirmPassword.value) {
errors.confirmPassword.style.display = 'block';
confirmPassword.classList.add('error');
isValid = false;
}
if (!terms.checked) {
errors.terms.style.display = 'block';
isValid = false;
}
if (isValid) {
const registerBtn = document.querySelector('.register-btn');
registerBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creating Account...';
registerBtn.disabled = true;
setTimeout(() => {
alert('Account created successfully! Welcome to our community. (This is a demo)');
registerBtn.innerHTML = 'Create Account';
registerBtn.disabled = false;
}, 2000);
}
});
// Add hover effects to social buttons
document.querySelectorAll('.social-btn').forEach(btn => {
btn.addEventListener('mouseenter', () => {
btn.style.transform = 'translateY(-2px)';
btn.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)';
});
btn.addEventListener('mouseleave', () => {
btn.style.transform = 'translateY(0)';
btn.style.boxShadow = 'none';
});
});
</script>