CS 2205 - Web Programming 1 Unit 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact Us</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 50px auto;
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
margin-bottom: 25px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: 600;
}
input[type="text"],
input[type="email"],
textarea,
select {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
box-sizing: border-box;
}
textarea {
resize: vertical;
height: 100px;
}
.radio-group {
margin-bottom: 20px;
}
.radio-group label {
font-weight: normal;
margin-right: 15px;
}
input[type="submit"] {
background-color: #007BFF;
color: #fff;
border: none;
padding: 12px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
width: 100%;
transition: background-color 0.3s ease;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
@media (max-width: 600px) {
.container {
padding: 20px;
margin: 20px;
}
}
</style>
<script>
function validateForm() {
const form = document.forms["contactForm"];
const name = form["name"].value.trim();
const email = form["email"].value.trim();
const phone = form["phone"].value.trim();
const message = form["message"].value.trim();
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const phonePattern = /^\d{10}$/;
if (!name || !email || !phone || !message) {
alert("Please fill in all required fields.");
return false;
}
if (!emailPattern.test(email)) {
alert("Please enter a valid email address.");
return false;
}
if (!phonePattern.test(phone)) {
alert("Phone number must be exactly 10 digits.");
return false;
}
return true;
}
</script>
</head>
<body>
<div class="container">
<h2>Contact Us</h2>
<form name="contactForm" method="POST" action="submit.php" onsubmit="return
validateForm();">
<label for="name">Name:</label>
<input type="text" name="name" id="name" required>
<label for="email">Email:</label>
<input type="email" name="email" id="email" required>
<label for="phone">Phone Number:</label>
<input type="text" name="phone" id="phone" required>
<label for="message">Message:</label>
<textarea name="message" id="message" required></textarea>
<label>Preferred Contact Method:</label>
<div class="radio-group">
<label><input type="radio" name="contactMethod" value="Email" required>
Email</label>
<label><input type="radio" name="contactMethod" value="Phone"> Phone</label>
<label><input type="radio" name="contactMethod" value="Both"> Both</label>
</div>
<label for="inquiryType">Inquiry Type:</label>
<select name="inquiryType" id="inquiryType" required>
<option value="">Select an option</option>
<option value="General Inquiry">General Inquiry</option>
<option value="Support Request">Support Request</option>
<option value="Feedback">Feedback</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
Reference:
MDN Web Docs. (2023, November 17). How the web works - Learn web development.
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/
How_the_Web_works. Content available under a Creative Commons license.
Output:
