Create the HTML Structure
In this tutorial ,we create a basic HTML structure for the contact form. This form will have fields for the User’s name , email, and message, along with the submit button.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Form</title>
</head>
<body>
<div class="container">
<h2>Contact Us</h2>
<form id="contactForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<iput type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Submit</button>
</form>
<p id="statusMessage"></p>
</div>
<script src="script.js"></script>
</body>
</html>
Explanation:
- HTML Elements
- <label>: Labels for form input
- <input>: Text input fields for name and email
- <textarea>: A larger text area for the message.
- <button>: A button to submit the form
- Attributes
- ‘required’: It ensure that the user must fill in the field before submitting
- ‘type=”email” ‘: Automatically check for valid email format
Add Some Basic CSS
Now, we can add some CSS to arrange our form to look good.
/* Styles.css */
body{
font-family:Ariel, sas-serif;
background-color: #f4f4f4;
display: flex;
justify-content:centre;
align-item: centre;
height:100vh;
margin: 0;
}
.cotainer{
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
width: 300px;
}
h2{
text-align: centre;
}
label{
margin-top: 10px;
display: block;
}
input, textarea {
width: 100px;
padding: 10px;
margin-top: 15px;
margin-bottom: 15px;
border: 1px solid #odd;
border-radius: 4px;
}
button{
width: 100px;
padding: 10px;
background-color:#28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover{
background-color: #218838;
}
#statusMessage{
color:red;
text-align: centre;
margin-top: 10px;
}
Explanation:
- Container: The form is centered and styled with padding, border-radius,and box-shadow for good look.
- Input Styling: Inputs and the textarea are made full-width, padding for comfort.
- Button styling: The submit button is styled with a green color(#218838) that change on hover.
Add JavaScript for form validation
Now we gonna add some Javascript to validate our form before submission . The script check if the field are filled out correctly.
//script.js
document.getElementById('contactForm').addEventListener('submit',fuction(event)
{
event.preventDefault();
const name= document.getElementById('name').value;
const email= document.getElementById('email').value;
const message= documet.getElementById('message').value;
const statusMessage= document.getElementById('statusMessage');
if (name===' '|| email===' ' || message===' ' )
{
statusMessage.textContent = 'Please fill out all fields.';
return;
}
if (!validateEmail(email))
{
statusMessage.textContent = 'please enter a valid email address.';
return;
}
statusMessage.textContent = 'form submitted successfully!';
statusMessage.style.color = 'green';
// Reset the form
document.getElementById('contactForm').reset();
});
function ValidateEmail(email)
{
const re = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
return re.test(String(email).toLowerCase());
}
Explanation:
- EventListener: Default form submission to handle it through JS.
- Validation: To check the name, email,and message fields are filled. Also validate the email format using expression.
- Feedback: The user recieve immediate feedback in case of issues or success.
Test the form
Now its the time to test our form
- Open the HTML file in a browser.
- Test by entering various input:
- Leave fields blank to see the validation message.
- Enter an incorrect email to test the email validation.
- Submit the form with valid input to see the success message.
Output:
When you open the HTML file i your browser, you'll see a simple,styled contact form. If you attempt to submit it without filling out the fields correctly,get error message. once you fill it correctly,you get a success message, and the form will reset.