Scribd
Upload
0 views

Web Programming 1 Unit 3

This document outlines a simple HTML contact form for a web programming course. It includes fields for name, email, phone number, message, preferred contact method, and inquiry type, along with validation scripts for required fields and format checks. The form is styled with CSS for a clean and responsive design.

Uploaded by

hunsuezekiel284
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0 views

Web Programming 1 Unit 3

This document outlines a simple HTML contact form for a web programming course. It includes fields for name, email, phone number, message, preferred contact method, and inquiry type, along with validation scripts for required fields and format checks. The form is styled with CSS for a clean and responsive design.

Uploaded by

hunsuezekiel284
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

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:

You might also like