Creating a Dynamic Contact Form Using HTML, CSS, and JavaScript

Want to build a contact form into your website? We’ll show you how to use HTML, CSS, and JavaScript to make a simple but useful contact form in this tutorial. This easy-to-follow guide will help you learn the basics of making interactive forms, whether you’re new to web development or just want to get better.

Step 1: Putting together the HTML code

Let’s begin by setting up the HTML for our message form. Make a new HTML file in your favorite text editor. Include this code:

<!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>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
    <h2>Contact Us</h2>
    <form id="contact-form">
        <input type="text" id="name" placeholder="Your Name" required>
        <input type="email" id="email" placeholder="Your Email" required>
        <textarea id="message" placeholder="Your Message" required></textarea>
        <button type="submit">Send</button>
    </form>
</div>

<script src="script.js"></script>
</body>
</html>

We’ve set up the general structure for our contact form in this HTML code. It has a send button and fields for the user’s name, email address, and message.

Step 2: Use CSS to style the form

Let’s add some styles to our contact form to make it look better. Add the following CSS code to a new file called styles.css:

/* style.css */
.container {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

h2 {
    text-align: center;
}

input,
textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

Step 3: Using JavaScript to add functionality

Finally, let’s add some JavaScript to our contact form to make it work. Add the following JavaScript code to a new file called script.js:

// script.js
const form = document.getElementById('contact-form');

form.addEventListener('submit', function(event) {
    event.preventDefault();
    
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const message = document.getElementById('message').value;

    // You can add your own logic here, such as sending the form data to a server
    console.log('Name:', name);
    console.log('Email:', email);
    console.log('Message:', message);

    // Reset the form after submission
    form.reset();
});

We’ve added an event listener to the form’s submit event in this JavaScript code. The function gets the values that the user put into the name, email, and message boxes when the form is sent. You can change this code to fit your needs. For example, you could use AJAX to send the form data to a server.

Conclusion

Great job! Using HTML, CSS, and JavaScript, you were able to make a dynamic contact form. You can make more changes to the form to make it fit your needs, or you can check out more advanced tools like form validation and processing on the server. Have fun coding!

https://letuscrack.com/creating-a-contact-form-with-ajax/