Creating a Contact Form with AJAX

Are you ready to add dynamic features to your contact form with AJAX and take it to the next level? We talked about the basics of making a contact form that doesn’t save information locally or on a server in the last piece. We’ll show you how to make a contact form that not only gets information from users but also sends it to a server so it can be processed without having to reload the page. Let’s jump right in!

Step 1: Setting Up the HTML Structure

First, make the HTML layout for your contact 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 with AJAX</title>
    <link rel="stylesheet" href="styles.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 id="response"></div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>

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 style.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 AJAX functionality

Let’s add JavaScript so that AJAX can handle form input. Add the following JavaScript code to a new file called script.js:

// script.js
$(document).ready(function() {
    $('#contact-form').submit(function(event) {
        event.preventDefault();
        
        // Get form data
        const formData = {
            name: $('#name').val(),
            email: $('#email').val(),
            message: $('#message').val()
        };
        
        // Send data to server
        $.ajax({
            type: 'POST',
            url: 'process.php', // Replace with your server-side processing script
            data: formData,
            success: function(response) {
                $('#response').html(response);
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
                $('#response').html('<p>Error occurred. Please try again.</p>');
            }
        });
    });
});

Step 4: Taking care of the form data on the server

You’ll need a server-side script to handle the form data in order to finish the process. Put the following code in a file called process.php:

<?php
// Process form data
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];

    // Your processing logic here (e.g., sending email, saving to database)
    
    // Send a response
    echo '<p>Thank you! Your message has been received.</p>';
} else {
    echo '<p>Method not allowed.</p>';
}
?>

Conclusion

Great job! You’ve successfully used HTML, CSS, JavaScript, and AJAX to make a dynamic contact form that runs on your system. With this method, you can record user input and send it to a server without having to reload the page. This gives your website guests a smooth experience. Try making changes to the form and the processing code to see what works best for you. Have fun coding!

https://letuscrack.com/creating-a-dynamic-contact-form-using-html-css-and-javascript/