Bootstrap 4 Contact Form (AJAX+PHP)

Introduction

Contact forms are a crucial aspect of any website, allowing users to get in touch with the site owner or administrator. In this tutorial, we will learn how to create a fully functional contact form using Bootstrap 4, AJAX, and PHP. By the end of this tutorial, you will have a fully working contact form that submits data asynchronously without refreshing the page, and also validates user input on the client-side using HTML5 attributes.

Prerequisites

Before we start, make sure you have:

• Basic knowledge of HTML, CSS, and PHP
• Bootstrap 4 installed on your machine (you can use the CDN version)
• A text editor or IDE (like Sublime Text, Atom, or Visual Studio Code)
• A local development server or a live PHP server (e.g., XAMPP)

Creating the Contact Form HTML

Let's start by creating the contact form HTML. Create a new HTML file called contact.php and add the following code:

<!-- contact.php -->
<form id="contactForm" class="container">
    <div class="form-group">
        <label for="name">Name:</label>
        <input type="text" class="form-control" id="name" required>
    </div>
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" required>
    </div>
    <div class="form-group">
        <label for="message">Message:</label>
        <textarea class="form-control" id="message" rows="5" required></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Send</button>
</form>

In this code, we have created a basic contact form with three input fields: name, email, and message. We have also added HTML5 validation attributes like required to ensure that the user inputs some value in each field. Notice that we haven't added any JavaScript or PHP code yet.

Creating the AJAX Request

To make the contact form submit data asynchronously without refreshing the page, we will use AJAX (Asynchronous JavaScript and XML). Add the following JavaScript code to the bottom of the contact.php file:

<!-- contact.php (continued) -->
<script>
    $(document).ready(function() {
        $('#contactForm').submit(function(e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: 'process-contact.php',
                data: $(this).serialize(),
                success: function(data) {
                    if (data.status === 'success') {
                        alert('Your message has been sent!');
                    } else {
                        alert('An error occurred. Please try again.');
                    }
                }
            });
        });
    });
</script>

In this code, we are using the jQuery library to select the #contactForm element and attach an event listener to its submit event. When the form is submitted, we prevent the default form submission behavior by calling e.preventDefault() and then make an AJAX request to a PHP file called process-contact.php. We send the form data to this PHP file using the $(this).serialize() method.

Creating the PHP Processing File

Create a new PHP file called process-contact.php and add the following code:

<!-- process-contact.php -->
<?php
header('Content-Type: application/json');

if (isset($_POST['name']) && isset($_POST['email']) && isset($_POST['message'])) {
    $name = trim($_POST['name']);
    $email = trim($_POST['email']);
    $message = trim($_POST['message']);

    $subject = 'New Contact Form Submission';
    $to = 'your-email@example.com';

    $body = 'Name: '. $name. 'n';
    $body.= 'Email: '. $email. 'n';
    $body.= 'Message: '. $message. 'n';

    if (mail($to, $subject, $body)) {
        echo json_encode(['status' => 'success']);
    } else {
        echo json_encode(['status' => 'error']);
    }
} else {
    echo json_encode(['status' => 'error', 'message' => 'Invalid form data']);
}
?>

In this code, we first set the Content-Type header to application/json to allow the PHP file to send JSON data to the AJAX request. We then check if the required form fields are set, and if so, extract the values and construct an email message using these values. We send this email using the PHP mail() function.

If the email is sent successfully, we send a JSON response with a status of success. If there is an error sending the email, we send a JSON response with a status of error. If the form data is invalid (i.e., no form fields are set), we send a JSON response with a status of error and an error message.

Final Steps

Save both HTML and PHP files, and open contact.php in your browser. You should see a working contact form that submits data asynchronously without refreshing the page. You will also receive an email with the submitted data when the form is successfully sent.

That's it! You now have a fully functional Bootstrap 4 contact form using AJAX and PHP.