<div id="app"></div> /* Modern styling */
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
}
.container {
max-width: 1200px;
}
.btn-group {
background: rgba(255, 255, 255, 0.9);
padding: 0.5rem;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
flex-wrap: wrap;
justify-content: center;
}
.btn-group .btn {
border-radius: 8px;
padding: 0.75rem 1.5rem;
font-weight: 500;
transition: all 0.3s ease;
margin: 0.25rem;
}
.btn-primary {
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
border: none;
}
.btn-primary:hover {
background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
transform: translateY(-1px);
}
.btn-outline-primary {
border-color: #6366f1;
color: #6366f1;
}
.btn-outline-primary:hover {
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
border-color: transparent;
}
.btn-outline-primary.active {
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
border-color: transparent;
color: white;
}
.form-container {
max-width: 600px;
margin: 2rem auto;
padding: 2.5rem;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.form-header {
text-align: center;
margin-bottom: 2.5rem;
}
.form-header h2 {
color: #1f2937;
font-weight: 700;
font-size: 2rem;
margin-bottom: 0.5rem;
}
.form-header p {
color: #6b7280;
font-size: 1.1rem;
}
.input-group {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.input-group-text {
background: #f9fafb;
border: 1px solid #e5e7eb;
color: #6b7280;
padding: 0.75rem 1rem;
}
.form-control, .form-select {
border: 1px solid #e5e7eb;
padding: 0.75rem 1rem;
font-size: 1rem;
transition: all 0.3s ease;
}
.form-control:focus, .form-select:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.form-check-input:checked {
background-color: #6366f1;
border-color: #6366f1;
}
.form-divider {
margin: 2rem 0;
position: relative;
text-align: center;
}
.form-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #e5e7eb;
}
.form-divider span {
position: relative;
background: #fff;
padding: 0 1rem;
color: #6b7280;
font-size: 0.9rem;
}
.social-login {
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 1.5rem;
}
.social-login .btn {
flex: 1;
max-width: 160px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.custom-file-upload {
border: 2px dashed #e5e7eb;
border-radius: 12px;
padding: 2rem;
text-align: center;
cursor: pointer;
margin: 1rem 0;
transition: all 0.3s ease;
}
.custom-file-upload:hover {
border-color: #6366f1;
background-color: #f9fafb;
}
.password-strength {
height: 4px;
margin-top: 0.75rem;
border-radius: 4px;
transition: all 0.3s ease;
}
.strength-weak {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
width: 33%;
}
.strength-medium {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
width: 66%;
}
.strength-strong {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
width: 100%;
}
/* Star Rating Styles */
.star-rating {
font-size: 24px;
color: #6366f1;
}
.star-rating.active {
color: #4f46e5;
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
form {
animation: fadeIn 0.5s ease-out;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.form-container {
margin: 1rem;
padding: 1.5rem;
}
.btn-group {
flex-wrap: wrap;
}
.btn-group .btn {
margin: 0.25rem;
flex: 1;
min-width: 140px;
}
}// Form state
let activeForm = 'login';
let passwordStrength = '';
let rating = 0;
// Render the active form
function renderForm() {
const app = document.getElementById('app');
app.innerHTML = `
<div class="container py-5">
<div class="row mb-4">
<div class="col text-center">
<div class="btn-group" role="group">
${createFormButton('login', '👤', 'Login')}
${createFormButton('register', '✉️', 'Register')}
${createFormButton('contact', '📨', 'Contact')}
${createFormButton('search', '🔍', 'Search')}
${createFormButton('newsletter', '🔔', 'Newsletter')}
${createFormButton('payment', '💳', 'Payment')}
${createFormButton('feedback', '💬', 'Feedback')}
</div>
</div>
</div>
<div class="form-container">
${getFormContent()}
</div>
</div>
`;
setupEventListeners();
}
// Create form navigation button
function createFormButton(formType, icon, text) {
return `
<button
class="btn ${activeForm === formType ? 'btn-primary' : 'btn-outline-primary'}"
onclick="setActiveForm('${formType}')"
>
<span class="me-2">${icon}</span>
${text}
</button>
`;
}
// Set active form and re-render
function setActiveForm(form) {
activeForm = form;
renderForm();
}
// Check password strength
function checkPasswordStrength(password) {
if (password.length < 6) {
passwordStrength = 'weak';
} else if (password.length < 10) {
passwordStrength = 'medium';
} else {
passwordStrength = 'strong';
}
document.querySelector('.password-strength').className = `password-strength strength-${passwordStrength}`;
}
// Set rating
function setRating(value) {
rating = value;
renderForm();
}
// Handle form submission
function handleSubmit(event) {
event.preventDefault();
console.log('Form submitted');
}
// Setup event listeners
function setupEventListeners() {
// Add any necessary event listeners here
}
// Get the content for the active form
function getFormContent() {
switch(activeForm) {
case 'login':
return `
<form onsubmit="handleSubmit(event)">
<div class="form-header">
<h2>Welcome Back</h2>
<p>Please login to your account</p>
</div>
<div class="mb-4">
<div class="input-group">
<span class="input-group-text">✉️</span>
<input type="email" class="form-control" placeholder="Email" required />
</div>
</div>
<div class="mb-4">
<div class="input-group">
<span class="input-group-text">🔒</span>
<input type="password" class="form-control" placeholder="Password" required />
</div>
</div>
<div class="mb-4 d-flex justify-content-between align-items-center">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="rememberMe" />
<label class="form-check-label" for="rememberMe">Remember me</label>
</div>
<a href="#" class="text-decoration-none text-primary">Forgot password?</a>
</div>
<button type="submit" class="btn btn-primary w-100 py-3">Login</button>
<div class="form-divider">
<span>or continue with</span>
</div>
<div class="social-login">
<button type="button" class="btn btn-outline-primary">
<span class="me-2">🐱</span>
<span>GitHub</span>
</button>
<button type="button" class="btn btn-outline-primary">
<span class="me-2">👥</span>
<span>Facebook</span>
</button>
</div>
</form>
`;
case 'register':
return `
<form onsubmit="handleSubmit(event)">
<div class="form-header">
<h2>Create Account</h2>
<p>Fill in your details to get started</p>
</div>
<div class="mb-4">
<div class="input-group">
<span class="input-group-text">👤</span>
<input type="text" class="form-control" placeholder="Full Name" required />
</div>
</div>
<div class="mb-4">
<div class="input-group">
<span class="input-group-text">✉️</span>
<input type="email" class="form-control" placeholder="Email" required />
</div>
</div>
<div class="mb-4">
<div class="input-group">
<span class="input-group-text">🔒</span>
<input
type="password"
class="form-control"
placeholder="Password"
onkeyup="checkPasswordStrength(this.value)"
required
/>
</div>
<div class="password-strength"></div>
<small class="text-muted d-block mt-2">Password must be at least 6 characters long</small>
</div>
<div class="mb-4">
<div class="input-group">
<span class="input-group-text">📱</span>
<input type="tel" class="form-control" placeholder="Phone (optional)" />
</div>
</div>
<button type="submit" class="btn btn-primary w-100 py-3">Create Account</button>
<p class="text-center mt-4">
Already have an account? <a href="#" onclick="setActiveForm('login')" class="text-primary text-decoration-none">Login here</a>
</p>
</form>
`;
case 'contact':
return `
<form onsubmit="handleSubmit(event)">
<div class="form-header">
<h2>Contact Us</h2>
<p>We'd love to hear from you</p>
</div>
<div class="mb-4">
<div class="input-group">
<span class="input-group-text">👤</span>
<input type="text" class="form-control" placeholder="Your Name" required />
</div>
</div>
<div class="mb-4">
<div class="input-group">
<span class="input-group-text">✉️</span>
<input type="email" class="form-control" placeholder="Your Email" required />
</div>
</div>
<div class="mb-4">
<select class="form-select py-3">
<option>General Inquiry</option>
<option>Technical Support</option>
<option>Billing Question</option>
<option>Other</option>
</select>
</div>
<div class="mb-4">
<textarea
class="form-control"
rows="5"
placeholder="Your Message"
required
style="resize: none"
></textarea>
</div>
<div class="mb-4">
<label class="custom-file-upload w-100">
<input type="file" class="d-none" />
<div class="mb-2">📎</div>
<div class="fw-medium">Drop files here or click to upload</div>
<small class="text-muted">Maximum file size: 5MB</small>
</label>
</div>
<button type="submit" class="btn btn-primary w-100 py-3">
<span class="me-2">📨</span>
Send Message
</button>
</form>
`;
case 'search':
return `
<form onsubmit="handleSubmit(event)">
<div class="form-header">
<h2>Search</h2>
<p>Find what you're looking for</p>
</div>
<div class="mb-4">
<div class="input-group">
<input type="search" class="form-control py-3" placeholder="Search..." />
<button class="btn btn-primary px-4">
🔍
</button>
</div>
</div>
<div class="mb-4">
<div class="row g-3">
<div class="col-md-6">
<select class="form-select py-3">
<option>All Categories</option>
<option>Products</option>
<option>Services</option>
<option>Articles</option>
</select>
</div>
<div class="col-md-6">
<select class="form-select py-3">
<option>Sort by: Relevance</option>
<option>Newest First</option>
<option>Oldest First</option>
<option>Most Popular</option>
</select>
</div>
</div>
</div>
<div class="mb-4">
<div class="d-flex gap-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="exactMatch" />
<label class="form-check-label" for="exactMatch">Exact Match</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="includeArchived" />
<label class="form-check-label" for="includeArchived">Include Archived</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary w-100 py-3">
<span class="me-2">🔍</span>
Advanced Search
</button>
</form>
`;
case 'newsletter':
return `
<form onsubmit="handleSubmit(event)">
<div class="form-header">
<h2>Subscribe to Newsletter</h2>
<p>Stay updated with our latest news and updates</p>
</div>
<div class="mb-4">
<div class="input-group">
<span class="input-group-text">👤</span>
<input type="text" class="form-control" placeholder="Full Name" required />
</div>
</div>
<div class="mb-4">
<div class="input-group">
<span class="input-group-text">✉️</span>
<input type="email" class="form-control" placeholder="Email Address" required />
</div>
</div>
<div class="mb-4">
<p class="mb-3 fw-medium">Interests (Optional)</p>
<div class="d-flex flex-wrap gap-3">
${['Technology', 'Business', 'Design', 'Marketing'].map(interest => `
<div class="form-check">
<input class="form-check-input" type="checkbox" id="${interest}" />
<label class="form-check-label" for="${interest}">${interest}</label>
</div>
`).join('')}
</div>
</div>
<div class="mb-4">
<select class="form-select py-3">
<option>Weekly Digest</option>
<option>Daily Updates</option>
<option>Monthly Newsletter</option>
</select>
</div>
<button type="submit" class="btn btn-primary w-100 py-3">
<span class="me-2">🔔</span>
Subscribe Now
</button>
</form>
`;
case 'payment':
return `
<form onsubmit="handleSubmit(event)">
<div class="form-header">
<h2>Payment Details</h2>
<p>Complete your payment securely</p>
</div>
<div class="mb-4">
<div class="input-group">
<span class="input-group-text">💳</span>
<input
type="text"
class="form-control"
placeholder="Card Number"
pattern="[0-9]{16}"
maxlength="16"
required
/>
</div>
</div>
<div class="row mb-4">
<div class="col">
<div class="input-group">
<span class="input-group-text">📅</span>
<input
type="text"
class="form-control"
placeholder="MM/YY"
pattern="[0-9]{2}/[0-9]{2}"
maxlength="5"
required
/>
</div>
</div>
<div class="col">
<div class="input-group">
<span class="input-group-text">🔒</span>
<input
type="text"
class="form-control"
placeholder="CVV"
pattern="[0-9]{3,4}"
maxlength="4"
required
/>
</div>
</div>
</div>
<div class="mb-4">
<div class="input-group">
<span class="input-group-text">👤</span>
<input type="text" class="form-control" placeholder="Cardholder Name" required />
</div>
</div>
<div class="mb-4">
<select class="form-select py-3">
<option>United States (USD)</option>
<option>European Union (EUR)</option>
<option>United Kingdom (GBP)</option>
<option>Japan (JPY)</option>
</select>
</div>
<button type="submit" class="btn btn-primary w-100 py-3">
<span class="me-2">💳</span>
Pay Now
</button>
<p class="text-center mt-3">
<small class="text-muted">Your payment information is encrypted and secure</small>
</p>
</form>
`;
case 'feedback':
return `
<form onsubmit="handleSubmit(event)">
<div class="form-header">
<h2>Share Your Feedback</h2>
<p>Help us improve our services</p>
</div>
<div class="mb-4">
<p class="mb-3 fw-medium">Overall Rating</p>
<div class="d-flex gap-2 justify-content-center mb-3">
${[1, 2, 3, 4, 5].map(star => `
<button
type="button"
class="btn btn-outline-primary p-2 ${rating >= star ? 'active' : ''}"
onclick="setRating(${star})"
>
⭐
</button>
`).join('')}
</div>
</div>
<div class="mb-4">
<select class="form-select py-3">
<option>What aspect are you reviewing?</option>
<option>Product Quality</option>
<option>Customer Service</option>
<option>Website Experience</option>
<option>Delivery Service</option>
</select>
</div>
<div class="mb-4">
<textarea
class="form-control"
rows="4"
placeholder="What did you like or dislike? Any suggestions for improvement?"
required
style="resize: none"
></textarea>
</div>
<div class="mb-4">
<div class="input-group">
<span class="input-group-text">✉️</span>
<input type="email" class="form-control" placeholder="Email (optional)" />
</div>
<small class="text-muted d-block mt-2">For follow-up questions only</small>
</div>
<div class="mb-4">
<label class="custom-file-upload w-100">
<input type="file" class="d-none" accept="image/*" />
<div class="mb-2">📎</div>
<div class="fw-medium">Add screenshots (optional)</div>
<small class="text-muted">PNG, JPG up to 5MB</small>
</label>
</div>
<button type="submit" class="btn btn-primary w-100 py-3">
<span class="me-2">💬</span>
Submit Feedback
</button>
</form>
`;
default:
return `
<div class="form-header">
<h2>Form Not Implemented</h2>
<p>Please select another form type</p>
</div>
`;
}
}
// Initial render
document.addEventListener('DOMContentLoaded', renderForm);
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.