Registration Templates
HTML Registration Form Templates
Collection of user-friendly HTML registration form templates with modern designs. Find secure, responsive signup forms with complete code samples.
<form action="https://formsubmit.co/[email protected]" method="POST" class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-center text-gray-900 mb-6">Create Account</h2>
<div class="space-y-4">
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700">First Name</label>
<input type="text" name="first_name" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Last Name</label>
<input type="text" name="last_name" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" name="email" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Password</label>
<input type="password" name="password" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Confirm Password</label>
<input type="password" name="confirm_password" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div class="flex items-center">
<input type="checkbox" name="terms" required class="h-4 w-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
<label class="ml-2 block text-sm text-gray-700">
I agree to the <a href="#" class="text-indigo-600 hover:text-indigo-500">Terms and Conditions</a>
</label>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Create Account
</button>
</div>
</div>
</form>Colors
Typography
<form action="https://formsubmit.co/[email protected]" method="POST" class="max-w-md mx-auto p-8 bg-white rounded-xl shadow-lg">
<div class="flex justify-center mb-8">
<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center">
<svg class="w-8 h-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</div>
</div>
<div class="space-y-6">
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700">First Name</label>
<input type="text" name="first_name" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Last Name</label>
<input type="text" name="last_name" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" name="email" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Phone Number</label>
<input type="tel" name="phone" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Company (Optional)</label>
<input type="text" name="company" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Role</label>
<select name="role" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option value="">Select your role</option>
<option value="developer">Developer</option>
<option value="designer">Designer</option>
<option value="manager">Manager</option>
<option value="other">Other</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Password</label>
<input type="password" name="password" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Confirm Password</label>
<input type="password" name="confirm_password" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div class="space-y-4">
<div class="flex items-center">
<input type="checkbox" name="terms" required class="h-4 w-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
<label class="ml-2 block text-sm text-gray-700">
I agree to the <a href="#" class="text-indigo-600 hover:text-indigo-500">Terms and Conditions</a>
</label>
</div>
<div class="flex items-center">
<input type="checkbox" name="newsletter" class="h-4 w-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
<label class="ml-2 block text-sm text-gray-700">
Subscribe to our newsletter
</label>
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Create Account
</button>
</div>
</div>
</form>Colors
Typography
<div class="max-w-md mx-auto p-8 bg-white rounded-xl shadow-lg">
<form action="https://formsubmit.co/[email protected]" method="POST" class="space-y-8">
<!-- Progress Bar -->
<div class="relative pt-1">
<div class="flex mb-2 items-center justify-between">
<div class="text-right">
<span class="text-xs font-semibold inline-block text-indigo-600">
Step <span class="step-number">1</span> of 3
</span>
</div>
</div>
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-100">
<div class="step-progress shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-600" style="width: 33%"></div>
</div>
</div>
<!-- Step 1: Basic Info -->
<div class="step step-1">
<div class="space-y-6">
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700">First Name</label>
<input type="text" name="first_name" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Last Name</label>
<input type="text" name="last_name" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" name="email" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
</div>
</div>
<!-- Step 2: Account Details -->
<div class="step step-2 hidden">
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700">Username</label>
<input type="text" name="username" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Password</label>
<input type="password" name="password" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Confirm Password</label>
<input type="password" name="confirm_password" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
</div>
</div>
<!-- Step 3: Preferences -->
<div class="step step-3 hidden">
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700">Preferred Language</label>
<select name="language" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
<option value="de">German</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Time Zone</label>
<select name="timezone" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option value="UTC-8">Pacific Time (PT)</option>
<option value="UTC-5">Eastern Time (ET)</option>
<option value="UTC+0">Greenwich Mean Time (GMT)</option>
<option value="UTC+1">Central European Time (CET)</option>
</select>
</div>
<div class="space-y-4">
<div class="flex items-center">
<input type="checkbox" name="terms" required class="h-4 w-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
<label class="ml-2 block text-sm text-gray-700">
I agree to the <a href="#" class="text-indigo-600 hover:text-indigo-500">Terms and Conditions</a>
</label>
</div>
<div class="flex items-center">
<input type="checkbox" name="newsletter" class="h-4 w-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
<label class="ml-2 block text-sm text-gray-700">
Subscribe to our newsletter
</label>
</div>
</div>
</div>
</div>
<!-- Navigation Buttons -->
<div class="flex justify-between space-x-4">
<button type="button" class="prev-step hidden px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Previous
</button>
<button type="button" class="next-step flex-1 px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Next
</button>
<button type="submit" class="submit-form hidden flex-1 px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Create Account
</button>
</div>
</form>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('form');
const steps = form.querySelectorAll('.step');
const progressBar = form.querySelector('.step-progress');
const stepNumber = form.querySelector('.step-number');
const prevButton = form.querySelector('.prev-step');
const nextButton = form.querySelector('.next-step');
const submitButton = form.querySelector('.submit-form');
let currentStep = 1;
function updateStep(step) {
steps.forEach(s => s.classList.add('hidden'));
form.querySelector('.step-' + step).classList.remove('hidden');
stepNumber.textContent = step;
progressBar.style.width = ((step - 1) / (steps.length - 1) * 100) + '%';
prevButton.classList.toggle('hidden', step === 1);
nextButton.classList.toggle('hidden', step === steps.length);
submitButton.classList.toggle('hidden', step !== steps.length);
}
nextButton.addEventListener('click', () => {
if (currentStep < steps.length) {
currentStep++;
updateStep(currentStep);
}
});
prevButton.addEventListener('click', () => {
if (currentStep > 1) {
currentStep--;
updateStep(currentStep);
}
});
form.addEventListener('submit', (e) => {
e.preventDefault();
// Here you would typically validate and submit the form
alert('Form submitted successfully!');
});
});
</script>Colors
Typography
Ready to use registration templates?
Get started with FormSubmit - no backend required!