Project Setup

npx create-react-app 100-login-forms
cd 100-login-forms
npm install styled-components react-icons framer-motion @mui/material @chakra-ui/react react-bootstrap

Now, here are all 100 forms with their introductions and features:

---

Form 1: Classic Minimalist Login

Introduction: A clean, centered login form with essential fields and a gradient background. Perfect for modern web applications.

Features: Email validation, password masking, smooth hover effects, responsive design.

import React, { useState } from 'react';
import styled from 'styled-components';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
`;
const Form = styled.form`
background: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
width: 350px;
`;
const Title = styled.h2`
text-align: center;
color: #333;
margin-bottom: 30px;
`;
const Input = styled.input`
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
`;
const Button = styled.button`
width: 100%;
padding: 12px;
background: #667eea;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
&:hover {
background: #764ba2;
}
`;
const Form1 = () => {
const [formData, setFormData] = useState({ email: '', password: '' });
const handleSubmit = (e) => {
e.preventDefault();
console.log('Login attempt:', formData);
};
return (
<Container>
<Form onSubmit={handleSubmit}>
<Title>Welcome Back</Title>
<Input
type="email"
placeholder="Email"
value={formData.email}
onChange={(e) => setFormData({...formData, email: e.target.value})}
required
/>
<Input
type="password"
placeholder="Password"
value={formData.password}
onChange={(e) => setFormData({...formData, password: e.target.value})}
required
/>
<Button type="submit">Sign In</Button>
</Form>
</Container>
);
};
export default Form1;

---

Form 2: Social Media Login Hub

Introduction: A comprehensive login system that integrates with major social platforms. Features one-click authentication options.

Features: Social login buttons (Google, Facebook, Twitter), remember me checkbox, forgot password link.

import React from 'react';
import styled from 'styled-components';
import { FcGoogle } from 'react-icons/fc';
import { FaFacebook, FaTwitter } from 'react-icons/fa';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f5f5f5;
`;
const Form = styled.form`
background: white;
padding: 40px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
width: 400px;
`;
const SocialButton = styled.button`
width: 100%;
padding: 12px;
margin: 8px 0;
border: 1px solid #ddd;
border-radius: 25px;
background: white;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
transition: all 0.3s;
&:hover {
background: ${props => props.bg || '#f8f9fa'};
transform: translateY(-2px);
}
`;
const Divider = styled.div`
text-align: center;
margin: 20px 0;
position: relative;
&::before, &::after {
content: '';
position: absolute;
top: 50%;
width: 45%;
height: 1px;
background: #ddd;
}
&::before { left: 0; }
&::after { right: 0; }
`;
const Form2 = () => {
const handleSocialLogin = (provider) => {
console.log(`Logging in with ${provider}`);
};
return (
<Container>
<Form>
<h2 style={{ textAlign: 'center', marginBottom: 30 }}>Welcome Back</h2>
<SocialButton onClick={() => handleSocialLogin('Google')} bg="#f8f9fa">
<FcGoogle size={20} /> Continue with Google
</SocialButton>
<SocialButton onClick={() => handleSocialLogin('Facebook')} bg="#f0f2f5">
<FaFacebook size={20} color="#1877f2" /> Continue with Facebook
</SocialButton>
<SocialButton onClick={() => handleSocialLogin('Twitter')} bg="#f8f9fa">
<FaTwitter size={20} color="#1da1f2" /> Continue with Twitter
</SocialButton>
<Divider>or</Divider>
<input type="email" placeholder="Email" style={inputStyle} />
<input type="password" placeholder="Password" style={inputStyle} />
<div style={{ display: 'flex', justifyContent: 'space-between', margin: '15px 0' }}>
<label>
<input type="checkbox" /> Remember me
</label>
<a href="#" style={{ color: '#667eea', textDecoration: 'none' }}>Forgot Password?</a>
</div>
<button style={loginButtonStyle}>Sign In</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '8px 0',
border: '1px solid #ddd',
borderRadius: '5px',
fontSize: '16px'
};
const loginButtonStyle = {
width: '100%',
padding: '12px',
background: '#667eea',
color: 'white',
border: 'none',
borderRadius: '25px',
fontSize: '16px',
cursor: 'pointer',
marginTop: '15px'
};
export default Form2;

---

Form 3: Password Strength Signup

Introduction: A secure registration form with real-time password strength indicator and validation rules.

Features: Password strength meter, password confirmation, strength requirements checklist, visual feedback.

import React, { useState } from 'react';
import styled from 'styled-components';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1a1a2e;
`;
const Form = styled.form`
background: #16213e;
padding: 40px;
border-radius: 10px;
width: 400px;
color: white;
`;
const Input = styled.input`
width: 100%;
padding: 12px;
margin: 8px 0;
border: 1px solid #0f3460;
border-radius: 5px;
background: #0f3460;
color: white;
font-size: 16px;
`;
const StrengthMeter = styled.div`
height: 5px;
background: #0f3460;
margin: 10px 0;
border-radius: 5px;
overflow: hidden;
`;
const StrengthBar = styled.div`
height: 100%;
width: ${props => props.strength}%;
background: ${props => {
if (props.strength < 30) return '#e74c3c';
if (props.strength < 60) return '#f39c12';
if (props.strength < 80) return '#3498db';
return '#2ecc71';
}};
transition: width 0.3s;
`;
const Requirement = styled.div`
color: ${props => props.met ? '#2ecc71' : '#e74c3c'};
font-size: 14px;
margin: 5px 0;
display: flex;
align-items: center;
gap: 5px;
`;
const Form3 = () => {
const [formData, setFormData] = useState({
username: '',
email: '',
password: '',
confirmPassword: ''
});
const calculateStrength = (password) => {
let strength = 0;
if (password.length >= 8) strength += 25;
if (password.match(/[a-z]+/)) strength += 25;
if (password.match(/[A-Z]+/)) strength += 25;
if (password.match(/[0-9]+/)) strength += 15;
if (password.match(/[$@#&!]+/)) strength += 10;
return strength;
};
const requirements = [
{ text: 'At least 8 characters', test: (p) => p.length >= 8 },
{ text: 'Contains lowercase letter', test: (p) => /[a-z]/.test(p) },
{ text: 'Contains uppercase letter', test: (p) => /[A-Z]/.test(p) },
{ text: 'Contains number', test: (p) => /[0-9]/.test(p) },
{ text: 'Contains special character', test: (p) => /[$@#&!]/.test(p) },
{ text: 'Passwords match', test: (p) => p === formData.confirmPassword }
];
return (
<Container>
<Form onSubmit={(e) => e.preventDefault()}>
<h2 style={{ textAlign: 'center', marginBottom: 30 }}>Create Account</h2>
<Input
type="text"
placeholder="Username"
value={formData.username}
onChange={(e) => setFormData({...formData, username: e.target.value})}
/>
<Input
type="email"
placeholder="Email"
value={formData.email}
onChange={(e) => setFormData({...formData, email: e.target.value})}
/>
<Input
type="password"
placeholder="Password"
value={formData.password}
onChange={(e) => setFormData({...formData, password: e.target.value})}
/>
<StrengthMeter>
<StrengthBar strength={calculateStrength(formData.password)} />
</StrengthMeter>
<Input
type="password"
placeholder="Confirm Password"
value={formData.confirmPassword}
onChange={(e) => setFormData({...formData, confirmPassword: e.target.value})}
/>
<div style={{ marginTop: 20 }}>
{requirements.map((req, index) => (
<Requirement key={index} met={req.test(formData.password)}>
{req.test(formData.password) ? '✓' : '✗'} {req.text}
</Requirement>
))}
</div>
<button style={signupButtonStyle}>Sign Up</button>
</Form>
</Container>
);
};
const signupButtonStyle = {
width: '100%',
padding: '12px',
background: '#e94560',
color: 'white',
border: 'none',
borderRadius: '5px',
fontSize: '16px',
cursor: 'pointer',
marginTop: 20
};
export default Form3;

---

Form 4: Two-Factor Authentication

Introduction: Enhanced security form with OTP verification for two-factor authentication.

Features: OTP input fields, timer for code expiration, auto-focus between fields, resend option.

import React, { useState, useRef, useEffect } from 'react';
import styled from 'styled-components';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #2c3e50;
`;
const Form = styled.div`
background: white;
padding: 40px;
border-radius: 10px;
text-align: center;
width: 400px;
`;
const OtpInput = styled.input`
width: 50px;
height: 50px;
margin: 0 5px;
text-align: center;
font-size: 20px;
border: 2px solid #3498db;
border-radius: 5px;
outline: none;
&:focus {
border-color: #2980b9;
}
`;
const Timer = styled.div`
color: #e74c3c;
font-size: 18px;
margin: 20px 0;
`;
const Form4 = () => {
const [otp, setOtp] = useState(['', '', '', '', '', '']);
const [timer, setTimer] = useState(60);
const inputRefs = useRef([]);
useEffect(() => {
if (timer > 0) {
const interval = setInterval(() => setTimer(timer - 1), 1000);
return () => clearInterval(interval);
}
}, [timer]);
const handleChange = (index, value) => {
if (value.length <= 1 && /^\d*$/.test(value)) {
const newOtp = [...otp];
newOtp[index] = value;
setOtp(newOtp);
if (value && index < 5) {
inputRefs.current[index + 1].focus();
}
}
};
const handleKeyDown = (index, e) => {
if (e.key === 'Backspace' && !otp[index] && index > 0) {
inputRefs.current[index - 1].focus();
}
};
const handleSubmit = () => {
const otpCode = otp.join('');
console.log('Verifying OTP:', otpCode);
};
return (
<Container>
<Form>
<h2>Two-Factor Authentication</h2>
<p style={{ color: '#7f8c8d', marginBottom: 30 }}>
Enter the 6-digit code sent to your email
</p>
<div style={{ display: 'flex', justifyContent: 'center', marginBottom: 20 }}>
{otp.map((digit, index) => (
<OtpInput
key={index}
type="text"
maxLength="1"
value={digit}
ref={(el) => inputRefs.current[index] = el}
onChange={(e) => handleChange(index, e.target.value)}
onKeyDown={(e) => handleKeyDown(index, e)}
/>
))}
</div>
<Timer>
{Math.floor(timer / 60)}:{(timer % 60).toString().padStart(2, '0')}
</Timer>
<button style={verifyButtonStyle} onClick={handleSubmit}>
Verify Code
</button>
<p style={{ marginTop: 20 }}>
Didn't receive code?{' '}
<button style={resendButtonStyle} disabled={timer > 0}>
Resend {timer > 0 && `(${timer}s)`}
</button>
</p>
</Form>
</Container>
);
};
const verifyButtonStyle = {
width: '100%',
padding: '12px',
background: '#3498db',
color: 'white',
border: 'none',
borderRadius: '5px',
fontSize: '16px',
cursor: 'pointer'
};
const resendButtonStyle = {
background: 'none',
border: 'none',
color: '#3498db',
cursor: 'pointer',
textDecoration: 'underline',
fontSize: '14px'
};
export default Form4;

---

Form 5: Biometric Login (Fingerprint)

Introduction: Modern authentication using biometric fingerprint scanning simulation.

Features: Fingerprint animation, touch ID simulation, fallback password option.

import React, { useState } from 'react';
import styled, { keyframes } from 'styled-components';
import { FaFingerprint } from 'react-icons/fa';
const pulse = keyframes`
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.7; }
100% { transform: scale(1); opacity: 1; }
`;
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
`;
const Form = styled.div`
background: white;
padding: 40px;
border-radius: 20px;
text-align: center;
width: 350px;
`;
const FingerprintIcon = styled(FaFingerprint)`
font-size: 100px;
color: #667eea;
animation: ${pulse} 2s infinite;
cursor: pointer;
margin: 20px 0;
`;
const Form5 = () => {
const [showPassword, setShowPassword] = useState(false);
const [scanning, setScanning] = useState(false);
const handleFingerprint = () => {
setScanning(true);
setTimeout(() => {
setScanning(false);
console.log('Fingerprint authenticated');
}, 2000);
};
return (
<Container>
<Form>
<h2>Biometric Login</h2>
<p style={{ color: '#666', marginBottom: 20 }}>
Touch the fingerprint sensor to login
</p>
<FingerprintIcon onClick={handleFingerprint} />
{scanning && (
<p style={{ color: '#667eea', marginTop: 10 }}>
Scanning fingerprint...
</p>
)}
<p style={{ margin: '20px 0' }}>or</p>
{!showPassword ? (
<button style={passwordButtonStyle} onClick={() => setShowPassword(true)}>
Use Password Instead
</button>
) : (
<div>
<input
type="password"
placeholder="Enter password"
style={inputStyle}
/>
<button style={loginButtonStyle}>Login</button>
</div>
)}
</Form>
</Container>
);
};
const passwordButtonStyle = {
background: 'none',
border: '1px solid #667eea',
color: '#667eea',
padding: '10px 20px',
borderRadius: '5px',
cursor: 'pointer'
};
const inputStyle = {
width: '100%',
padding: '10px',
margin: '10px 0',
border: '1px solid #ddd',
borderRadius: '5px'
};
const loginButtonStyle = {
width: '100%',
padding: '10px',
background: '#667eea',
color: 'white',
border: 'none',
borderRadius: '5px',
cursor: 'pointer'
};
export default Form5;

---

Form 6: Multi-Step Registration

Introduction: A wizard-style registration form that breaks down the signup process into manageable steps.

Features: Progress indicator, step navigation, data persistence between steps, validation per step.

import React, { useState } from 'react';
import styled from 'styled-components';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f8f9fa;
`;
const Form = styled.div`
background: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
width: 500px;
`;
const ProgressBar = styled.div`
display: flex;
justify-content: space-between;
margin-bottom: 40px;
position: relative;
&::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
background: #e9ecef;
transform: translateY(-50%);
z-index: 1;
}
`;
const Step = styled.div`
width: 35px;
height: 35px;
border-radius: 50%;
background: ${props => props.active ? '#007bff' : '#e9ecef'};
color: ${props => props.active ? 'white' : '#6c757d'};
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
transition: all 0.3s;
`;
const Form6 = () => {
const [step, setStep] = useState(1);
const [formData, setFormData] = useState({
// Step 1
name: '',
email: '',
// Step 2
phone: '',
address: '',
// Step 3
username: '',
password: ''
});
const steps = ['Account', 'Personal', 'Security'];
const nextStep = () => {
setStep(step + 1);
};
const prevStep = () => {
setStep(step - 1);
};
const renderStep = () => {
switch(step) {
case 1:
return (
<div>
<h3>Account Information</h3>
<input
type="text"
placeholder="Full Name"
value={formData.name}
onChange={(e) => setFormData({...formData, name: e.target.value})}
style={inputStyle}
/>
<input
type="email"
placeholder="Email"
value={formData.email}
onChange={(e) => setFormData({...formData, email: e.target.value})}
style={inputStyle}
/>
</div>
);
case 2:
return (
<div>
<h3>Personal Details</h3>
<input
type="tel"
placeholder="Phone Number"
value={formData.phone}
onChange={(e) => setFormData({...formData, phone: e.target.value})}
style={inputStyle}
/>
<input
type="text"
placeholder="Address"
value={formData.address}
onChange={(e) => setFormData({...formData, address: e.target.value})}
style={inputStyle}
/>
</div>
);
case 3:
return (
<div>
<h3>Security Setup</h3>
<input
type="text"
placeholder="Username"
value={formData.username}
onChange={(e) => setFormData({...formData, username: e.target.value})}
style={inputStyle}
/>
<input
type="password"
placeholder="Password"
value={formData.password}
onChange={(e) => setFormData({...formData, password: e.target.value})}
style={inputStyle}
/>
</div>
);
default:
return null;
}
};
return (
<Container>
<Form>
<ProgressBar>
{steps.map((label, index) => (
<Step key={index} active={index + 1 === step}>
{index + 1}
</Step>
))}
</ProgressBar>
{renderStep()}
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 20 }}>
{step > 1 && (
<button onClick={prevStep} style={secondaryButtonStyle}>
Previous
</button>
)}
{step < 3 ? (
<button onClick={nextStep} style={primaryButtonStyle}>
Next
</button>
) : (
<button onClick={() => console.log('Form submitted:', formData)} style={primaryButtonStyle}>
Submit
</button>
)}
</div>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '10px 0',
border: '1px solid #ced4da',
borderRadius: '5px',
fontSize: '16px'
};
const primaryButtonStyle = {
padding: '10px 30px',
background: '#007bff',
color: 'white',
border: 'none',
borderRadius: '5px',
cursor: 'pointer'
};
const secondaryButtonStyle = {
padding: '10px 30px',
background: '#6c757d',
color: 'white',
border: 'none',
borderRadius: '5px',
cursor: 'pointer'
};
export default Form6;

---

Form 7: Magic Link Email Login

Introduction: Passwordless authentication using email magic links for secure and convenient access.

Features: Email input with validation, loading states, success feedback, error handling.

import React, { useState } from 'react';
import styled, { keyframes } from 'styled-components';
import { FiMail, FiCheck, FiX } from 'react-icons/fi';
const spin = keyframes`
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
`;
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f8f9fa;
`;
const Form = styled.div`
background: white;
padding: 40px;
border-radius: 10px;
text-align: center;
width: 400px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
`;
const IconWrapper = styled.div`
font-size: 60px;
color: #28a745;
margin-bottom: 20px;
`;
const Loader = styled.div`
border: 3px solid #f3f3f3;
border-top: 3px solid #28a745;
border-radius: 50%;
width: 40px;
height: 40px;
animation: ${spin} 1s linear infinite;
margin: 20px auto;
`;
const Form7 = () => {
const [email, setEmail] = useState('');
const [status, setStatus] = useState('idle'); // idle, loading, success, error
const handleSubmit = async (e) => {
e.preventDefault();
setStatus('loading');
// Simulate API call
setTimeout(() => {
if (email.includes('@')) {
setStatus('success');
} else {
setStatus('error');
}
}, 2000);
};
return (
<Container>
<Form>
<IconWrapper>
<FiMail />
</IconWrapper>
<h2>Magic Link Login</h2>
<p style={{ color: '#6c757d', marginBottom: 30 }}>
Enter your email and we'll send you a magic link to sign in instantly.
</p>
{status === 'idle' && (
<form onSubmit={handleSubmit}>
<input
type="email"
placeholder="[email protected]"
value={email}
onChange={(e) => setEmail(e.target.value)}
style={inputStyle}
required
/>
<button type="submit" style={buttonStyle}>
Send Magic Link
</button>
</form>
)}
{status === 'loading' && (
<div>
<Loader />
<p>Sending magic link to {email}...</p>
</div>
)}
{status === 'success' && (
<div>
<FiCheck size={50} color="#28a745" />
<h3 style={{ color: '#28a745', margin: '10px 0' }}>Check Your Email!</h3>
<p>We've sent a magic link to {email}. Click the link to sign in.</p>
<button 
onClick={() => setStatus('idle')} 
style={{ ...buttonStyle, background: '#6c757d', marginTop: 20 }}
>
Use Different Email
</button>
</div>
)}
{status === 'error' && (
<div>
<FiX size={50} color="#dc3545" />
<h3 style={{ color: '#dc3545', margin: '10px 0' }}>Invalid Email</h3>
<p>Please enter a valid email address.</p>
<button 
onClick={() => setStatus('idle')} 
style={{ ...buttonStyle, background: '#dc3545', marginTop: 20 }}
>
Try Again
</button>
</div>
)}
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '10px 0',
border: '1px solid #ced4da',
borderRadius: '5px',
fontSize: '16px'
};
const buttonStyle = {
width: '100%',
padding: '12px',
background: '#28a745',
color: 'white',
border: 'none',
borderRadius: '5px',
fontSize: '16px',
cursor: 'pointer'
};
export default Form7;

---

Form 8: QR Code Login

Introduction: Innovative login method using QR code scanning for mobile authentication.

Features: Dynamic QR code generation, session tracking, mobile responsive design.

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import QRCode from 'qrcode.react';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
`;
const Form = styled.div`
background: white;
padding: 40px;
border-radius: 10px;
text-align: center;
width: 400px;
`;
const QrWrapper = styled.div`
padding: 20px;
background: #f8f9fa;
border-radius: 10px;
margin: 20px 0;
display: inline-block;
`;
const SessionId = styled.div`
font-family: monospace;
background: #e9ecef;
padding: 10px;
border-radius: 5px;
margin: 10px 0;
font-size: 14px;
`;
const Form8 = () => {
const [sessionId, setSessionId] = useState('');
const [scanned, setScanned] = useState(false);
useEffect(() => {
// Generate random session ID
setSessionId(Math.random().toString(36).substring(7));
// Simulate QR scan after 10 seconds
const timer = setTimeout(() => {
setScanned(true);
}, 10000);
return () => clearTimeout(timer);
}, []);
return (
<Container>
<Form>
<h2>QR Code Login</h2>
<p style={{ color: '#666', marginBottom: 20 }}>
Scan this QR code with your mobile device
</p>
<QrWrapper>
<QRCode 
value={`login-session:${sessionId}`} 
size={200}
level="H"
includeMargin={true}
/>
</QrWrapper>
<SessionId>
Session ID: {sessionId}
</SessionId>
{scanned ? (
<div style={{ color: '#28a745', marginTop: 20 }}>
✓ QR Code Scanned! Redirecting...
</div>
) : (
<div style={{ marginTop: 20 }}>
<p>Waiting for scan...</p>
<div style={loaderStyle}></div>
</div>
)}
<p style={{ marginTop: 20, fontSize: 14, color: '#999' }}>
QR code expires in 5 minutes
</p>
</Form>
</Container>
);
};
const loaderStyle = {
border: '3px solid #f3f3f3',
borderTop: '3px solid #667eea',
borderRadius: '50%',
width: '30px',
height: '30px',
animation: 'spin 1s linear infinite',
margin: '10px auto'
};
export default Form8;

---

Form 9: Phone Number Verification

Introduction: Mobile-first authentication using phone numbers and SMS verification codes.

Features: Country code selector, phone formatting, SMS code input, resend timer.

import React, { useState } from 'react';
import styled from 'styled-components';
import PhoneInput from 'react-phone-input-2';
import 'react-phone-input-2/lib/style.css';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #2c3e50;
`;
const Form = styled.div`
background: white;
padding: 40px;
border-radius: 10px;
width: 400px;
`;
const CodeInput = styled.input`
width: 50px;
height: 50px;
text-align: center;
font-size: 20px;
margin: 0 5px;
border: 2px solid #3498db;
border-radius: 5px;
`;
const Form9 = () => {
const [step, setStep] = useState(1);
const [phone, setPhone] = useState('');
const [code, setCode] = useState(['', '', '', '']);
const [timer, setTimer] = useState(60);
const sendCode = () => {
setStep(2);
// Start countdown
const interval = setInterval(() => {
setTimer((t) => {
if (t <= 1) {
clearInterval(interval);
return 0;
}
return t - 1;
});
}, 1000);
};
const verifyCode = () => {
const verificationCode = code.join('');
console.log('Verifying:', verificationCode);
};
return (
<Container>
<Form>
{step === 1 ? (
<>
<h2>Phone Verification</h2>
<p style={{ color: '#7f8c8d', marginBottom: 20 }}>
Enter your phone number to receive a verification code
</p>
<PhoneInput
country={'us'}
value={phone}
onChange={setPhone}
containerStyle={{ width: '100%' }}
inputStyle={{ width: '100%', height: '45px' }}
/>
<button 
onClick={sendCode}
style={buttonStyle}
disabled={!phone}
>
Send Code
</button>
</>
) : (
<>
<h2>Enter Verification Code</h2>
<p style={{ color: '#7f8c8d', marginBottom: 20 }}>
We've sent a 4-digit code to {phone}
</p>
<div style={{ display: 'flex', justifyContent: 'center', margin: '20px 0' }}>
{code.map((digit, index) => (
<CodeInput
key={index}
type="text"
maxLength="1"
value={digit}
onChange={(e) => {
const newCode = [...code];
newCode[index] = e.target.value;
setCode(newCode);
}}
/>
))}
</div>
{timer > 0 ? (
<p style={{ color: '#e74c3c' }}>
Resend code in {timer} seconds
</p>
) : (
<button 
onClick={sendCode}
style={resendStyle}
>
Resend Code
</button>
)}
<button 
onClick={verifyCode}
style={buttonStyle}
disabled={code.some(d => !d)}
>
Verify
</button>
</>
)}
</Form>
</Container>
);
};
const buttonStyle = {
width: '100%',
padding: '12px',
background: '#3498db',
color: 'white',
border: 'none',
borderRadius: '5px',
fontSize: '16px',
cursor: 'pointer',
marginTop: 20
};
const resendStyle = {
background: 'none',
border: 'none',
color: '#3498db',
textDecoration: 'underline',
cursor: 'pointer',
margin: '10px 0'
};
export default Form9;

---

Form 10: Voice Recognition Login

Introduction: Futuristic authentication using voice biometrics for hands-free login.

Features: Microphone access, voice recording visualization, voice match feedback.

import React, { useState } from 'react';
import styled, { keyframes } from 'styled-components';
import { FaMicrophone } from 'react-icons/fa';
const pulse = keyframes`
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
`;
const wave = keyframes`
0% { height: 20px; }
50% { height: 60px; }
100% { height: 20px; }
`;
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
`;
const Form = styled.div`
background: white;
padding: 40px;
border-radius: 10px;
text-align: center;
width: 400px;
`;
const MicButton = styled.button`
background: ${props => props.listening ? '#e74c3c' : '#3498db'};
border: none;
border-radius: 50%;
width: 80px;
height: 80px;
cursor: pointer;
animation: ${props => props.listening ? pulse : 'none'} 1s infinite;
margin: 20px auto;
display: flex;
align-items: center;
justify-content: center;
svg {
color: white;
font-size: 40px;
}
`;
const WaveContainer = styled.div`
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
height: 60px;
margin: 20px 0;
`;
const Wave = styled.div`
width: 10px;
height: ${props => props.height}px;
background: #3498db;
border-radius: 5px;
animation: ${wave} 1s ease-in-out infinite;
animation-delay: ${props => props.delay}s;
`;
const Form10 = () => {
const [listening, setListening] = useState(false);
const [matched, setMatched] = useState(false);
const startListening = () => {
setListening(true);
// Simulate voice processing
setTimeout(() => {
setListening(false);
setMatched(true);
}, 3000);
};
return (
<Container>
<Form>
<h2>Voice Recognition Login</h2>
<p style={{ color: '#666', marginBottom: 20 }}>
Say your passphrase to log in
</p>
<MicButton listening={listening} onClick={startListening} disabled={matched}>
<FaMicrophone />
</MicButton>
{listening && (
<WaveContainer>
{[0, 0.1, 0.2, 0.3, 0.4, 0.5].map((delay, i) => (
<Wave key={i} delay={delay} height={20 + Math.random() * 40} />
))}
</WaveContainer>
)}
{matched && (
<div style={{ color: '#27ae60', marginTop: 20 }}>
✓ Voice matched! Logging you in...
</div>
)}
{!listening && !matched && (
<p style={{ marginTop: 20, color: '#7f8c8d' }}>
Click the microphone and say "My voice is my password"
</p>
)}
</Form>
</Container>
);
};
export default Form10;

---

Form 11: Dark Mode Toggle Login

Introduction: Stylish login form with built-in dark/light mode switching for user preference.

Features: Theme toggle, localStorage persistence, smooth transitions, accessible color contrast.

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { FiSun, FiMoon } from 'react-icons/fi';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: ${props => props.theme === 'dark' ? '#1a1a1a' : '#f8f9fa'};
transition: background 0.3s;
`;
const Form = styled.form`
background: ${props => props.theme === 'dark' ? '#2d2d2d' : 'white'};
padding: 40px;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
width: 350px;
transition: all 0.3s;
`;
const Title = styled.h2`
text-align: center;
color: ${props => props.theme === 'dark' ? '#fff' : '#333'};
margin-bottom: 30px;
`;
const Input = styled.input`
width: 100%;
padding: 12px;
margin: 10px 0;
border: 1px solid ${props => props.theme === 'dark' ? '#444' : '#ddd'};
border-radius: 5px;
background: ${props => props.theme === 'dark' ? '#3d3d3d' : 'white'};
color: ${props => props.theme === 'dark' ? '#fff' : '#333'};
font-size: 16px;
`;
const Button = styled.button`
width: 100%;
padding: 12px;
background: ${props => props.theme === 'dark' ? '#007bff' : '#667eea'};
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
&:hover {
background: ${props => props.theme === 'dark' ? '#0056b3' : '#764ba2'};
}
`;
const ThemeToggle = styled.button`
position: absolute;
top: 20px;
right: 20px;
background: ${props => props.theme === 'dark' ? '#2d2d2d' : 'white'};
border: 1px solid ${props => props.theme === 'dark' ? '#444' : '#ddd'};
border-radius: 30px;
padding: 10px 20px;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
color: ${props => props.theme === 'dark' ? '#fff' : '#333'};
`;
const Form11 = () => {
const [theme, setTheme] = useState('light');
useEffect(() => {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
setTheme(savedTheme);
}
}, []);
const toggleTheme = () => {
const newTheme = theme === 'light' ? 'dark' : 'light';
setTheme(newTheme);
localStorage.setItem('theme', newTheme);
};
return (
<Container theme={theme}>
<ThemeToggle theme={theme} onClick={toggleTheme}>
{theme === 'light' ? <FiMoon /> : <FiSun />}
{theme === 'light' ? 'Dark Mode' : 'Light Mode'}
</ThemeToggle>
<Form theme={theme} onSubmit={(e) => e.preventDefault()}>
<Title theme={theme}>Welcome Back</Title>
<Input
theme={theme}
type="email"
placeholder="Email"
/>
<Input
theme={theme}
type="password"
placeholder="Password"
/>
<Button theme={theme} type="submit">
Sign In
</Button>
</Form>
</Container>
);
};
export default Form11;

---

Form 12: CAPTCHA Protected Login

Introduction: Enhanced security form with CAPTCHA verification to prevent automated attacks.

Features: Math CAPTCHA generation, validation, refresh option, accessibility support.

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { FiRefreshCw } from 'react-icons/fi';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
`;
const Form = styled.form`
background: white;
padding: 40px;
border-radius: 10px;
width: 350px;
`;
const CaptchaBox = styled.div`
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
margin: 15px 0;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24px;
font-weight: bold;
font-family: monospace;
`;
const RefreshButton = styled.button`
background: none;
border: none;
color: #667eea;
cursor: pointer;
font-size: 20px;
`;
const Form12 = () => {
const [formData, setFormData] = useState({
email: '',
password: '',
captcha: ''
});
const [captcha, setCaptcha] = useState({ num1: 0, num2: 0, result: 0 });
const generateCaptcha = () => {
const num1 = Math.floor(Math.random() * 10);
const num2 = Math.floor(Math.random() * 10);
setCaptcha({
num1,
num2,
result: num1 + num2
});
};
useEffect(() => {
generateCaptcha();
}, []);
const handleSubmit = (e) => {
e.preventDefault();
if (parseInt(formData.captcha) === captcha.result) {
console.log('CAPTCHA valid, logging in...');
} else {
alert('Incorrect CAPTCHA');
generateCaptcha();
}
};
return (
<Container>
<Form onSubmit={handleSubmit}>
<h2 style={{ textAlign: 'center', marginBottom: 30 }}>Secure Login</h2>
<input
type="email"
placeholder="Email"
style={inputStyle}
value={formData.email}
onChange={(e) => setFormData({...formData, email: e.target.value})}
required
/>
<input
type="password"
placeholder="Password"
style={inputStyle}
value={formData.password}
onChange={(e) => setFormData({...formData, password: e.target.value})}
required
/>
<CaptchaBox>
<span>{captcha.num1} + {captcha.num2} = ?</span>
<RefreshButton type="button" onClick={generateCaptcha}>
<FiRefreshCw />
</RefreshButton>
</CaptchaBox>
<input
type="text"
placeholder="Enter result"
style={inputStyle}
value={formData.captcha}
onChange={(e) => setFormData({...formData, captcha: e.target.value})}
required
/>
<button type="submit" style={buttonStyle}>
Verify & Login
</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '10px 0',
border: '1px solid #ddd',
borderRadius: '5px',
fontSize: '16px'
};
const buttonStyle = {
width: '100%',
padding: '12px',
background: '#667eea',
color: 'white',
border: 'none',
borderRadius: '5px',
fontSize: '16px',
cursor: 'pointer',
marginTop: 15
};
export default Form12;

---

Form 13: Animated Floating Label Login

Introduction: Modern login form with smooth floating labels that animate on focus and when filled.

Features: CSS transitions, placeholder transformation, focus states, validation indicators.

import React, { useState } from 'react';
import styled from 'styled-components';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
`;
const Form = styled.form`
background: white;
padding: 40px;
border-radius: 10px;
width: 350px;
`;
const InputGroup = styled.div`
position: relative;
margin: 30px 0;
`;
const Input = styled.input`
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #333;
border: none;
border-bottom: 2px solid #ddd;
outline: none;
transition: 0.3s;
&:focus {
border-bottom-color: #667eea;
}
&:focus ~ label,
&:valid ~ label {
top: -20px;
font-size: 12px;
color: #667eea;
}
`;
const Label = styled.label`
position: absolute;
top: 10px;
left: 0;
font-size: 16px;
color: #999;
pointer-events: none;
transition: 0.3s;
`;
const Form13 = () => {
const [formData, setFormData] = useState({
email: '',
password: ''
});
return (
<Container>
<Form onSubmit={(e) => e.preventDefault()}>
<h2 style={{ textAlign: 'center', marginBottom: 40 }}>Floating Labels</h2>
<InputGroup>
<Input
type="email"
value={formData.email}
onChange={(e) => setFormData({...formData, email: e.target.value})}
required
/>
<Label>Email Address</Label>
</InputGroup>
<InputGroup>
<Input
type="password"
value={formData.password}
onChange={(e) => setFormData({...formData, password: e.target.value})}
required
/>
<Label>Password</Label>
</InputGroup>
<button type="submit" style={buttonStyle}>
Sign In
</button>
</Form>
</Container>
);
};
const buttonStyle = {
width: '100%',
padding: '12px',
background: '#667eea',
color: 'white',
border: 'none',
borderRadius: '5px',
fontSize: '16px',
cursor: 'pointer',
marginTop: 20
};
export default Form13;

---

Form 14: Slide-to-Login Gesture

Introduction: Interactive login form with a slider that must be dragged to submit.

Features: Drag gesture recognition, progress tracking, haptic feedback simulation, animation.

import React, { useState, useRef } from 'react';
import styled from 'styled-components';
import { FiArrowRight } from 'react-icons/fi';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
`;
const Form = styled.div`
background: white;
padding: 40px;
border-radius: 10px;
width: 350px;
`;
const SliderContainer = styled.div`
position: relative;
width: 100%;
height: 60px;
background: #f0f0f0;
border-radius: 30px;
margin: 30px 0;
overflow: hidden;
`;
const SliderTrack = styled.div`
position: absolute;
left: 0;
top: 0;
height: 100%;
width: ${props => props.progress}%;
background: linear-gradient(90deg, #667eea, #764ba2);
transition: width 0.1s;
`;
const SliderThumb = styled.div`
position: absolute;
left: ${props => props.position}px;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: white;
border-radius: 50%;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
cursor: grab;
z-index: 10;
`;
const Form14 = () => {
const [progress, setProgress] = useState(0);
const [dragging, setDragging] = useState(false);
const sliderRef = useRef(null);
const thumbRef = useRef(null);
const handleMouseDown = () => {
setDragging(true);
};
const handleMouseMove = (e) => {
if (!dragging) return;
const sliderRect = sliderRef.current.getBoundingClientRect();
const thumbRect = thumbRef.current.getBoundingClientRect();
let newX = e.clientX - sliderRect.left - thumbRect.width / 2;
// Constrain within slider
newX = Math.max(0, Math.min(newX, sliderRect.width - thumbRect.width));
const newProgress = (newX / (sliderRect.width - thumbRect.width)) * 100;
setProgress(newProgress);
if (newProgress >= 95) {
console.log('Login successful!');
setDragging(false);
}
};
const handleMouseUp = () => {
if (progress < 95) {
setProgress(0);
}
setDragging(false);
};
React.useEffect(() => {
if (dragging) {
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mouseup', handleMouseUp);
}
return () => {
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener('mouseup', handleMouseUp);
};
}, [dragging, progress]);
return (
<Container>
<Form>
<h2 style={{ textAlign: 'center' }}>Slide to Login</h2>
<input
type="email"
placeholder="Email"
style={inputStyle}
/>
<input
type="password"
placeholder="Password"
style={inputStyle}
/>
<SliderContainer ref={sliderRef}>
<SliderTrack progress={progress} />
<SliderThumb
ref={thumbRef}
position={progress * 2.9}
onMouseDown={handleMouseDown}
>
<FiArrowRight />
</SliderThumb>
<div style={{ 
position: 'absolute', 
left: '50%', 
top: '50%', 
transform: 'translate(-50%, -50%)',
color: progress > 50 ? 'white' : '#999',
zIndex: 5
}}>
{progress >= 95 ? '✓ Logged in!' : 'Slide to login'}
</div>
</SliderContainer>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '10px 0',
border: '1px solid #ddd',
borderRadius: '5px',
fontSize: '16px'
};
export default Form14;

---

Form 15: Gradient Border Animation

Introduction: Visually striking login form with animated gradient borders that shift colors.

Features: CSS keyframe animations, gradient transitions, hover effects, modern design.

import React, { useState } from 'react';
import styled, { keyframes } from 'styled-components';
const gradient = keyframes`
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
`;
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #0a0a0a;
`;
const Form = styled.form`
background: #1a1a1a;
padding: 40px;
border-radius: 10px;
width: 350px;
position: relative;
&::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
background-size: 400%;
border-radius: 12px;
animation: ${gradient} 20s linear infinite;
z-index: -1;
}
`;
const Title = styled.h2`
text-align: center;
color: white;
margin-bottom: 30px;
`;
const Input = styled.input`
width: 100%;
padding: 12px;
margin: 10px 0;
border: 2px solid #333;
border-radius: 5px;
background: #2a2a2a;
color: white;
font-size: 16px;
transition: border-color 0.3s;
&:focus {
border-color: #007bff;
outline: none;
}
`;
const Button = styled.button`
width: 100%;
padding: 12px;
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: transform 0.3s;
&:hover {
transform: scale(1.05);
}
`;
const Form15 = () => {
const [formData, setFormData] = useState({ email: '', password: '' });
return (
<Container>
<Form onSubmit={(e) => e.preventDefault()}>
<Title>Animated Border</Title>
<Input
type="email"
placeholder="Email"
value={formData.email}
onChange={(e) => setFormData({...formData, email: e.target.value})}
/>
<Input
type="password"
placeholder="Password"
value={formData.password}
onChange={(e) => setFormData({...formData, password: e.target.value})}
/>
<Button type="submit">Sign In</Button>
</Form>
</Container>
);
};
export default Form15;

---

Form 16: Passwordless Email OTP

Introduction: Streamlined authentication using email-based one-time passwords without traditional passwords.

Features: Email validation, OTP generation, automatic code detection, clipboard support.

import React, { useState, useRef, useEffect } from 'react';
import styled from 'styled-components';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #11998e, #38ef7d);
`;
const Form = styled.div`
background: white;
padding: 40px;
border-radius: 10px;
width: 400px;
text-align: center;
`;
const OtpContainer = styled.div`
display: flex;
justify-content: center;
gap: 10px;
margin: 30px 0;
`;
const OtpInput = styled.input`
width: 50px;
height: 50px;
text-align: center;
font-size: 20px;
border: 2px solid #e0e0e0;
border-radius: 8px;
&:focus {
border-color: #11998e;
outline: none;
}
`;
const Form16 = () => {
const [email, setEmail] = useState('');
const [step, setStep] = useState(1);
const [otp, setOtp] = useState(['', '', '', '', '', '']);
const [timer, setTimer] = useState(30);
const inputRefs = useRef([]);
useEffect(() => {
if (step === 2 && timer > 0) {
const interval = setInterval(() => setTimer(t => t - 1), 1000);
return () => clearInterval(interval);
}
}, [step, timer]);
const handleOtpChange = (index, value) => {
if (value.length <= 1 && /^\d*$/.test(value)) {
const newOtp = [...otp];
newOtp[index] = value;
setOtp(newOtp);
if (value && index < 5) {
inputRefs.current[index + 1].focus();
}
}
};
const handleKeyDown = (index, e) => {
if (e.key === 'Backspace' && !otp[index] && index > 0) {
inputRefs.current[index - 1].focus();
}
};
const handlePaste = (e) => {
e.preventDefault();
const pastedData = e.clipboardData.getData('text/plain').slice(0, 6);
if (/^\d+$/.test(pastedData)) {
const newOtp = [...otp];
pastedData.split('').forEach((char, index) => {
if (index < 6) newOtp[index] = char;
});
setOtp(newOtp);
}
};
return (
<Container>
<Form>
{step === 1 ? (
<>
<h2>Passwordless Login</h2>
<p style={{ color: '#666', marginBottom: 30 }}>
Enter your email to receive a one-time code
</p>
<input
type="email"
placeholder="[email protected]"
value={email}
onChange={(e) => setEmail(e.target.value)}
style={inputStyle}
/>
<button
onClick={() => setStep(2)}
style={buttonStyle}
disabled={!email}
>
Send OTP
</button>
</>
) : (
<>
<h2>Enter Verification Code</h2>
<p style={{ color: '#666', marginBottom: 20 }}>
We've sent a code to {email}
</p>
<OtpContainer onPaste={handlePaste}>
{otp.map((digit, index) => (
<OtpInput
key={index}
type="text"
maxLength="1"
value={digit}
ref={(el) => inputRefs.current[index] = el}
onChange={(e) => handleOtpChange(index, e.target.value)}
onKeyDown={(e) => handleKeyDown(index, e)}
/>
))}
</OtpContainer>
<div style={{ marginBottom: 20 }}>
{timer > 0 ? (
<p>Resend code in {timer}s</p>
) : (
<button style={resendStyle} onClick={() => setTimer(30)}>
Resend Code
</button>
)}
</div>
<button style={buttonStyle}>
Verify & Login
</button>
</>
)}
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '10px 0',
border: '1px solid #ddd',
borderRadius: '5px',
fontSize: '16px'
};
const buttonStyle = {
width: '100%',
padding: '12px',
background: '#11998e',
color: 'white',
border: 'none',
borderRadius: '5px',
fontSize: '16px',
cursor: 'pointer',
marginTop: 20
};
const resendStyle = {
background: 'none',
border: 'none',
color: '#11998e',
textDecoration: 'underline',
cursor: 'pointer'
};
export default Form16;

---

Form 17: Glassmorphism Login

Introduction: Beautiful frosted glass effect login form with blur backgrounds and transparency.

Features: Backdrop blur, transparency effects, light reflections, modern aesthetic.

import React from 'react';
import styled from 'styled-components';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: url('https://images.unsplash.com/photo-1557683316-973673baf926?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');
background-size: cover;
background-position: center;
`;
const Form = styled.form`
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
padding: 40px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
width: 350px;
`;
const Title = styled.h2`
text-align: center;
color: white;
margin-bottom: 30px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
`;
const Input = styled.input`
width: 100%;
padding: 12px;
margin: 10px 0;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 10px;
background: rgba(255, 255, 255, 0.2);
color: white;
font-size: 16px;
&::placeholder {
color: rgba(255, 255, 255, 0.8);
}
&:focus {
outline: none;
background: rgba(255, 255, 255, 0.3);
}
`;
const Button = styled.button`
width: 100%;
padding: 12px;
background: rgba(255, 255, 255, 0.3);
color: white;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 10px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
&:hover {
background: rgba(255, 255, 255, 0.4);
transform: translateY(-2px);
}
`;
const Form17 = () => {
return (
<Container>
<Form>
<Title>Glassmorphism</Title>
<Input type="email" placeholder="Email" />
<Input type="password" placeholder="Password" />
<Button type="submit">Sign In</Button>
</Form>
</Container>
);
};
export default Form17;

---

Form 18: Neumorphism Style Login

Introduction: Soft UI design with neumorphic elements that appear to extrude from the background.

Features: Soft shadows, inset/outset effects, tactile appearance, minimal design.

import React from 'react';
import styled from 'styled-components';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #e0e0e0;
`;
const Form = styled.form`
background: #e0e0e0;
padding: 50px;
border-radius: 50px;
box-shadow: 
20px 20px 60px #bebebe,
-20px -20px 60px #ffffff;
width: 350px;
`;
const Title = styled.h2`
text-align: center;
color: #666;
margin-bottom: 40px;
`;
const InputGroup = styled.div`
margin: 30px 0;
`;
const Input = styled.input`
width: 100%;
padding: 15px;
border: none;
border-radius: 50px;
background: #e0e0e0;
box-shadow: 
inset 5px 5px 10px #bebebe,
inset -5px -5px 10px #ffffff;
color: #666;
font-size: 16px;
&:focus {
outline: none;
}
`;
const Button = styled.button`
width: 100%;
padding: 15px;
border: none;
border-radius: 50px;
background: #e0e0e0;
box-shadow: 
5px 5px 10px #bebebe,
-5px -5px 10px #ffffff;
color: #666;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
&:hover {
box-shadow: 
inset 5px 5px 10px #bebebe,
inset -5px -5px 10px #ffffff;
}
`;
const Form18 = () => {
return (
<Container>
<Form>
<Title>Neumorphism</Title>
<InputGroup>
<Input type="email" placeholder="Email" />
</InputGroup>
<InputGroup>
<Input type="password" placeholder="Password" />
</InputGroup>
<Button type="submit">Sign In</Button>
</Form>
</Container>
);
};
export default Form18;

---

Form 19: Gaming Login with Progress

Introduction: Gamified login experience with XP bars and achievement-style feedback.

Features: Progress tracking, level indicators, gaming aesthetics, motivational messages.

import React, { useState } from 'react';
import styled, { keyframes } from 'styled-components';
import { FaGamepad, FaTrophy, FaStar } from 'react-icons/fa';
const glow = keyframes`
0% { box-shadow: 0 0 5px #ffd700; }
50% { box-shadow: 0 0 20px #ffd700; }
100% { box-shadow: 0 0 5px #ffd700; }
`;
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #1a1a2e, #16213e);
`;
const Form = styled.div`
background: #0f3460;
padding: 40px;
border-radius: 20px;
width: 400px;
border: 2px solid #e94560;
box-shadow: 0 0 30px rgba(233, 69, 96, 0.3);
`;
const Header = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
color: #e94560;
margin-bottom: 30px;
`;
const LevelBar = styled.div`
background: #1a1a2e;
height: 20px;
border-radius: 10px;
margin: 20px 0;
position: relative;
overflow: hidden;
`;
const LevelProgress = styled.div`
height: 100%;
width: ${props => props.progress}%;
background: linear-gradient(90deg, #e94560, #ff6b6b);
transition: width 0.5s;
`;
const XPText = styled.div`
color: #ffd700;
text-align: right;
font-size: 14px;
margin-top: 5px;
`;
const Input = styled.input`
width: 100%;
padding: 15px;
margin: 10px 0;
background: #1a1a2e;
border: 2px solid #e94560;
border-radius: 10px;
color: white;
font-size: 16px;
&:focus {
outline: none;
animation: ${glow} 1s infinite;
}
`;
const Button = styled.button`
width: 100%;
padding: 15px;
background: #e94560;
color: white;
border: none;
border-radius: 10px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
margin: 20px 0;
position: relative;
overflow: hidden;
&:hover {
transform: scale(1.02);
}
`;
const Achievement = styled.div`
background: #1a1a2e;
padding: 10px;
border-radius: 10px;
margin: 10px 0;
display: flex;
align-items: center;
gap: 10px;
color: ${props => props.unlocked ? '#ffd700' : '#666'};
`;
const Form19 = () => {
const [formData, setFormData] = useState({ username: '', password: '' });
const [progress, setProgress] = useState(0);
const [achievements, setAchievements] = useState({
emailFilled: false,
passwordFilled: false,
completed: false
});
const handleChange = (field, value) => {
setFormData({...formData, [field]: value});
if (field === 'username' && value.length > 0) {
setAchievements({...achievements, emailFilled: true});
}
if (field === 'password' && value.length > 0) {
setAchievements({...achievements, passwordFilled: true});
}
// Update progress bar
let newProgress = 0;
if (formData.username || value === 'username' ? value : formData.username) newProgress += 25;
if (formData.password || value === 'password' ? value : formData.password) newProgress += 25;
setProgress(newProgress);
};
return (
<Container>
<Form>
<Header>
<FaGamepad size={30} />
<h2>GAMER LOGIN</h2>
<FaTrophy size={30} color="#ffd700" />
</Header>
<div style={{ marginBottom: 20 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', color: 'white' }}>
<span>Level {Math.floor(progress / 25) + 1}</span>
<span>{progress}/100 XP</span>
</div>
<LevelBar>
<LevelProgress progress={progress} />
</LevelBar>
<XPText>+{progress} XP</XPText>
</div>
<Input
type="text"
placeholder="Username"
value={formData.username}
onChange={(e) => handleChange('username', e.target.value)}
/>
<Input
type="password"
placeholder="Password"
value={formData.password}
onChange={(e) => handleChange('password', e.target.value)}
/>
<Button onClick={() => console.log('Logging in...')}>
START GAME
</Button>
<div>
<h4 style={{ color: 'white', marginBottom: 10 }}>Achievements</h4>
<Achievement unlocked={achievements.emailFilled}>
<FaStar /> Username Entered
</Achievement>
<Achievement unlocked={achievements.passwordFilled}>
<FaStar /> Password Entered
</Achievement>
<Achievement unlocked={progress === 100}>
<FaStar /> Ready to Play!
</Achievement>
</div>
</Form>
</Container>
);
};
export default Form19;

---

Form 20: Date of Birth & Age Gate

Introduction: Age-restricted signup with date picker and automatic age calculation.

Features: Date picker integration, age validation, minimum age requirement, friendly messages.

import React, { useState } from 'react';
import styled from 'styled-components';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
`;
const Form = styled.form`
background: white;
padding: 40px;
border-radius: 10px;
width: 400px;
`;
const Title = styled.h2`
text-align: center;
color: #333;
margin-bottom: 30px;
`;
const Input = styled.input`
width: 100%;
padding: 12px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
`;
const DatePickerWrapper = styled.div`
margin: 15px 0;
.react-datepicker-wrapper {
width: 100%;
}
input {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
`;
const AgeMessage = styled.div`
padding: 10px;
border-radius: 5px;
margin: 15px 0;
text-align: center;
background: ${props => props.valid ? '#d4edda' : '#f8d7da'};
color: ${props => props.valid ? '#155724' : '#721c24'};
`;
const Button = styled.button`
width: 100%;
padding: 12px;
background: #667eea;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
opacity: ${props => props.disabled ? 0.5 : 1};
&:hover:not(:disabled) {
background: #764ba2;
}
`;
const Form20 = () => {
const [formData, setFormData] = useState({
name: '',
email: '',
password: '',
dob: null
});
const [age, setAge] = useState(null);
const [isOldEnough, setIsOldEnough] = useState(false);
const calculateAge = (birthDate) => {
const today = new Date();
const birth = new Date(birthDate);
let age = today.getFullYear() - birth.getFullYear();
const m = today.getMonth() - birth.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) {
age--;
}
return age;
};
const handleDateChange = (date) => {
setFormData({...formData, dob: date});
if (date) {
const calculatedAge = calculateAge(date);
setAge(calculatedAge);
setIsOldEnough(calculatedAge >= 13);
}
};
const handleSubmit = (e) => {
e.preventDefault();
if (isOldEnough) {
console.log('Registration successful:', formData);
}
};
return (
<Container>
<Form onSubmit={handleSubmit}>
<Title>Age Verification</Title>
<Input
type="text"
placeholder="Full Name"
value={formData.name}
onChange={(e) => setFormData({...formData, name: e.target.value})}
required
/>
<Input
type="email"
placeholder="Email"
value={formData.email}
onChange={(e) => setFormData({...formData, email: e.target.value})}
required
/>
<Input
type="password"
placeholder="Password"
value={formData.password}
onChange={(e) => setFormData({...formData, password: e.target.value})}
required
/>
<DatePickerWrapper>
<DatePicker
selected={formData.dob}
onChange={handleDateChange}
placeholderText="Select Date of Birth"
maxDate={new Date()}
showYearDropdown
scrollableYearDropdown
yearDropdownItemNumber={100}
required
/>
</DatePickerWrapper>
{age && (
<AgeMessage valid={isOldEnough}>
{isOldEnough 
? `✓ You are ${age} years old - eligible to sign up!`
: `✗ You are ${age} years old. You must be at least 13 to sign up.`
}
</AgeMessage>
)}
<Button type="submit" disabled={!isOldEnough}>
Create Account
</Button>
</Form>
</Container>
);
};
export default Form20;

---

Form 21: Passwordless with Magic Link

Introduction: Simplified authentication using email magic links instead of passwords.

Features: Email validation, loading states, success feedback, resend option.

import React, { useState } from 'react';
import styled, { keyframes } from 'styled-components';
import { FiMail, FiCheck, FiAlertCircle } from 'react-icons/fi';
const pulse = keyframes`
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
`;
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
`;
const Form = styled.div`
background: white;
padding: 40px;
border-radius: 10px;
width: 400px;
text-align: center;
`;
const IconWrapper = styled.div`
font-size: 60px;
color: ${props => props.color || '#667eea'};
margin-bottom: 20px;
`;
const Input = styled.input`
width: 100%;
padding: 15px;
margin: 20px 0;
border: 2px solid ${props => props.error ? '#e74c3c' : '#e0e0e0'};
border-radius: 8px;
font-size: 16px;
&:focus {
outline: none;
border-color: #667eea;
}
`;
const Button = styled.button`
width: 100%;
padding: 15px;
background: ${props => props.disabled ? '#ccc' : '#667eea'};
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
transition: background 0.3s;
&:hover:not(:disabled) {
background: #764ba2;
}
`;
const Loader = styled.div`
border: 3px solid #f3f3f3;
border-top: 3px solid #667eea;
border-radius: 50%;
width: 40px;
height: 40px;
animation: ${pulse} 1s linear infinite;
margin: 20px auto;
`;
const Message = styled.div`
padding: 15px;
margin: 15px 0;
border-radius: 5px;
background: ${props => props.type === 'success' ? '#d4edda' : '#f8d7da'};
color: ${props => props.type === 'success' ? '#155724' : '#721c24'};
display: flex;
align-items: center;
gap: 10px;
`;
const Form21 = () => {
const [email, setEmail] = useState('');
const [status, setStatus] = useState('idle'); // idle, loading, success, error
const [error, setError] = useState('');
const validateEmail = (email) => {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
};
const handleSubmit = async () => {
if (!validateEmail(email)) {
setError('Please enter a valid email address');
setStatus('error');
return;
}
setStatus('loading');
setError('');
// Simulate API call
setTimeout(() => {
setStatus('success');
}, 2000);
};
return (
<Container>
<Form>
{status === 'success' ? (
<>
<IconWrapper color="#28a745">
<FiCheck />
</IconWrapper>
<h2>Check Your Email</h2>
<p style={{ color: '#666', margin: '20px 0' }}>
We've sent a magic link to <strong>{email}</strong>. 
Click the link to sign in instantly.
</p>
<Message type="success">
<FiCheck /> Link sent! Check your spam folder if you don't see it.
</Message>
<Button 
onClick={() => setStatus('idle')}
style={{ background: '#6c757d', marginTop: 20 }}
>
Use Different Email
</Button>
</>
) : (
<>
<IconWrapper>
<FiMail />
</IconWrapper>
<h2>Passwordless Login</h2>
<p style={{ color: '#666', marginBottom: 20 }}>
Enter your email and we'll send you a magic link to sign in.
</p>
<Input
type="email"
placeholder="[email protected]"
value={email}
onChange={(e) => {
setEmail(e.target.value);
setStatus('idle');
setError('');
}}
error={status === 'error'}
disabled={status === 'loading'}
/>
{status === 'error' && (
<Message type="error">
<FiAlertCircle /> {error}
</Message>
)}
{status === 'loading' ? (
<Loader />
) : (
<Button onClick={handleSubmit} disabled={!email}>
Send Magic Link
</Button>
)}
<p style={{ marginTop: 20, fontSize: 14, color: '#999' }}>
No password needed - secure and simple!
</p>
</>
)}
</Form>
</Container>
);
};
export default Form21;

---

Form 22: Social Media Integration Hub

Introduction: Comprehensive social login system with multiple platform options and profile preview.

Features: Multiple social providers, profile data preview, permission indicators, seamless switching.

import React, { useState } from 'react';
import styled from 'styled-components';
import { 
FcGoogle, 
FcFacebook, 
FcTwitter, 
FcLinkedin,
FcGithub 
} from 'react-icons/fc';
import { FaApple } from 'react-icons/fa';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
`;
const Form = styled.div`
background: white;
padding: 40px;
border-radius: 10px;
width: 450px;
`;
const SocialGrid = styled.div`
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 20px 0;
`;
const SocialButton = styled.button`
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 15px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: white;
cursor: pointer;
transition: all 0.3s;
&:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
border-color: #667eea;
}
`;
const ProviderName = styled.span`
font-size: 12px;
color: #666;
`;
const Divider = styled.div`
text-align: center;
margin: 20px 0;
position: relative;
&::before, &::after {
content: '';
position: absolute;
top: 50%;
width: 45%;
height: 1px;
background: #e0e0e0;
}
&::before { left: 0; }
&::after { right: 0; }
`;
const ProfilePreview = styled.div`
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
display: flex;
align-items: center;
gap: 15px;
`;
const Avatar = styled.div`
width: 50px;
height: 50px;
border-radius: 50%;
background: #667eea;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
`;
const Form22 = () => {
const [selectedProvider, setSelectedProvider] = useState(null);
const [profile, setProfile] = useState(null);
const providers = [
{ name: 'Google', icon: <FcGoogle size={30} /> },
{ name: 'Facebook', icon: <FcFacebook size={30} /> },
{ name: 'Twitter', icon: <FcTwitter size={30} /> },
{ name: 'LinkedIn', icon: <FcLinkedin size={30} /> },
{ name: 'GitHub', icon: <FcGithub size={30} /> },
{ name: 'Apple', icon: <FaApple size={30} color="#000" /> }
];
const handleSocialLogin = (provider) => {
setSelectedProvider(provider);
// Simulate fetching profile data
setTimeout(() => {
setProfile({
name: `User ${provider}`,
email: `user@${provider.toLowerCase()}.com`,
avatar: provider[0]
});
}, 1000);
};
return (
<Container>
<Form>
<h2 style={{ textAlign: 'center', marginBottom: 20 }}>
Connect with Social
</h2>
<SocialGrid>
{providers.map((provider, index) => (
<SocialButton
key={index}
onClick={() => handleSocialLogin(provider.name)}
>
{provider.icon}
<ProviderName>{provider.name}</ProviderName>
</SocialButton>
))}
</SocialGrid>
{selectedProvider && !profile && (
<div style={{ textAlign: 'center', padding: 20 }}>
<div style={loaderStyle}></div>
<p>Connecting to {selectedProvider}...</p>
</div>
)}
{profile && (
<ProfilePreview>
<Avatar>{profile.avatar}</Avatar>
<div>
<h4>{profile.name}</h4>
<p style={{ color: '#666' }}>{profile.email}</p>
</div>
</ProfilePreview>
)}
<Divider>or continue with</Divider>
<input
type="email"
placeholder="Email"
style={inputStyle}
/>
<input
type="password"
placeholder="Password"
style={inputStyle}
/>
<button style={buttonStyle}>
Sign In with Email
</button>
<p style={{ textAlign: 'center', marginTop: 20, fontSize: 14, color: '#999' }}>
By continuing, you agree to our Terms and Privacy Policy
</p>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '8px 0',
border: '1px solid #ddd',
borderRadius: '5px',
fontSize: '16px'
};
const buttonStyle = {
width: '100%',
padding: '12px',
background: '#667eea',
color: 'white',
border: 'none',
borderRadius: '5px',
fontSize: '16px',
cursor: 'pointer',
marginTop: '15px'
};
const loaderStyle = {
border: '3px solid #f3f3f3',
borderTop: '3px solid #667eea',
borderRadius: '50%',
width: '30px',
height: '30px',
animation: 'spin 1s linear infinite',
margin: '10px auto'
};
export default Form22;

---

Form 23: Password Generator & Manager

Introduction: Smart signup form with built-in password generator and strength analysis.

Features: Random password generation, strength meter, copy to clipboard, requirements checklist.

import React, { useState } from 'react';
import styled from 'styled-components';
import { FiCopy, FiRefreshCw, FiCheck } from 'react-icons/fi';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
`;
const Form = styled.div`
background: white;
padding: 40px;
border-radius: 10px;
width: 450px;
`;
const PasswordField = styled.div`
position: relative;
margin: 20px 0;
`;
const GeneratedPassword = styled.div`
width: 100%;
padding: 15px;
background: #f8f9fa;
border: 2px solid #e0e0e0;
border-radius: 5px;
font-family: monospace;
font-size: 18px;
display: flex;
align-items: center;
justify-content: space-between;
`;
const ActionButton = styled.button`
background: none;
border: none;
cursor: pointer;
font-size: 20px;
color: #667eea;
margin-left: 10px;
&:hover {
color: #764ba2;
}
`;
const StrengthBar = styled.div`
height: 8px;
background: #e0e0e0;
border-radius: 4px;
margin: 10px 0;
overflow: hidden;
`;
const StrengthFill = styled.div`
height: 100%;
width: ${props => props.strength}%;
background: ${props => {
if (props.strength < 30) return '#e74c3c';
if (props.strength < 60) return '#f39c12';
if (props.strength < 80) return '#3498db';
return '#2ecc71';
}};
transition: width 0.3s;
`;
const Requirement = styled.div`
display: flex;
align-items: center;
gap: 10px;
margin: 5px 0;
color: ${props => props.met ? '#2ecc71' : '#e74c3c'};
`;
const Form23 = () => {
const [password, setPassword] = useState('');
const [copied, setCopied] = useState(false);
const generatePassword = () => {
const length = 12;
const charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*';
let newPassword = '';
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * charset.length);
newPassword += charset[randomIndex];
}
setPassword(newPassword);
setCopied(false);
};
const copyToClipboard = () => {
navigator.clipboard.writeText(password);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};
const calculateStrength = () => {
let strength = 0;
if (password.length >= 8) strength += 20;
if (password.match(/[a-z]/)) strength += 20;
if (password.match(/[A-Z]/)) strength += 20;
if (password.match(/[0-9]/)) strength += 20;
if (password.match(/[^a-zA-Z0-9]/)) strength += 20;
return strength;
};
const requirements = [
{ text: 'At least 8 characters', test: (p) => p.length >= 8 },
{ text: 'Contains lowercase letter', test: (p) => /[a-z]/.test(p) },
{ text: 'Contains uppercase letter', test: (p) => /[A-Z]/.test(p) },
{ text: 'Contains number', test: (p) => /[0-9]/.test(p) },
{ text: 'Contains special character', test: (p) => /[^a-zA-Z0-9]/.test(p) }
];
return (
<Container>
<Form>
<h2 style={{ textAlign: 'center', marginBottom: 30 }}>
Password Generator
</h2>
<input
type="text"
placeholder="Username"
style={inputStyle}
/>
<input
type="email"
placeholder="Email"
style={inputStyle}
/>
<PasswordField>
<GeneratedPassword>
<span>{password || 'Generated password'}</span>
<div>
<ActionButton onClick={generatePassword}>
<FiRefreshCw />
</ActionButton>
{password && (
<ActionButton onClick={copyToClipboard}>
{copied ? <FiCheck color="#2ecc71" /> : <FiCopy />}
</ActionButton>
)}
</div>
</GeneratedPassword>
</PasswordField>
{password && (
<>
<StrengthBar>
<StrengthFill strength={calculateStrength()} />
</StrengthBar>
<div style={{ marginTop: 15 }}>
{requirements.map((req, index) => (
<Requirement key={index} met={req.test(password)}>
{req.test(password) ? '✓' : '✗'} {req.text}
</Requirement>
))}
</div>
</>
)}
<button style={buttonStyle}>
Create Account
</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '8px 0',
border: '1px solid #ddd',
borderRadius: '5px',
fontSize: '16px'
};
const buttonStyle = {
width: '100%',
padding: '12px',
background: '#667eea',
color: 'white',
border: 'none',
borderRadius: '5px',
fontSize: '16px',
cursor: 'pointer',
marginTop: '20px'
};
export default Form23;

---

Form 24: Terms & Conditions with Scroll

Introduction: Signup form with mandatory terms agreement that requires scrolling to the bottom.

Features: Scroll tracking, enabled only after reading, checkboxes, legal text display.

import React, { useState, useRef } from 'react';
import styled from 'styled-components';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
`;
const Form = styled.form`
background: white;
padding: 40px;
border-radius: 10px;
width: 450px;
`;
const TermsBox = styled.div`
height: 200px;
overflow-y: auto;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
margin: 15px 0;
background: #f8f9fa;
font-size: 14px;
line-height: 1.6;
`;
const CheckboxLabel = styled.label`
display: flex;
align-items: center;
gap: 10px;
margin: 15px 0;
color: ${props => props.disabled ? '#999' : '#333'};
`;
const ProgressBar = styled.div`
height: 5px;
background: #e0e0e0;
border-radius: 5px;
margin: 10px 0;
overflow: hidden;
`;
const Progress = styled.div`
height: 100%;
width: ${props => props.scrolled}%;
background: #667eea;
transition: width 0.3s;
`;
const Form24 = () => {
const [formData, setFormData] = useState({
name: '',
email: '',
password: '',
agreed: false
});
const [scrollProgress, setScrollProgress] = useState(0);
const [hasScrolledToBottom, setHasScrolledToBottom] = useState(false);
const termsRef = useRef(null);
const handleScroll = () => {
const element = termsRef.current;
if (element) {
const { scrollTop, scrollHeight, clientHeight } = element;
const progress = (scrollTop / (scrollHeight - clientHeight)) * 100;
setScrollProgress(progress);
if (scrollTop + clientHeight >= scrollHeight - 10) {
setHasScrolledToBottom(true);
}
}
};
return (
<Container>
<Form onSubmit={(e) => e.preventDefault()}>
<h2 style={{ textAlign: 'center', marginBottom: 30 }}>
Create Account
</h2>
<input
type="text"
placeholder="Full Name"
style={inputStyle}
value={formData.name}
onChange={(e) => setFormData({...formData, name: e.target.value})}
/>
<input
type="email"
placeholder="Email"
style={inputStyle}
value={formData.email}
onChange={(e) => setFormData({...formData, email: e.target.value})}
/>
<input
type="password"
placeholder="Password"
style={inputStyle}
value={formData.password}
onChange={(e) => setFormData({...formData, password: e.target.value})}
/>
<div style={{ margin: '20px 0' }}>
<label style={{ fontWeight: 'bold' }}>Terms and Conditions</label>
<ProgressBar>
<Progress scrolled={scrollProgress} />
</ProgressBar>
<TermsBox ref={termsRef} onScroll={handleScroll}>
<h4>1. Acceptance of Terms</h4>
<p>By accessing and using this service, you accept and agree to be bound by the terms and provision of this agreement...</p>
<h4>2. Description of Service</h4>
<p>We provide users with access to a rich collection of resources, including various communications tools, forums, shopping services, and personalized content...</p>
<h4>3. Privacy Policy</h4>
<p>Your use of the Service is subject to our Privacy Policy, which governs our collection and use of your personal information...</p>
<h4>4. User Conduct</h4>
<p>You understand that all information, data, text, software, music, sound, photographs, graphics, video, messages, or other materials...</p>
<h4>5. Termination</h4>
<p>We may terminate or suspend your account and bar access to the Service immediately, without prior notice or liability, under our sole discretion...</p>
<h4>6. Changes to Terms</h4>
<p>We reserve the right, at our sole discretion, to modify or replace these Terms at any time...</p>
<p style={{ marginTop: 20, fontWeight: 'bold' }}>End of Terms</p>
</TermsBox>
<CheckboxLabel disabled={!hasScrolledToBottom}>
<input
type="checkbox"
checked={formData.agreed}
onChange={(e) => setFormData({...formData, agreed: e.target.checked})}
disabled={!hasScrolledToBottom}
/>
I have read and agree to the Terms and Conditions
</CheckboxLabel>
{!hasScrolledToBottom && (
<p style={{ color: '#e74c3c', fontSize: 14 }}>
Please scroll through all terms to enable agreement
</p>
)}
</div>
<button 
type="submit" 
style={buttonStyle}
disabled={!formData.agreed}
>
Sign Up
</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '8px 0',
border: '1px solid #ddd',
borderRadius: '5px',
fontSize: '16px'
};
const buttonStyle = {
width: '100%',
padding: '12px',
background: '#667eea',
color: 'white',
border: 'none',
borderRadius: '5px',
fontSize: '16px',
cursor: 'pointer',
opacity: props => props.disabled ? 0.5 : 1
};
export default Form24;

---

Form 25: Avatar & Profile Picture Upload

Introduction: Registration form with image upload and avatar cropping functionality.

Features: Drag-and-drop upload, image preview, cropping tool, file validation.

import React, { useState, useRef } from 'react';
import styled from 'styled-components';
import { FiUpload, FiCamera, FiX } from 'react-icons/fi';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
`;
const Form = styled.form`
background: white;
padding: 40px;
border-radius: 10px;
width: 450px;
`;
const AvatarSection = styled.div`
display: flex;
flex-direction: column;
align-items: center;
margin: 20px 0;
`;
const AvatarPreview = styled.div`
width: 120px;
height: 120px;
border-radius: 50%;
background: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
cursor: pointer;
border: 3px solid #667eea;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
&:hover .overlay {
opacity: 1;
}
`;
const Overlay = styled.div`
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
color: white;
opacity: 0;
transition: opacity 0.3s;
`;
const UploadArea = styled.div`
border: 2px dashed #667eea;
border-radius: 10px;
padding: 30px;
text-align: center;
margin: 20px 0;
cursor: pointer;
transition: all 0.3s;
&:hover {
background: #f0f4ff;
}
`;
const HiddenInput = styled.input`
display: none;
`;
const Form25 = () => {
const [avatar, setAvatar] = useState(null);
const [preview, setPreview] = useState(null);
const [formData, setFormData] = useState({
name: '',
email: '',
password: ''
});
const fileInputRef = useRef(null);
const handleFileSelect = (event) => {
const file = event.target.files[0];
if (file) {
// Validate file type
if (!file.type.match('image.*')) {
alert('Please select an image file');
return;
}
// Validate file size (max 5MB)
if (file.size > 5 * 1024 * 1024) {
alert('File size must be less than 5MB');
return;
}
setAvatar(file);
// Create preview
const reader = new FileReader();
reader.onload = (e) => {
setPreview(e.target.result);
};
reader.readAsDataURL(file);
}
};
const handleDragOver = (e) => {
e.preventDefault();
e.stopPropagation();
};
const handleDrop = (e) => {
e.preventDefault();
e.stopPropagation();
const file = e.dataTransfer.files[0];
if (file && file.type.match('image.*')) {
setAvatar(file);
const reader = new FileReader();
reader.onload = (e) => {
setPreview(e.target.result);
};
reader.readAsDataURL(file);
}
};
const removeAvatar = () => {
setAvatar(null);
setPreview(null);
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
};
return (
<Container>
<Form onSubmit={(e) => e.preventDefault()}>
<h2 style={{ textAlign: 'center', marginBottom: 30 }}>
Profile Setup
</h2>
<AvatarSection>
<AvatarPreview onClick={() => fileInputRef.current.click()}>
{preview ? (
<img src={preview} alt="Avatar preview" />
) : (
<FiCamera size={40} color="#667eea" />
)}
<Overlay className="overlay">
<FiCamera size={30} />
</Overlay>
</AvatarPreview>
{avatar && (
<button 
onClick={removeAvatar}
style={removeButtonStyle}
type="button"
>
<FiX /> Remove
</button>
)}
</AvatarSection>
<HiddenInput
type="file"
ref={fileInputRef}
onChange={handleFileSelect}
accept="image/*"
/>
<UploadArea
onDragOver={handleDragOver}
onDrop={handleDrop}
onClick={() => fileInputRef.current.click()}
>
<FiUpload size={40} color="#667eea" />
<p>Drag & drop or click to upload</p>
<p style={{ fontSize: 12, color: '#999' }}>
Supported: JPG, PNG, GIF (Max 5MB)
</p>
</UploadArea>
<input
type="text"
placeholder="Full Name"
style={inputStyle}
value={formData.name}
onChange={(e) => setFormData({...formData, name: e.target.value})}
/>
<input
type="email"
placeholder="Email"
style={inputStyle}
value={formData.email}
onChange={(e) => setFormData({...formData, email: e.target.value})}
/>
<input
type="password"
placeholder="Password"
style={inputStyle}
value={formData.password}
onChange={(e) => setFormData({...formData, password: e.target.value})}
/>
<button type="submit" style={buttonStyle}>
Complete Registration
</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '8px 0',
border: '1px solid #ddd',
borderRadius: '5px',
fontSize: '16px'
};
const buttonStyle = {
width: '100%',
padding: '12px',
background: '#667eea',
color: 'white',
border: 'none',
borderRadius: '5px',
fontSize: '16px',
cursor: 'pointer',
marginTop: '20px'
};
const removeButtonStyle = {
background: '#e74c3c',
color: 'white',
border: 'none',
padding: '5px 10px',
borderRadius: '5px',
marginTop: '10px',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
gap: '5px'
};
export default Form25;

---

Form 26: Location-Based Login

Introduction: Smart login that detects and displays user's location for security verification.

Features: Geolocation detection, map preview, location verification, IP tracking.

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { FiMapPin, FiAlertCircle } from 'react-icons/fi';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
`;
const Form = styled.div`
background: white;
padding: 40px;
border-radius: 10px;
width: 450px;
`;
const LocationCard = styled.div`
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
margin: 20px 0;
display: flex;
align-items: center;
gap: 15px;
`;
const LocationIcon = styled.div`
width: 50px;
height: 50px;
border-radius: 50%;
background: #667eea;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
`;
const LocationInfo = styled.div`
flex: 1;
`;
const Coordinates = styled.p`
font-family: monospace;
color: #666;
font-size: 14px;
`;
const MapPlaceholder = styled.div`
width: 100%;
height: 150px;
background: #e9ecef;
border-radius: 10px;
margin: 15px 0;
display: flex;
align-items: center;
justify-content: center;
color: #666;
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
rgba(102, 126, 234, 0.1) 10px,
rgba(102, 126, 234, 0.1) 20px
);
}
`;
const SecurityNote = styled.div`
background: ${props => props.trusted ? '#d4edda' : '#fff3cd'};
color: ${props => props.trusted ? '#155724' : '#856404'};
padding: 15px;
border-radius: 5px;
margin: 15px 0;
display: flex;
align-items: center;
gap: 10px;
`;
const Form26 = () => {
const [location, setLocation] = useState(null);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(true);
const [trusted, setTrusted] = useState(false);
useEffect(() => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
setLocation({
lat: position.coords.latitude,
lng: position.coords.longitude,
accuracy: position.coords.accuracy
});
setLoading(false);
// Simulate checking against trusted locations
setTrusted(Math.random() > 0.5);
},
(error) => {
setError(error.message);
setLoading(false);
}
);
} else {
setError('Geolocation is not supported');
setLoading(false);
}
}, []);
return (
<Container>
<Form>
<h2 style={{ textAlign: 'center', marginBottom: 20 }}>
Location Verification
</h2>
{loading ? (
<div style={{ textAlign: 'center', padding: 30 }}>
<div style={loaderStyle}></div>
<p>Detecting your location...</p>
</div>
) : error ? (
<LocationCard style={{ background: '#f8d7da', color: '#721c24' }}>
<FiAlertCircle size={24} />
<p>{error}</p>
</LocationCard>
) : (
<>
<LocationCard>
<LocationIcon>
<FiMapPin />
</LocationIcon>
<LocationInfo>
<h4>Your Location</h4>
<Coordinates>
{location.lat.toFixed(6)}, {location.lng.toFixed(6)}
</Coordinates>
<p style={{ fontSize: 12, color: '#999' }}>
Accuracy: ±{Math.round(location.accuracy)}m
</p>
</LocationInfo>
</LocationCard>
<MapPlaceholder>
<div style={{ textAlign: 'center', zIndex: 1 }}>
<FiMapPin size={30} color="#667eea" />
<p>Map Preview</p>
</div>
</MapPlaceholder>
<SecurityNote trusted={trusted}>
{trusted ? (
<>
<span>✓</span>
<span>This location matches your trusted devices</span>
</>
) : (
<>
<span>⚠</span>
<span>New location detected - additional verification required</span>
</>
)}
</SecurityNote>
</>
)}
<input
type="email"
placeholder="Email"
style={inputStyle}
/>
<input
type="password"
placeholder="Password"
style={inputStyle}
/>
<button style={buttonStyle}>
{trusted ? 'Login' : 'Verify & Login'}
</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '8px 0',
border: '1px solid #ddd',
borderRadius: '5px',
fontSize: '16px'
};
const buttonStyle = {
width: '100%',
padding: '12px',
background: '#667eea',
color: 'white',
border: 'none',
borderRadius: '5px',
fontSize: '16px',
cursor: 'pointer',
marginTop: '20px'
};
const loaderStyle = {
border: '3px solid #f3f3f3',
borderTop: '3px solid #667eea',
borderRadius: '50%',
width: '40px',
height: '40px',
animation: 'spin 1s linear infinite',
margin: '0 auto 20px'
};
export default Form26;

---

Form 27: Device Fingerprint Login

Introduction: Advanced security form that recognizes and stores device fingerprints for trusted access.

Features: Device recognition, browser fingerprinting, trusted devices list, security alerts.

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { FiSmartphone, FiLaptop, FiTablet, FiAlertCircle, FiCheck } from 'react-icons/fi';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
`;
const Form = styled.div`
background: white;
padding: 40px;
border-radius: 10px;
width: 450px;
`;
const DeviceInfo = styled.div`
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
margin: 20px 0;
`;
const DeviceRow = styled.div`
display: flex;
align-items: center;
gap: 15px;
padding: 10px;
border-bottom: 1px solid #e0e0e0;
&:last-child {
border-bottom: none;
}
`;
const DeviceIcon = styled.div`
width: 40px;
height: 40px;
border-radius: 50%;
background: ${props => props.trusted ? '#d4edda' : '#fff3cd'};
display: flex;
align-items: center;
justify-content: center;
color: ${props => props.trusted ? '#155724' : '#856404'};
`;
const TrustBadge = styled.span`
background: ${props => props.trusted ? '#28a745' : '#ffc107'};
color: white;
padding: 3px 10px;
border-radius: 12px;
font-size: 12px;
margin-left: 10px;
`;
const Form27 = () => {
const [currentDevice, setCurrentDevice] = useState(null);
const [trustedDevices, setTrustedDevices] = useState([]);
const [isTrusted, setIsTrusted] = useState(false);
useEffect(() => {
// Generate device fingerprint (simplified)
const fingerprint = {
id: Math.random().toString(36).substring(7),
userAgent: navigator.userAgent,
platform: navigator.platform,
language: navigator.language,
screenResolution: `${window.screen.width}x${window.screen.height}`,
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
};
setCurrentDevice(fingerprint);
// Simulate checking against trusted devices
const stored = localStorage.getItem('trustedDevices');
if (stored) {
const devices = JSON.parse(stored);
setTrustedDevices(devices);
setIsTrusted(devices.some(d => d.id === fingerprint.id));
} else {
// Mock some trusted devices
const mockDevices = [
{
id: 'dev1',
name: 'MacBook Pro',
type: 'laptop',
lastUsed: '2 days ago',
trusted: true
},
{
id: 'dev2',
name: 'iPhone 13',
type: 'phone',
lastUsed: '1 week ago',
trusted: true
}
];
setTrustedDevices(mockDevices);
localStorage.setItem('trustedDevices', JSON.stringify(mockDevices));
}
}, []);
const getDeviceIcon = (type) => {
switch(type) {
case 'laptop': return <FiLaptop />;
case 'phone': return <FiSmartphone />;
case 'tablet': return <FiTablet />;
default: return <FiLaptop />;
}
};
const trustCurrentDevice = () => {
if (currentDevice) {
const updatedDevices = [...trustedDevices, { 
...currentDevice, 
trusted: true,
lastUsed: 'Just now'
}];
setTrustedDevices(updatedDevices);
setIsTrusted(true);
localStorage.setItem('trustedDevices', JSON.stringify(updatedDevices));
}
};
return (
<Container>
<Form>
<h2 style={{ textAlign: 'center', marginBottom: 20 }}>
Device Recognition
</h2>
<DeviceInfo>
<h4>Current Device</h4>
<DeviceRow>
<DeviceIcon trusted={isTrusted}>
{getDeviceIcon('laptop')}
</DeviceIcon>
<div style={{ flex: 1 }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<strong>This Device</strong>
{isTrusted ? (
<TrustBadge trusted>✓ Trusted</TrustBadge>
) : (
<TrustBadge>New Device</TrustBadge>
)}
</div>
<p style={{ fontSize: 12, color: '#666' }}>
{currentDevice?.platform} • {currentDevice?.screenResolution}
</p>
</div>
</DeviceRow>
</DeviceInfo>
<DeviceInfo>
<h4>Trusted Devices</h4>
{trustedDevices.map((device, index) => (
<DeviceRow key={index}>
<DeviceIcon trusted>
{getDeviceIcon(device.type)}
</DeviceIcon>
<div style={{ flex: 1 }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<strong>{device.name}</strong>
<TrustBadge trusted>✓ Trusted</TrustBadge>
</div>
<p style={{ fontSize: 12, color: '#666' }}>
Last used: {device.lastUsed}
</p>
</div>
</DeviceRow>
))}
</DeviceInfo>
{!isTrusted && (
<div style={{ margin: '20px 0' }}>
<SecurityNote>
<FiAlertCircle />
<span>New device detected. Verify to add to trusted devices.</span>
</SecurityNote>
<button 
onClick={trustCurrentDevice}
style={{ ...buttonStyle, background: '#28a745' }}
>
<FiCheck /> Trust This Device
</button>
</div>
)}
<input
type="email"
placeholder="Email"
style={inputStyle}
/>
<input
type="password"
placeholder="Password"
style={inputStyle}
/>
<button style={buttonStyle}>
{isTrusted ? 'Login' : 'Verify & Login'}
</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '8px 0',
border: '1px solid #ddd',
borderRadius: '5px',
fontSize: '16px'
};
const buttonStyle = {
width: '100%',
padding: '12px',
background: '#667eea',
color: 'white',
border: 'none',
borderRadius: '5px',
fontSize: '16px',
cursor: 'pointer',
marginTop: '10px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: '10px'
};
const SecurityNote = styled.div`
background: #fff3cd;
color: #856404;
padding: 15px;
border-radius: 5px;
margin: 15px 0;
display: flex;
align-items: center;
gap: 10px;
`;
export default Form27;

---

Form 28: Quiz-Based Registration

Introduction: Fun registration process with a quick quiz to personalize the user experience.

Features: Multiple choice questions, progress tracking, personalized results, gamification.

import React, { useState } from 'react';
import styled from 'styled-components';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
`;
const Form = styled.div`
background: white;
padding: 40px;
border-radius: 10px;
width: 500px;
`;
const QuestionCard = styled.div`
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
margin: 20px 0;
`;
const Option = styled.button`
width: 100%;
padding: 15px;
margin: 8px 0;
background: ${props => props.selected ? '#667eea' : 'white'};
color: ${props => props.selected ? 'white' : '#333'};
border: 2px solid ${props => props.selected ? '#667eea' : '#e0e0e0'};
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
text-align: left;
&:hover {
border-color: #667eea;
transform: translateX(5px);
}
`;
const ProgressDots = styled.div`
display: flex;
justify-content: center;
gap: 10px;
margin: 20px 0;
`;
const Dot = styled.div`
width: 12px;
height: 12px;
border-radius: 50%;
background: ${props => props.active ? '#667eea' : '#e0e0e0'};
transition: all 0.3s;
`;
const Form28 = () => {
const [step, setStep] = useState(1);
const [answers, setAnswers] = useState({});
const [formData, setFormData] = useState({
name: '',
email: '',
password: ''
});
const questions = [
{
id: 1,
question: "What's your primary goal?",
options: [
"Learn new skills",
"Connect with others",
"Build something",
"Find opportunities"
]
},
{
id: 2,
question: "How did you hear about us?",
options: [
"Social Media",
"Friend referral",
"Search engine",
"Advertisement"
]
},
{
id: 3,
question: "What's your experience level?",
options: [
"Beginner",
"Intermediate",
"Advanced",
"Expert"
]
}
];
const handleAnswer = (questionId, answer) => {
setAnswers({...answers, [questionId]: answer});
if (step < questions.length) {
setTimeout(() => setStep(step + 1), 300);
}
};
const getResultMessage = () => {
const goals = answers[1];
const source = answers[2];
const level = answers[3];
return `Welcome, ${formData.name || 'future member'}! Based on your answers, you're a ${level?.toLowerCase()} level user interested in ${goals?.toLowerCase()}. We found you through ${source?.toLowerCase()} - great choice!`;
};
return (
<Container>
<Form>
<h2 style={{ textAlign: 'center', marginBottom: 10 }}>
Quick Registration Quiz
</h2>
<ProgressDots>
{[1, 2, 3].map(num => (
<Dot key={num} active={step >= num} />
))}
</ProgressDots>
{step <= questions.length ? (
<QuestionCard>
<h3 style={{ marginBottom: 20 }}>
Question {step} of {questions.length}
</h3>
<p style={{ marginBottom: 15, fontWeight: 'bold' }}>
{questions[step-1].question}
</p>
{questions[step-1].options.map((option, index) => (
<Option
key={index}
selected={answers[questions[step-1].id] === option}
onClick={() => handleAnswer(questions[step-1].id, option)}
>
{option}
</Option>
))}
</QuestionCard>
) : (
<QuestionCard>
<h3 style={{ textAlign: 'center', marginBottom: 20 }}>
🎉 Quiz Complete!
</h3>
<p style={{ lineHeight: 1.6, color: '#666' }}>
{getResultMessage()}
</p>
</QuestionCard>
)}
<input
type="text"
placeholder="Full Name"
style={inputStyle}
value={formData.name}
onChange={(e) => setFormData({...formData, name: e.target.value})}
/>
<input
type="email"
placeholder="Email"
style={inputStyle}
value={formData.email}
onChange={(e) => setFormData({...formData, email: e.target.value})}
/>
<input
type="password"
placeholder="Password"
style={inputStyle}
value={formData.password}
onChange={(e) => setFormData({...formData, password: e.target.value})}
/>
<button style={buttonStyle}>
Complete Registration
</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '8px 0',
border: '1px solid #ddd',
borderRadius: '5px',
fontSize: '16px'
};
const buttonStyle = {
width: '100%',
padding: '12px',
background: '#667eea',
color: 'white',
border: 'none',
borderRadius: '5px',
fontSize: '16px',
cursor: 'pointer',
marginTop: '20px'
};
export default Form28;

---

Form 29: Time-Based OTP with Countdown

Introduction: Secure authentication using time-based one-time passwords with visual countdown.

Features: TOTP algorithm simulation, visual timer, auto-refresh on expiry, progress ring.

import React, { useState, useEffect } from 'react';
import styled, { keyframes } from 'styled-components';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
`;
const Form = styled.div`
background: white;
padding: 40px;
border-radius: 10px;
width: 400px;
text-align: center;
`;
const TimerRing = styled.svg`
width: 120px;
height: 120px;
margin: 20px auto;
transform: rotate(-90deg);
`;
const TimerCircle = styled.circle`
stroke: ${props => props.color || '#667eea'};
stroke-width: 4;
fill: none;
stroke-dasharray: 314;
stroke-dashoffset: ${props => props.offset};
transition: stroke-dashoffset 1s linear;
`;
const OtpDisplay = styled.div`
font-size: 48px;
font-family: monospace;
letter-spacing: 10px;
color: #333;
margin: 20px 0;
`;
const OtpInput = styled.input`
width: 100%;
padding: 15px;
font-size: 24px;
text-align: center;
font-family: monospace;
letter-spacing: 10px;
border: 2px solid #e0e0e0;
border-radius: 8px;
margin: 20px 0;
&:focus {
outline: none;
border-color: #667eea;
}
`;
const Form29 = () => {
const [otp, setOtp] = useState('');
const [generatedOtp, setGeneratedOtp] = useState('');
const [timeLeft, setTimeLeft] = useState(30);
const [inputOtp, setInputOtp] = useState('');
useEffect(() => {
generateNewOtp();
const timer = setInterval(() => {
setTimeLeft((prev) => {
if (prev <= 1) {
generateNewOtp();
return 30;
}
return prev - 1;
});
}, 1000);
return () => clearInterval(timer);
}, []);
const generateNewOtp = () => {
const newOtp = Math.floor(100000 + Math.random() * 900000).toString();
setGeneratedOtp(newOtp);
console.log('Generated OTP:', newOtp); // In production, this would be sent via SMS/email
};
const calculateOffset = () => {
const circumference = 2 * Math.PI * 50; // 314
return circumference - (timeLeft / 30) * circumference;
};
const verifyOtp = () => {
if (inputOtp === generatedOtp) {
alert('OTP Verified Successfully!');
} else {
alert('Invalid OTP');
}
};
return (
<Container>
<Form>
<h2>Time-Based OTP</h2>
<p style={{ color: '#666', marginBottom: 20 }}>
Enter the 6-digit code from your authenticator app
</p>
<TimerRing viewBox="0 0 120 120">
<circle
cx="60"
cy="60"
r="50"
stroke="#e0e0e0"
strokeWidth="4"
fill="none"
/>
<TimerCircle
cx="60"
cy="60"
r="50"
color={timeLeft < 10 ? '#e74c3c' : '#667eea'}
offset={calculateOffset()}
/>
</TimerRing>
<div style={{ fontSize: 18, marginBottom: 10 }}>
Time remaining: {timeLeft}s
</div>
<OtpDisplay>
{generatedOtp}
</OtpDisplay>
<OtpInput
type="text"
maxLength="6"
placeholder="------"
value={inputOtp}
onChange={(e) => setInputOtp(e.target.value.replace(/\D/g, ''))}
/>
<button style={buttonStyle} onClick={verifyOtp}>
Verify OTP
</button>
<p style={{ marginTop: 20, fontSize: 14, color: '#999' }}>
Code refreshes automatically every 30 seconds
</p>
</Form>
</Container>
);
};
const buttonStyle = {
width: '100%',
padding: '12px',
background: '#667eea',
color: 'white',
border: 'none',
borderRadius: '5px',
fontSize: '16px',
cursor: 'pointer'
};
export default Form29;

---

Form 30: Multi-Language Login

Introduction: Accessible login form supporting multiple languages with instant switching.

Features: Language selector, RTL support for Arabic, translated labels, cultural adaptations.

import React, { useState } from 'react';
import styled from 'styled-components';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
`;
const Form = styled.div`
background: white;
padding: 40px;
border-radius: 10px;
width: 400px;
direction: ${props => props.dir};
`;
const LanguageSelector = styled.select`
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
`;
const translations = {
en: {
title: 'Welcome Back',
email: 'Email',
password: 'Password',
login: 'Sign In',
remember: 'Remember me',
forgot: 'Forgot Password?',
noAccount: "Don't have an account?",
signUp: 'Sign Up'
},
es: {
title: 'Bienvenido',
email: 'Correo electrónico',
password: 'Contraseña',
login: 'Iniciar sesión',
remember: 'Recordarme',
forgot: '¿Olvidaste tu contraseña?',
noAccount: '¿No tienes una cuenta?',
signUp: 'Regístrate'
},
fr: {
title: 'Bon Retour',
email: 'Email',
password: 'Mot de passe',
login: 'Se connecter',
remember: 'Se souvenir de moi',
forgot: 'Mot de passe oublié?',
noAccount: 'Pas de compte?',
signUp: "S'inscrire"
},
de: {
title: 'Willkommen zurück',
email: 'E-Mail',
password: 'Passwort',
login: 'Anmelden',
remember: 'Angemeldet bleiben',
forgot: 'Passwort vergessen?',
noAccount: 'Noch kein Konto?',
signUp: 'Registrieren'
},
ar: {
title: 'مرحبًا بعودتك',
email: 'البريد الإلكتروني',
password: 'كلمة المرور',
login: 'تسجيل الدخول',
remember: 'تذكرني',
forgot: 'نسيت كلمة المرور؟',
noAccount: 'ليس لديك حساب؟',
signUp: 'اشتراك'
},
zh: {
title: '欢迎回来',
email: '电子邮件',
password: '密码',
login: '登录',
remember: '记住我',
forgot: '忘记密码？',
noAccount: '没有账户？',
signUp: '注册'
},
ja: {
title: 'おかえりなさい',
email: 'メールアドレス',
password: 'パスワード',
login: 'ログイン',
remember: 'ログイン状態を保持',
forgot: 'パスワードをお忘れですか？',
noAccount: 'アカウントをお持ちでない方',
signUp: '新規登録'
}
};
const Form30 = () => {
const [language, setLanguage] = useState('en');
const t = translations[language];
return (
<Container>
<Form dir={language === 'ar' ? 'rtl' : 'ltr'}>
<LanguageSelector 
value={language} 
onChange={(e) => setLanguage(e.target.value)}
>
<option value="en">English</option>
<option value="es">Español</option>
<option value="fr">Français</option>
<option value="de">Deutsch</option>
<option value="ar">العربية</option>
<option value="zh">中文</option>
<option value="ja">日本語</option>
</LanguageSelector>
<h2 style={{ textAlign: 'center', marginBottom: 30 }}>
{t.title}
</h2>
<input
type="email"
placeholder={t.email}
style={inputStyle}
/>
<input
type="password"
placeholder={t.password}
style={inputStyle}
/>
<div style={{ 
display: 'flex', 
justifyContent: 'space-between', 
margin: '15px 0',
flexDirection: language === 'ar' ? 'row-reverse' : 'row'
}}>
<label>
<input type="checkbox" /> {t.remember}
</label>
<a href="#" style={{ color: '#667eea', textDecoration: 'none' }}>
{t.forgot}
</a>
</div>
<button style={buttonStyle}>
{t.login}
</button>
<p style={{ textAlign: 'center', marginTop: 20 }}>
{t.noAccount} <a href="#" style={{ color: '#667eea', textDecoration: 'none' }}>
{t.signUp}
</a>
</p>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '8px 0',
border: '1px solid #ddd',
borderRadius: '5px',
fontSize: '16px'
};
const buttonStyle = {
width: '100%',
padding: '12px',
background: '#667eea',
color: 'white',
border: 'none',
borderRadius: '5px',
fontSize: '16px',
cursor: 'pointer'
};
export default Form30;

---

Form 31: Keyboard Shortcuts Login

Introduction: Productivity-focused login form with keyboard navigation and shortcuts.

Features: Keyboard navigation, submit with Enter, Tab order management, shortcut hints.

import React, { useState, useEffect, useRef } from 'react';
import styled from 'styled-components';
import { FiKey } from 'react-icons/fi';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
`;
const Form = styled.form`
background: white;
padding: 40px;
border-radius: 10px;
width: 400px;
position: relative;
`;
const ShortcutHint = styled.div`
position: absolute;
top: 10px;
right: 10px;
background: #f8f9fa;
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
color: #666;
display: flex;
align-items: center;
gap: 5px;
`;
const KeyHint = styled.kbd`
background: #e9ecef;
border: 1px solid #ced4da;
border-radius: 3px;
padding: 2px 5px;
font-size: 12px;
`;
const Input = styled.input`
width: 100%;
padding: 12px;
margin: 8px 0;
border: 2px solid ${props => props.focused ? '#667eea' : '#e0e0e0'};
border-radius: 5px;
font-size: 16px;
transition: border-color 0.3s;
&:focus {
outline: none;
border-color: #667eea;
}
`;
const Form31 = () => {
const [formData, setFormData] = useState({ email: '', password: '' });
const [focusedField, setFocusedField] = useState(null);
const emailRef = useRef(null);
const passwordRef = useRef(null);
const submitRef = useRef(null);
useEffect(() => {
const handleKeyDown = (e) => {
// Ctrl/Cmd + L focuses email
if ((e.ctrlKey || e.metaKey) && e.key === 'l') {
e.preventDefault();
emailRef.current.focus();
}
// Ctrl/Cmd + P focuses password
if ((e.ctrlKey || e.metaKey) && e.key === 'p') {
e.preventDefault();
passwordRef.current.focus();
}
// Ctrl/Cmd + Enter submits
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
e.preventDefault();
handleSubmit(e);
}
// Escape clears fields
if (e.key === 'Escape') {
setFormData({ email: '', password: '' });
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [formData]);
const handleSubmit = (e) => {
e.preventDefault();
console.log('Login with:', formData);
};
return (
<Container>
<Form onSubmit={handleSubmit}>
<ShortcutHint>
<FiKey /> <KeyHint>⌘L</KeyHint> <KeyHint>⌘P</KeyHint> <KeyHint>⌘⏎</KeyHint>
</ShortcutHint>
<h2 style={{ textAlign: 'center', marginBottom: 30 }}>
Keyboard Shortcuts
</h2>
<Input
ref={emailRef}
type="email"
placeholder="Email (⌘L)"
value={formData.email}
onChange={(e) => setFormData({...formData, email: e.target.value})}
onFocus={() => setFocusedField('email')}
onBlur={() => setFocusedField(null)}
focused={focusedField === 'email'}
/>
<Input
ref={passwordRef}
type="password"
placeholder="Password (⌘P)"
value={formData.password}
onChange={(e) => setFormData({...formData, password: e.target.value})}
onFocus={() => setFocusedField('password')}
onBlur={() => setFocusedField(null)}
focused={focusedField === 'password'}
/>
<div style={{ 
display: 'flex', 
justifyContent: 'space-between', 
margin: '15px 0' 
}}>
<label>
<input type="checkbox" /> Remember me
</label>
<a href="#" style={{ color: '#667eea', textDecoration: 'none' }}>
Forgot?
</a>
</div>
<button 
ref={submitRef}
type="submit" 
style={buttonStyle}
>
Sign In (⌘⏎)
</button>
<div style={{ marginTop: 20, fontSize: 14, color: '#999' }}>
<p>Keyboard shortcuts:</p>
<ul style={{ listStyle: 'none', padding: 0 }}>
<li>⌘L - Focus email</li>
<li>⌘P - Focus password</li>
<li>⌘⏎ - Submit form</li>
<li>ESC - Clear all</li>
</ul>
</div>
</Form>
</Container>
);
};
const buttonStyle = {
width: '100%',
padding: '12px',
background: '#667eea',
color: 'white',
border: 'none',
borderRadius: '5px',
fontSize: '16px',
cursor: 'pointer'
};
export default Form31;

---

Form 32: Weather-Based Themed Login

Introduction: Dynamic login form that changes theme based on user's local weather.

Features: Weather API integration, dynamic backgrounds, temperature-based colors, animated weather icons.

import React, { useState, useEffect } from 'react';
import styled, { keyframes } from 'styled-components';
import { 
FiSun, FiCloud, FiCloudRain, FiCloudSnow, 
FiCloudDrizzle, FiWind, FiCloudLightning 
} from 'react-icons/fi';
const float = keyframes`
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
`;
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: ${props => props.gradient};
transition: background 1s ease;
`;
const Form = styled.div`
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
padding: 40px;
border-radius: 10px;
width: 350px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
`;
const WeatherIcon = styled.div`
font-size: 60px;
color: #667eea;
text-align: center;
margin-bottom: 20px;
animation: ${float} 3s ease-in-out infinite;
`;
const TempDisplay = styled.div`
text-align: center;
font-size: 24px;
color: #333;
margin-bottom: 20px;
`;
const Form32 = () => {
const [weather, setWeather] = useState({
condition: 'sunny',
temp: 22,
location: 'New York'
});
const [gradient, setGradient] = useState('linear-gradient(135deg, #667eea 0%, #764ba2 100%)');
useEffect(() => {
// Simulate weather API call
const weatherConditions = [
'sunny', 'cloudy', 'rainy', 'snowy', 'stormy', 'windy'
];
const randomCondition = weatherConditions[Math.floor(Math.random() * weatherConditions.length)];
const randomTemp = Math.floor(Math.random() * 35);
setWeather({
condition: randomCondition,
temp: randomTemp,
location: 'Current Location'
});
// Set gradient based on weather
switch(randomCondition) {
case 'sunny':
setGradient('linear-gradient(135deg, #f6d365 0%, #fda085 100%)');
break;
case 'cloudy':
setGradient('linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%)');
break;
case 'rainy':
setGradient('linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%)');
break;
case 'snowy':
setGradient('linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%)');
break;
case 'stormy':
setGradient('linear-gradient(135deg, #373b44 0%, #4286f4 100%)');
break;
case 'windy':
setGradient('linear-gradient(135deg, #d4d3dd 0%, #6a82fb 100%)');
break;
default:
setGradient('linear-gradient(135deg, #667eea 0%, #764ba2 100%)');
}
}, []);
const getWeatherIcon = () => {
switch(weather.condition) {
case 'sunny': return <FiSun />;
case 'cloudy': return <FiCloud />;
case 'rainy': return <FiCloudRain />;
case 'snowy': return <FiCloudSnow />;
case 'stormy': return <FiCloudLightning />;
case 'windy': return <FiWind />;
default: return <FiSun />;
}
};
return (
<Container gradient={gradient}>
<Form>
<WeatherIcon>
{getWeatherIcon()}
</WeatherIcon>
<TempDisplay>
{weather.temp}°C • {weather.condition}
</TempDisplay>
<h2 style={{ textAlign: 'center', marginBottom: 20 }}>
Welcome to {weather.location}
</h2>
<input
type="email"
placeholder="Email"
style={inputStyle}
/>
<input
type="password"
placeholder="Password"
style={inputStyle}
/>
<button style={buttonStyle}>
Sign In
</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '8px 0',
border: '1px solid #ddd',
borderRadius: '5px',
fontSize: '16px'
};
const buttonStyle = {
width: '100%',
padding: '12px',
background: '#667eea',
color: 'white',
border: 'none',
borderRadius: '5px',
fontSize: '16px',
cursor: 'pointer',
marginTop: '20px'
};
export default Form32;

---

Form 33: Gamified Streak Login

Introduction: Engaging login form that tracks and rewards daily login streaks.

Features: Streak counter, calendar heatmap, achievement badges, motivational messages.

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { FiStar, FiAward, FiTrendingUp } from 'react-icons/fi';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
`;
const Form = styled.div`
background: white;
padding: 40px;
border-radius: 10px;
width: 450px;
`;
const StreakCounter = styled.div`
background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
padding: 20px;
border-radius: 10px;
color: white;
text-align: center;
margin-bottom: 30px;
`;
const StreakNumber = styled.div`
font-size: 48px;
font-weight: bold;
line-height: 1;
`;
const Calendar = styled.div`
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
margin: 20px 0;
`;
const Day = styled.div`
aspect-ratio: 1;
background: ${props => {
if (props.active) return '#28a745';
if (props.streak) return '#ffc107';
return '#e9ecef';
}};
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: ${props => props.active || props.streak ? 'white' : '#666'};
`;
const Badge = styled.div`
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 15px;
background: ${props => props.achieved ? '#28a745' : '#e9ecef'};
color: ${props => props.achieved ? 'white' : '#666'};
border-radius: 20px;
margin: 5px;
font-size: 14px;
`;
const Form33 = () => {
const [streak, setStreak] = useState(0);
const [lastLogin, setLastLogin] = useState(null);
const [badges, setBadges] = useState({});
useEffect(() => {
// Load streak from localStorage
const saved = localStorage.getItem('loginStreak');
const last = localStorage.getItem('lastLogin');
if (saved && last) {
const lastDate = new Date(last);
const today = new Date();
const diffDays = Math.floor((today - lastDate) / (1000 * 60 * 60 * 24));
if (diffDays === 1) {
// Consecutive day
setStreak(parseInt(saved) + 1);
} else if (diffDays === 0) {
// Same day
setStreak(parseInt(saved));
} else {
// Streak broken
setStreak(1);
}
} else {
setStreak(1);
}
setLastLogin(new Date().toDateString());
}, []);
useEffect(() => {
// Update badges based on streak
setBadges({
firstLogin: streak >= 1,
threeDay: streak >= 3,
weekly: streak >= 7,
monthly: streak >= 30,
veteran: streak >= 100
});
}, [streak]);
const handleLogin = () => {
localStorage.setItem('loginStreak', streak.toString());
localStorage.setItem('lastLogin', new Date().toISOString());
console.log('Logged in with streak:', streak);
};
const generateCalendarDays = () => {
const days = [];
const today = new Date().getDay();
for (let i = 6; i >= 0; i--) {
const dayIndex = (today - i + 7) % 7;
days.push({
name: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][dayIndex],
active: i === 0,
streak: i < streak && i < 7
});
}
return days;
};
return (
<Container>
<Form>
<StreakCounter>
<FiTrendingUp size={30} />
<StreakNumber>{streak}</StreakNumber>
<div>Day Streak</div>
<div style={{ fontSize: 14, opacity: 0.9 }}>
Last login: {lastLogin || 'Today'}
</div>
</StreakCounter>
<h3 style={{ marginBottom: 10 }}>This Week</h3>
<Calendar>
{generateCalendarDays().map((day, index) => (
<Day key={index} active={day.active} streak={day.streak}>
{day.name[0]}
</Day>
))}
</Calendar>
<h3 style={{ margin: '20px 0 10px' }}>Achievements</h3>
<div>
<Badge achieved={badges.firstLogin}>
<FiStar /> First Login
</Badge>
<Badge achieved={badges.threeDay}>
<FiAward /> 3-Day Streak
</Badge>
<Badge achieved={badges.weekly}>
<FiAward /> Weekly Warrior
</Badge>
<Badge achieved={badges.monthly}>
<FiAward /> Monthly Master
</Badge>
<Badge achieved={badges.veteran}>
<FiAward /> Century Club
</Badge>
</div>
<input
type="email"
placeholder="Email"
style={inputStyle}
/>
<input
type="password"
placeholder="Password"
style={inputStyle}
/>
<button style={buttonStyle} onClick={handleLogin}>
Login & Continue Streak
</button>
</Form>
</Container>
);
};
const inputStyle = {
width: '100%',
padding: '12px',
margin: '8px 0',
border: '1px solid #ddd',
borderRadius: '5px',
fontSize: '16px'
};
const buttonStyle = {
width: '100%',
padding: '12px',
background: '#667eea',
color: 'white',
border: 'none',
borderRadius: '5px',
fontSize: '16px',
cursor: 'pointer',
marginTop: '20px'
};
export default Form33;

---

Form 34: Accessibility-Focused Login

Introduction: Highly accessible login form with WCAG compliance and assistive features.

Features: Screen reader support, high contrast mode, adjustable font size, keyboard navigation.

import React, { useState } from 'react';
import styled from 'styled-components';
import { FiEye, FiEyeOff, FiVolume2, FiType } from 'react-icons/fi';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: ${props => props.highContrast ? '#000' : '#f8f9fa'};
transition: background 0.3s;
`;
const Form = styled.form`
background: ${props => props.highContrast ? '#000' : 'white'};
padding: 40px;
border-radius: 10px;
width: 450px;
border: ${props => props.highContrast ? '2px solid #fff' : 'none'};
`;
const Title = styled.h2`
text-align: center;
color: ${props => props.highContrast ? '#fff' : '#333'};
font-size: ${props => props.fontSize}px;
margin-bottom: 30px;
`;
const Label = styled.label`
display: block;
color: ${props => props.highContrast ? '#fff' : '#333'};
font-size: ${props => props.fontSize}px;
margin: 10px 0 5px;
font-weight: bold;
`;
const Input = styled.input`
width: 100%;
padding: ${props => props.fontSize * 0.75}px;
margin: 5px 0;
border: 2px solid ${props => props.highContrast ? '#fff' : '#ddd'};
border-radius: 5px;
background: ${props => props.highContrast ? '#000' : 'white'};
color: ${props => props.highContrast ? '#fff' : '#333'};
font-size: ${props => props.fontSize}px;
&:focus {
outline: 3px solid ${props => props.highContrast ? '#fff' : '#667eea'};
outline-offset: 2px;
}
`;
const Button = styled.button`
width: 100%;
padding: ${props => props.fontSize * 0.75}px;
background: ${props => props.highContrast ? '#fff' : '#667eea'};
color: ${props => props.highContrast ? '#000' : 'white'};
border: 2px solid ${props => props.highContrast ? '#fff' : 'transparent'};
border-radius: 5px;
font-size: ${props => props.fontSize}px;
cursor: pointer;
margin-top: 20px;
&:focus {
outline: 3px solid ${props => props.highContrast ? '#fff' : '#764ba2'};
outline-offset: 2px;
}
`;
const Controls = styled.div`
display: flex;
gap: 10px;
margin-bottom: 20px;
justify-content: center;
`;
const ControlButton = styled.button`
padding: 10px;
background: ${props => props.active ? '#667eea' : '#f0f0f0'};
color: ${props => props.active ? 'white' : '#333'};
border: 2px solid ${props => props.active ? '#667eea' : '#ddd'};
border-radius: 5px;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
&:focus {
outline: 3px solid #667eea;
}
`;
const ErrorMessage = styled.div`
color: #e74c3c;
font-size: ${props => props.fontSize * 0.875}px;
margin: 5px 0;
role: alert;
`;
const Form34 = () => {
const [formData, setFormData] = useState({ email: '', password: '' });
const [errors, setErrors] = useState({});
const [showPassword, setShowPassword] = useState(false);
const [highContrast, setHighContrast] = useState(false);
const [fontSize, setFontSize] = useState(16);
const [announcement, setAnnouncement] = useState('');
const validateForm = () => {
const newErrors = {};
if (!formData.email.includes('@')) {
newErrors.email = 'Please enter a valid email address';
}
if (formData.password.length < 8) {
newErrors.password = 'Password must be at least 8 characters';
}
setErrors(newErrors);
// Screen reader announcement
if (Object.keys(newErrors).length === 0) {
setAnnouncement('Form is valid. Ready to submit.');
} else {
setAnnouncement('Please fix the errors in the form.');
}
return Object.keys(newErrors).length === 0;
};
const handleSubmit = (e) => {
e.preventDefault();
if (validateForm()) {
setAnnouncement('Logging in successfully');
console.log('Login:', formData);
}
};
return (
<Container highContrast={highContrast}>
<Form highContrast={highContrast} onSubmit={handleSubmit}>
{/* Accessibility announcement for screen readers */}
<div role="status" aria-live="polite" style={{ position: 'absolute', left: '-9999px' }}>
{announcement}
</div>
<Controls>
<ControlButton
onClick={() => setFontSize(prev => Math.min(24, prev + 2))}
aria-label="Increase font size"
>
<FiType /> A+
</ControlButton>
<ControlButton
onClick={() => setFontSize(prev => Math.max(12, prev - 2))}
aria-label="Decrease font size"
>
<FiType /> A-
</ControlButton>
<ControlButton
active={highContrast}
onClick={() => setHighContrast(!highContrast)}
aria-label="Toggle high contrast"
>
<FiEye /> Contrast
</ControlButton>
</Controls>
<Title highContrast={highContrast} fontSize={fontSize * 1.5}>
Accessible Login
</Title>
<Label htmlFor="email" highContrast={highContrast} fontSize={fontSize}>
Email Address
</Label>
<Input
id="email"
type="email"
highContrast={highContrast}
fontSize={fontSize}
value={formData.email}
onChange={(e) => setFormData({...formData, email: e.target.value})}
aria-required="true"
aria-invalid={!!errors.email}
aria-describedby="email-error"
/>
{errors.email && (
<ErrorMessage id="email-error" fontSize={fontSize} role="alert">
{errors.email}
</ErrorMessage>
)}
<Label htmlFor="password" highContrast={highContrast} fontSize={fontSize}>
Password
</Label>
<div style={{ position: 'relative' }}>
<Input
id="password"
type={showPassword ? 'text' : 'password'}
highContrast={highContrast}
fontSize={fontSize}
value={formData.password}
onChange={(e) => setFormData({...formData, password: e.target.value})}
aria-required="true"
aria-invalid={!!errors.password}
aria-describedby="password-error"
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
style={{
position: 'absolute',
right: '10px',
top: '50%',
transform: 'translateY(-50%)',
background: 'none',
border: 'none',
cursor: 'pointer'
}}
aria-label={showPassword ? 'Hide password' : 'Show password'}
>
{showPassword ? <FiEyeOff /> : <FiEye />}
</button>
</div>
{errors.password && (
<ErrorMessage id="password-error" fontSize={fontSize} role="alert">
{errors.password}
</ErrorMessage>
)}
<div style={{ margin: '15px 0' }}>
<Label highContrast={highContrast} fontSize={fontSize}>
<input type="checkbox" aria-label="Remember me" /> Remember me
</Label>
</div>
<Button 
type="submit" 
highContrast={highContrast} 
fontSize={fontSize}
aria-label="Sign in to your account"
>
Sign In
</Button>
<div style={{ marginTop: 20, textAlign: 'center' }}>
<a 
href="#" 
style={{ 
color: highContrast ? '#fff' : '#667eea',
fontSize: fontSize
}}
aria-label="Forgot password? Click to reset"
>
Forgot Password?
</a>
</div>
</Form>
</Container>
);
};
export default Form34;

---

Form 35: Blockchain Wallet Login

Introduction: Cryptocurrency-themed login with wallet connection and Web3 integration.

Features: Wallet connect, Ethereum address display, balance check, transaction signing simulation.

```jsx
import React, { useState } from 'react';
import styled from 'styled-components';
import { FiLink, FiCopy, FiCheck } from 'react-icons/fi';

const Container = styled.div display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);;

const Form = styled.div background: white; padding: 40px; border-radius: 10px; width: 450px;;

const WalletCard = styled.div background: #f8f9fa; padding: 20px; border-radius: 10px; margin: 20px 0;;

const Address = styled.div font-family: monospace; background: #e9ecef; padding: 10px; border-radius: 5px; font-size: 14px; display: flex; align-items: center; justify-content: space-between;;

const Balance = styled.div font-size: 24px; font-weight: bold; color: #28a745; margin: 10px 0;;

const NetworkBadge = styled.span background: ${props => { switch(props.network) { case 'mainnet': return '#28a745'; case 'ropsten': case 'rinkeby': return '#ffc107'; default: return '#6c757d'; } }}; color: white; padding: 3px 10px; border-radius: 12px; font-size: 12px;;

const Form35 = () => {
const [connected, setConnected] = useState(false);
const [wallet, setWallet] = useState({
address: '',
balance: '0',
network: 'mainnet'
});
const [copied, setCopied] = useState(false);

const connectWallet = () => {
// Simulate wallet connection
setTimeout(() => {
setConnected(true);
setWallet({
address: '0x742d35Cc6634C0532925a3b844Bc