<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Modal Form</title>
<!-- Google Roboto Font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<!-- Bootstrap 5 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Ionicons -->
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/7.1.0/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/7.1.0/ionicons/ionicons.js"></script>
<style>
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.modal-content {
border-radius: 15px;
border: none;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.modal-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 15px 15px 0 0;
border: none;
}
.form-floating > label {
color: #6c757d;
}
.form-control:focus {
border-color: #667eea;
box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
padding: 10px 30px;
transition: transform 0.2s;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.trigger-btn {
background: white;
color: #667eea;
font-weight: 500;
padding: 15px 40px;
border-radius: 50px;
border: none;
font-size: 18px;
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
transition: all 0.3s;
}
.trigger-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
ion-icon {
vertical-align: middle;
margin-right: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="text-center">
<button type="button" class="trigger-btn" data-bs-toggle="modal" data-bs-target="#formModal">
<ion-icon name="person-add-outline" style="font-size: 24px;"></ion-icon>
Open Registration Form
</button>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="formModal" tabindex="-1" aria-labelledby="formModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="formModalLabel">
<ion-icon name="person-circle-outline" style="font-size: 28px;"></ion-icon>
User Registration
</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-4">
<form id="registrationForm">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="fullName" placeholder="Full Name" required>
<label for="fullName">
<ion-icon name="person-outline"></ion-icon> Full Name
</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="email" placeholder="Email Address" required>
<label for="email">
<ion-icon name="mail-outline"></ion-icon> Email Address
</label>
</div>
<div class="form-floating mb-3">
<input type="tel" class="form-control" id="phone" placeholder="Phone Number">
<label for="phone">
<ion-icon name="call-outline"></ion-icon> Phone Number
</label>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" id="password" placeholder="Password" required>
<label for="password">
<ion-icon name="lock-closed-outline"></ion-icon> Password
</label>
</div>
<div class="form-floating mb-3">
<select class="form-select" id="country" required>
<option value="" selected>Choose...</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="ca">Canada</option>
<option value="au">Australia</option>
<option value="pk">Pakistan</option>
</select>
<label for="country">
<ion-icon name="location-outline"></ion-icon> Country
</label>
</div>
<div class="form-floating mb-4">
<textarea class="form-control" id="message" placeholder="Message" style="height: 100px"></textarea>
<label for="message">
<ion-icon name="chatbubble-outline"></ion-icon> Message (Optional)
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="terms" required>
<label class="form-check-label" for="terms">
I agree to the terms and conditions
</label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
<ion-icon name="close-outline"></ion-icon> Close
</button>
<button type="submit" form="registrationForm" class="btn btn-primary">
<ion-icon name="checkmark-outline"></ion-icon> Submit
</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById('registrationForm').addEventListener('submit', function(e) {
e.preventDefault();
if (this.checkValidity()) {
const formData = {
fullName: document.getElementById('fullName').value,
email: document.getElementById('email').value,
phone: document.getElementById('phone').value,
country: document.getElementById('country').value,
message: document.getElementById('message').value
};
console.log('Form submitted:', formData);
alert('Form submitted successfully!');
// Close modal
const modal = bootstrap.Modal.getInstance(document.getElementById('formModal'));
modal.hide();
// Reset form
this.reset();
} else {
this.reportValidity();
}
});
</script>
</body>
</html>
No comments yet. Be the first!