Introduction
A contact form allows users to reach out to you or your organization via your website. In this tutorial, you’ll learn how to create a complete contact form using HTML, CSS for styling, and JavaScript to handle form submissions and print the data to the console.
Development Steps
- Create Basic HTML Structure: Set up the HTML structure for the contact form with fields for name, email, subject, and message.
- Style the Form with CSS: Use CSS to create a responsive and attractive design.
- Handle Form Submission with JavaScript: Capture form data using JavaScript and print it to the console.
Step 1: Create a Basic HTML Structure
We’ll create the basic structure of a contact form with fields for the user's name, email, subject, and message.
<!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>
</head>
<body>
<!-- Step 1: Contact form -->
<div class="contact-container">
<form class="contact-form" id="contactForm">
<h2>Contact Us</h2>
<div class="input-group">
<label for="name">Name</label>
<input type="text" id="name" placeholder="Enter your name" required>
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter your email" required>
</div>
<div class="input-group">
<label for="subject">Subject</label>
<input type="text" id="subject" placeholder="Enter the subject" required>
</div>
<div class="input-group">
<label for="message">Message</label>
<textarea id="message" placeholder="Enter your message" required></textarea>
</div>
<button type="submit" class="btn">Send Message</button>
</form>
</div>
</body>
</html>
Explanation:
- The form contains fields for name, email, subject, and message.
- A button labeled "Send Message" is included for submitting the form.
Step 2: Style the Form with CSS
Next, we’ll style the contact form to make it visually appealing and responsive.
<head>
<style>
/* General form styles */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.contact-container {
background-color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
}
.contact-form h2 {
margin-bottom: 20px;
text-align: center;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 5px;
font-size: 14px;
}
.input-group input, .input-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
.input-group textarea {
height: 100px;
resize: vertical;
}
.btn {
width: 100%;
padding: 10px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #2980b9;
}
@media (max-width: 768px) {
.contact-container {
padding: 20px;
}
.input-group input, .input-group textarea, .btn {
font-size: 14px;
padding: 8px;
}
}
@media (max-width: 480px) {
.contact-container {
padding: 15px;
}
.contact-form h2 {
font-size: 18px;
}
.input-group input, .input-group textarea, .btn {
font-size: 12px;
padding: 6px;
}
}
</style>
</head>
Explanation:
textarea: The message field is styled to allow vertical resizing with a minimum height of 100px.- Responsive Design: The form is responsive and adjusts padding and font size for smaller devices using media queries.
Step 3: Handle Form Submission with JavaScript
We’ll add a JavaScript function to capture the form data and print it to the console upon submission.
<body>
<script>
// Step 3: Handle form submission
document.getElementById('contactForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the form from refreshing the page
// Capture the input values
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const subject = document.getElementById('subject').value;
const message = document.getElementById('message').value;
// Print the values to the console
console.log('Name:', name);
console.log('Email:', email);
console.log('Subject:', subject);
console.log('Message:', message);
});
</script>
</body>
Explanation:
event.preventDefault(): Prevents the form from reloading the page when submitted.console.log(): Prints the entered name, email, subject, and message to the console for testing purposes.
Complete Example
Here’s the full code for the contact form, combining HTML, CSS, and JavaScript:
<!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>
/* General form styles */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.contact-container {
background-color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
}
.contact-form h2 {
margin-bottom: 20px;
text-align: center;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 5px;
font-size: 14px;
}
.input-group input, .input-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
.input-group textarea {
height: 100px;
resize: vertical;
}
.btn {
width: 100%;
padding: 10px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #2980b9;
}
@media (max-width: 768px) {
.contact-container {
padding: 20px;
}
.input-group input, .input-group textarea, .btn {
font-size: 14px;
padding: 8px;
}
}
@media (max-width: 480px) {
.contact-container {
padding: 15px;
}
.contact-form h2 {
font-size: 18px;
}
.input-group input, .input-group textarea, .btn {
font-size: 12px;
padding: 6px;
}
}
</style>
</head>
<body>
<!-- Step 1: Contact form -->
<div class="contact-container">
<form class="contact-form" id="contactForm">
<h2>Contact Us</h2>
<div class="input-group">
<label for="name">Name</label>
<input type="text" id="name" placeholder="Enter your name" required>
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter your email" required>
</div>
<div class="input-group">
<label for="subject">Subject</label>
<input type="text" id="subject" placeholder="Enter the subject" required>
</div>
<div class="input-group">
<label for="message">Message</label>
<textarea id="message" placeholder="Enter your message" required></textarea>
</div>
<button type="submit" class="btn">Send Message</button>
</form>
</div>
<script>
// Step 3: Handle form submission
document.getElementById('contactForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the form from refreshing the page
// Capture the input values
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const subject = document.getElementById('subject').value;
const message = document.getElementById('message').value;
// Print the values to the console
console.log('Name:', name);
console.log('Email:', email);
console.log('Subject:', subject);
console.log('Message:', message);
});
</script>
</body>
</html>
Output
You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:
Conclusion
In this tutorial, you learned how to create a contact form using HTML, CSS, and JavaScript. The form collects user data such as name, email, subject, and message and prints it to the console. You can further enhance this form by adding validation or integrating it with an email service to send messages.
Comments
Post a Comment
Leave Comment