Bootstrap PHP Contact Form With Validation Example Tutorial -- ItErrorSolution.com

Bootstrap PHP Contact Form With Validation Example Tutorial

May 15, 2024 | Laravel 10 PHP MySql Bootstrap Laravel

Hello Dev,

"Today, I'll guide you through creating a custom contact form in PHP and storing the submitted data in a MySQL database. With this form, you can easily set up an enquiry or feedback mechanism on your website, enhancing communication between visitors and administrators.

A contact form is a fundamental feature for any website, allowing users to reach out to administrators for enquiries or provide feedback. This tutorial is especially helpful for PHP beginners or those looking to quickly implement a contact form in their core PHP projects.

In this example, we'll utilize PHP, MySQL, and Bootstrap to design the contact form. We'll create a 'contactus' form with fields for ID, name, email, message, and creation date.

Simply follow these steps to set up your own contact form and integrate it into your PHP project."

Creating a custom contact form in PHP and storing its submissions in a MySQL database involves several steps. This guide will walk you through creating a basic contact form using PHP, MySQL, and Bootstrap for styling. We'll create a form with fields for ID, Name, Email, Message, and Created Date.

Step 1: Set Up Your Project

Ensure you have a local development environment set up with PHP and MySQL installed. Also, download and extract Bootstrap from getbootstrap.com to use for styling.

Read Also: Jquery Datatables Server Side Processing PHP Example Tutorial Step 2: Create the Contact Form HTML

Create a new file named contact_form.html and add the following HTML code. This code includes Bootstrap for styling and a simple form for collecting user input.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap PHP Contact Form With Validation Example Tutorial -- ItErrorSolution.com</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
    <div class="container mt-5">
        <h2>Bootstrap PHP Contact Form With Validation Example Tutorial -- ItErrorSolution.com</h2>
        <form action="submit_contact.php" method="post">
            <div class="form-group">
                <label for="name">Name:</label>
                <input type="text" class="form-control" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" class="form-control" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="message">Message:</label>
                <textarea class="form-control" id="message" name="message" rows="3" required></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
    <!-- Bootstrap JS and jQuery -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

Replace path_to_bootstrap with the actual path to your Bootstrap files.

Step 3: Create the PHP Script to Handle Form Submission

Create a new file named submit_contact.php. This script will process the form submission, validate the inputs, and insert them into the MySQL database.

<?php
// Database connection details
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database_name";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: ". $conn->connect_error);
}

// Get form data
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$created_date = date('Y-m-d H:i:s');

// Prepare and bind
$stmt = $conn->prepare("INSERT INTO contactus (name, email, message, created_date) VALUES (?,?,?,?,?)");
$stmt->bind_param("issss", $name, $email, $message, $created_date);

// Execute statement
$stmt->execute();

// Close statement and connection
$stmt->close();
$conn->close();

echo "New record created successfully";
?>

Make sure to replace "username", "password", and "database_name" with your actual database credentials.

Read Also: Laravel 10 - Sort By Column with pagination example Step 4: Create the MySQL Table

Before testing the form, create a table in your MySQL database to store the form submissions. You can do this through phpMyAdmin or the MySQL command line:

CREATE TABLE contactus (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    email VARCHAR(255) NOT NULL,
    message TEXT NOT NULL,
    created_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Conclusion

Now, when you submit the contact form, the data will be stored in your MySQL database. This basic example demonstrates how to collect and store user input using PHP and MySQL. You can expand upon this by adding more fields, implementing additional validation rules, or integrating with other systems for further processing.

Output: Bootstrap PHP Contact Form With Validation Example Tutorial

Thank you for your encouragement! If you have any questions or need further assistance, feel free to ask. I'm here to help!

Tags :

#Laravel 10

#PHP

#MySql

#Bootstrap

#Laravel

ItErrorSolution.com

"Hey there! I'm a full-stack developer and proud owner of ItErrorSolution.com, based right here in India. I love nothing more than sharing handy tips and tricks with my fellow developers through easy-to-follow tutorials. When it comes to coding, I'm all about PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, CodeIgniter, and Bootstrap – been hooked on them forever! I'm all about putting in the work and staying committed. Ready to join me on this journey to coding?"