ebaizel · June 3, 2025 12:20
diff --git a/html-form.html b/html-form.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 40px auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .form-container {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-row {
            display: flex;
            gap: 15px;
        }
        
        .form-row .form-group {
            flex: 1;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        textarea {
            width: 100%;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            box-sizing: border-box;
        }
        
        input:focus,
        textarea:focus {
            outline: none;
            border-color: #4CAF50;
        }
        
        .submit-btn {
            background-color: #4CAF50;
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            width: 100%;
            margin-top: 10px;
        }
        
        .submit-btn:hover {
            background-color: #45a049;
        }
        
        @media (max-width: 600px) {
            .form-row {
                flex-direction: column;
                gap: 0;
            }
        }
    </style>
 </head>
 <body>
    <div class="form-container">
        <h1>Contact Information</h1>
        <form id="contactForm" action="#" method="POST">
            <div class="form-row">
                <div class="form-group">
                    <label for="firstName">First Name *</label>
                    <input type="text" id="firstName" name="firstName" required>
                </div>
                <div class="form-group">
                    <label for="lastName">Last Name *</label>
                    <input type="text" id="lastName" name="lastName" required>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="email">Email Address *</label>
                    <input type="email" id="email" name="email" required>
                </div>
                <div class="form-group">
                    <label for="phone">Phone Number</label>
                    <input type="tel" id="phone" name="phone" placeholder="(555) 123-4567">
                </div>
            </div>
            
            <div class="form-group">
                <label for="address">Street Address</label>
                <input type="text" id="address" name="address" placeholder="123 Main Street">
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="city">City</label>
                    <input type="text" id="city" name="city">
                </div>
                <div class="form-group">
                    <label for="state">State</label>
                    <input type="text" id="state" name="state" placeholder="CA">
                </div>
                <div class="form-group">
                    <label for="zipCode">ZIP Code</label>
                    <input type="text" id="zipCode" name="zipCode" placeholder="12345">
                </div>
            </div>
            
            <button type="submit" class="submit-btn">Submit</button>
        </form>
    </div>

    <script>
        document.getElementById('contactForm').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('Form submitted! (This is just a demo - no data was actually sent)');
        });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Contact Form</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	max-width: 600px;
	margin: 40px auto;
	padding: 20px;
	background-color: #f5f5f5;
	}

	.form-container {
	background: white;
	padding: 30px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	}

	h1 {
	color: #333;
	text-align: center;
	margin-bottom: 30px;
	}

	.form-group {
	margin-bottom: 20px;
	}

	.form-row {
	display: flex;
	gap: 15px;
	}

	.form-row .form-group {
	flex: 1;
	}

	label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
	color: #555;
	}

	input[type="text"],
	input[type="email"],
	input[type="tel"],
	textarea {
	width: 100%;
	padding: 12px;
	border: 2px solid #ddd;
	border-radius: 4px;
	font-size: 16px;
	box-sizing: border-box;
	}

	input:focus,
	textarea:focus {
	outline: none;
	border-color: #4CAF50;
	}

	.submit-btn {
	background-color: #4CAF50;
	color: white;
	padding: 12px 30px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	width: 100%;
	margin-top: 10px;
	}

	.submit-btn:hover {
	background-color: #45a049;
	}

	@media (max-width: 600px) {
	.form-row {
	flex-direction: column;
	gap: 0;
	}
	}
	</style>
	</head>
	<body>
	<div class="form-container">
	<h1>Contact Information</h1>
	<form id="contactForm" action="#" method="POST">
	<div class="form-row">
	<div class="form-group">
	<label for="firstName">First Name *</label>
	<input type="text" id="firstName" name="firstName" required>
	</div>
	<div class="form-group">
	<label for="lastName">Last Name *</label>
	<input type="text" id="lastName" name="lastName" required>
	</div>
	</div>

	<div class="form-row">
	<div class="form-group">
	<label for="email">Email Address *</label>
	<input type="email" id="email" name="email" required>
	</div>
	<div class="form-group">
	<label for="phone">Phone Number</label>
	<input type="tel" id="phone" name="phone" placeholder="(555) 123-4567">
	</div>
	</div>

	<div class="form-group">
	<label for="address">Street Address</label>
	<input type="text" id="address" name="address" placeholder="123 Main Street">
	</div>

	<div class="form-row">
	<div class="form-group">
	<label for="city">City</label>
	<input type="text" id="city" name="city">
	</div>
	<div class="form-group">
	<label for="state">State</label>
	<input type="text" id="state" name="state" placeholder="CA">
	</div>
	<div class="form-group">
	<label for="zipCode">ZIP Code</label>
	<input type="text" id="zipCode" name="zipCode" placeholder="12345">
	</div>
	</div>

	<button type="submit" class="submit-btn">Submit</button>
	</form>
	</div>

	<script>
	document.getElementById('contactForm').addEventListener('submit', function(e) {
	e.preventDefault();
	alert('Form submitted! (This is just a demo - no data was actually sent)');
	});
	</script>
	</body>
	</html>