Brtest Tutorial
Project: Dynamic Contact Form
In this project, you will create a contact form that validates input, shows live feedback, and displays a thank-you message after submission. This combines everything you’ve learned — HTML forms, CSS styling, and JavaScript interactivity.
Project Preview
You will build a form that:
- Validates user input (name, email, and message)
- Shows instant feedback for errors
- Displays a success message without reloading the page
Example
Interactive contact form:
<style>
body { font-family: Arial; background: #f4f4f4; }
form { background: white; padding: 20px; border-radius: 10px; max-width: 350px; margin: 20px auto; }
input, textarea { width: 100%; padding: 8px; margin: 6px 0; border: 1px solid #ccc; border-radius: 4px; }
input:focus, textarea:focus { border-color: #4CAF50; outline: none; }
button { background: #4CAF50; color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer; }
button:hover { background: #45a049; }
p.error { color: red; margin: 4px 0; font-size: 14px; }
p.success { color: green; text-align: center; font-weight: bold; }
</style>
<form id='contactForm'>
<h3>Contact Us</h3>
<label>Name:</label>
<input id='name' placeholder='Your name'>
<p id='nameError' class='error'></p>
<label>Email:</label>
<input id='email' placeholder='Your email'>
<p id='emailError' class='error'></p>
<label>Message:</label>
<textarea id='message' rows='4' placeholder='Your message'></textarea>
<p id='messageError' class='error'></p>
<button type='submit'>Send</button>
</form>
<p id='successMsg' class='success'></p>
<script>
// Select elements
const form = document.getElementById('contactForm');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const messageInput = document.getElementById('message');
const nameError = document.getElementById('nameError');
const emailError = document.getElementById('emailError');
const messageError = document.getElementById('messageError');
const successMsg = document.getElementById('successMsg');
// Validate email with regex
function isValidEmail(email) {
return /^[^ ]+@[^ ]+\.[a-z]{2,3}$/.test(email);
}
// Live feedback
emailInput.addEventListener('input', () => {
if (!isValidEmail(emailInput.value)) {
emailError.textContent = 'Enter a valid email';
} else {
emailError.textContent = '';
}
});
// Form submit event
form.addEventListener('submit', (event) => {
event.preventDefault(); // stop reload
let valid = true;
// Reset errors
nameError.textContent = '';
emailError.textContent = '';
messageError.textContent = '';
successMsg.textContent = '';
// Validate name
if (nameInput.value.trim() === '') {
nameError.textContent = 'Name is required';
valid = false;
}
// Validate email
if (!isValidEmail(emailInput.value)) {
emailError.textContent = 'Please enter a valid email';
valid = false;
}
// Validate message
if (messageInput.value.trim().length < 10) {
messageError.textContent = 'Message must be at least 10 characters';
valid = false;
}
// If all valid, show success
if (valid) {
successMsg.textContent = '✅ Thank you! Your message has been sent.';
form.reset();
}
});
</script>
Try it Yourself »
How It Works
- The form listens for the
submitevent. - JavaScript checks if each field is filled correctly.
- It prevents form submission using
event.preventDefault()if any field is invalid. - Errors are shown below each field.
- If all inputs are valid, a thank-you message appears instantly.
Adding Instant Feedback
We used the input event to show live feedback for the email field.
You can extend this to other fields as well for an even better user experience.
Challenge
- Add live validation for the name and message fields.
- Make the success message fade out after 5 seconds.
- Style invalid fields with a red border using JavaScript.
Summary
- This project combines HTML forms, CSS, and JavaScript validation.
- You used DOM manipulation to show messages and control form behavior.
- Live feedback improves user experience and prevents bad input.
Next, you'll move on to the next project: Interactive To-Do List — where you’ll build a task manager that lets users add, complete, and remove tasks dynamically.
