Create an HTML form with the three required elements below that submit the data using
the POST method to a server.
A text area that collects the user’s name, email, phone number, and a message.
A radio button for preferred contact method
Drop-down menu for the inquiry type
Implement a preview feature that uses the GET method to display the entered data on the same
page before submission.
Implement a client-side form validation to ensure the three required elements below are
validated. If any validation fails, appropriate error messages should be displayed.
All text area fields are filled in.
The email is in the proper format.
The phone number contains only 10 digits.
SOURCE CODE
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<title>Company Contact Form</title>
<style>
Body {
Font-family: Arial, sans-serif;
Background-color: #f4f6f8;
Margin: 40px;
}
.container {
Max-width: 600px;
Margin: auto;
Background: #fff;
Padding: 20px;
Border-radius: 8px;
Box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
H2 {
Text-align: center;
}
Label {
Display: block;
Margin-top: 10px;
Font-weight: bold;
}
Input, textarea, select {
Width: 100%;
Padding: 8px;
Margin-top: 5px;
}
.radio-group {
Margin-top: 5px;
}
.error {
Color: red;
Font-size: 14px;
}
.btn {
Margin-top: 15px;
Padding: 10px;
Width: 100%;
Border: none;
Background-color: #007BFF;
Color: white;
Font-size: 16px;
Cursor: pointer;
}
.btn:hover {
Background-color: #0056b3;
}
.preview {
Margin-top: 20px;
Background: #e9f5ff;
Padding: 15px;
Border-radius: 5px;
}
</style>
<script>
Function validateForm() {
Let valid = true;
// Get values
Let name = [Link](“name”).[Link]();
Let email = [Link](“email”).[Link]();
Let phone = [Link](“phone”).[Link]();
Let message = [Link](“message”).[Link]();
// Clear errors
[Link](“error”).innerHTML = “”;
// Email regex
Let emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
// Phone regex (10 digits)
Let phonePattern = /^[0-9]{10}$/;
If (name === “” || email === “” || phone === “” || message === “”) {
[Link](“error”).innerHTML = “All fields must be filled.”;
Valid = false;
} else if () {
[Link](“error”).innerHTML = “Invalid email format.”;
Valid = false;
} else if () {
[Link](“error”).innerHTML = “Phone number must be exactly 10
digits.”;
Valid = false;
}
Return valid;
}
Function previewData() {
If (!validateForm()) return false;
// Get values
Let name = [Link](“name”).value;
Let email = [Link](“email”).value;
Let phone = [Link](“phone”).value;
Let message = [Link](“message”).value;
Let inquiry = [Link](“inquiry”).value;
Let contactMethod = [Link](‘input[name=”contact”]:checked’);
contactMethod = contactMethod ? [Link] : “Not selected”;
// Display preview (GET-style simulation)
[Link](“preview”).innerHTML = `
<h3>Preview (GET Method)</h3>
<p><strong>Name:</strong> ${name}</p>
<p><strong>Email:</strong> ${email}</p>
<p><strong>Phone:</strong> ${phone}</p>
<p><strong>Message:</strong> ${message}</p>
<p><strong>Preferred Contact:</strong> ${contactMethod}</p>
<p><strong>Inquiry Type:</strong> ${inquiry}</p>
`;
}
</script>
</head>
<body>
<div class=”container”>
<h2>Contact Us</h2>
<!—FORM USING POST
<form method=”POST” action=”#” onsubmit=”return validateForm();”>
<!—Text Inputs
<label>Name:</label>
<input type=”text” id=”name” name=”name”>
<label>Email:</label>
<input type=”text” id=”email” name=”email”>
<label>Phone Number:</label>
<input type=”text” id=”phone” name=”phone”>
<label>Message:</label>
<textarea id=”message” name=”message”></textarea>
<!—Radio Buttons
<label>Preferred Contact Method:</label>
<div class=”radio-group”>
<input type=”radio” name=”contact” value=”Email”> Email
<input type=”radio” name=”contact” value=”Phone”> Phone
<input type=”radio” name=”contact” value=”Both”> Both
</div>
<!—Dropdown
<label>Inquiry Type:</label>
<select id=”inquiry” name=”inquiry”>
<option value=”General Inquiry”>General Inquiry</option>
<option value=”Support Request”>Support Request</option>
<option value=”Feedback”>Feedback</option>
</select>
<!—Error Display
<p id=”error” class=”error”></p>
<!—Buttons
<button type=”button” class=”btn” onclick=”previewData()”>Preview (GET)</button>
<button type=”submit” class=”btn”>Submit (POST)</button>
</form>
<!—Preview Section
<div id=”preview” class=”preview”></div>
</div>
</body>
</html>
SSCREENSHOTS
1. EMPTY FORM
2. FILLED FORM
CODE EXPLANATION
1. Overall Purpose of the Form
This HTML project creates a contact form for a company website. The form collects user
details such as name, email, phone number, and a message. It also allows users to select a
preferred contact method and inquiry type. The form includes client-side validation and a
preview feature before submission.
2. HTML Structure and Form Design
The form is created using the <form> element:
<form method="POST" action="#" onsubmit="return validateForm();">
Purpose:
The POST method is used to submit data securely to a server.
action="#" means no backend server is connected (for assignment simulation).
onsubmit="return validateForm()" ensures validation runs before submission.
3. Input Fields (Text Area Section)
Fields used:
Name
Email
Phone number
Message
Purpose:
These fields collect essential user information.
Each field uses:
<input type="text">
<textarea></textarea>
Why this matters:
Ensures structured data collection.
The textarea allows longer messages from users.
These fields are required for communication.
4. Radio Buttons (Preferred Contact Method)
<input type="radio" name="contact" value="Email">
Purpose:
Allows users to choose only ONE preferred contact method:
o Email
o Phone
o Both
Why radio buttons are used:
They enforce a single choice.
Prevent conflicting selections.
5. Dropdown Menu (Inquiry Type)
<select id="inquiry">
Options:
General Inquiry
Support Request
Feedback
Purpose:
Helps categorize user messages.
Makes it easier for the company to handle requests efficiently.
6. Client-Side Validation (JavaScript)
Function:
function validateForm()
Purpose:
Ensures that incorrect or incomplete data is not submitted.
Validation rules:
a) Empty Field Check
if (name === "" || email === "" || phone === "" || message === "")
✔ Ensures all required fields are filled.
b) Email Validation
let emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
✔ Ensures email contains:
@ symbol
domain (e.g. .com)
c) Phone Validation
let phonePattern = /^[0-9]{10}$/;
✔ Ensures:
Only numbers are allowed
Exactly 10 digits
Error Display:
<p id="error" class="error"></p>
✔ Shows user-friendly messages when validation fails.
7. Preview Feature (GET Simulation)
Function:
function previewData()
Purpose:
Displays entered data before final submission.
Helps users confirm correctness.
How it works:
Retrieves form values using JavaScript
Displays them in a preview section
[Link]("preview").innerHTML
Why it uses GET concept:
GET method is used for displaying data in URL/query format.
This preview mimics that behavior without sending data to a server.
8. POST vs GET Usage
Feature Method Used Purpose
Final submission POST Sends data securely
Preview GET (simulated) Displays data before submission
9. User Experience (UX Improvements)
This form improves usability by:
Preventing invalid submissions (validation)
Allowing preview before sending
Providing clear error messages
Organizing input types logically
10. Conclusion
This project demonstrates how HTML, CSS, and JavaScript work together to build an interactive
and user-friendly contact form. It ensures data integrity through validation, improves usability
with previews, and follows standard web development practices for form handling.
REFERENCES
World Wide Web Consortium. (2023). HTML Forms.
Duckett, J. (2011). HTML and CSS: Design and Build Websites. Wiley.
Mozilla Developer Network. (2024). Form validation.