Quick Tutorial: Create a Contact Form with PHP and MySQL

Quick Tutorial: Create a Contact Form with PHP and MySQL. Get practical lessons and hands-on examples at AIComputerClasses in Indore to master programming & IT development skills quickly. Includes references to tools like ChatGPT, Power BI, Excel, Figma, or Python where appropriate. Ideal for beginners and working professionals seeking fast skill gains. Follow practical exercises and tool-based examples to learn rapidly.

2025-10-28 14:23:36 - AiComputerClasses

πŸ’» Quick Tutorial: Create a Contact Form with PHP and MySQL

Every website needs a way for visitors to get in touch β€” whether it’s for feedback, business inquiries, or support. That’s why contact forms are one of the most essential components of modern web development.

In this guide, you’ll learn how to create a simple and functional Contact Form using PHP and MySQL, step-by-step. Perfect for beginners and aspiring developers at AI Computer Classes – Indore, this tutorial teaches not just the β€œhow,” but also the β€œwhy” β€” helping you understand what happens behind the scenes.

Let’s dive right into building your first fully working form! πŸš€


🧩 Step 1: What You’ll Learn

By the end of this tutorial, you’ll be able to:

βœ… Create a form interface using HTML and CSS

βœ… Use PHP to process form submissions

βœ… Store user messages securely in a MySQL database

βœ… Validate user input to prevent errors or spam

At AI Computer Classes – Indore, students learn how to build real-world PHP projects β€” from contact forms to full dynamic websites β€” using practical exercises that strengthen both frontend and backend development skills.


πŸ’‘ Learn Web Development with Experts at AI Computer Classes – Indore!

Build dynamic websites using HTML, CSS, JavaScript, PHP, and MySQL with hands-on projects.

πŸ‘‰ Join our Programming & IT Development batch today!

πŸ“ Located in Old Palasia, Indore

🧱 Step 2: Set Up Your Project Folder

Before coding, create a folder on your system:

contact-form/

Inside it, create these files:

index.html
process.php
db_connect.php

These will handle form display, data processing, and database connectivity respectively.


🧩 Step 3: Design the Contact Form (HTML)

Let’s start with index.html.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Us</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f8f9fa;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    form {
      background: white;
      padding: 25px;
      border-radius: 10px;
      box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
      width: 350px;
    }
    input, textarea {
      width: 100%;
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }
    button {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <form action="process.php" method="POST">
    <h2>Contact Us</h2>
    <input type="text" name="name" placeholder="Your Name" required>
    <input type="email" name="email" placeholder="Your Email" required>
    <textarea name="message" placeholder="Your Message" rows="5" required></textarea>
    <button type="submit">Send Message</button>
  </form>
</body>
</html>

This simple form collects name, email, and message. When submitted, it sends data to process.php using the POST method.


βš™οΈ Step 4: Create the Database

Next, open phpMyAdmin (usually at http://localhost/phpmyadmin) and create a new database named:

contact_db

Then, create a table named messages:

CREATE TABLE messages (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100) NOT NULL,
  email VARCHAR(100) NOT NULL,
  message TEXT NOT NULL,
  submitted_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

This table stores every form submission neatly with timestamps.


🧠 Step 5: Connect PHP with MySQL

Now create the file db_connect.php:

<?php
$servername = "localhost";
$username = "root";  // default for XAMPP
$password = "";
$dbname = "contact_db";

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

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

This file establishes a secure connection with your MySQL database.


πŸ’‘ Tip: Always keep your database credentials in a separate file for better organization and security.

πŸ’‘ Hands-On Practice at AI Computer Classes – Indore

Learn practical PHP & MySQL integration through guided projects like forms, dashboards, and mini web apps.

πŸ‘‰ Visit AI Computer Classes to know more!

🧩 Step 6: Handle Form Submission (PHP Logic)

Now, create process.php to handle data submission and saving.

<?php
include 'db_connect.php';

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = $_POST['name'];
  $email = $_POST['email'];
  $message = $_POST['message'];

  // Basic validation
  if (!empty($name) && !empty($email) && !empty($message)) {
    $stmt = $conn->prepare("INSERT INTO messages (name, email, message) VALUES (?, ?, ?)");
    $stmt->bind_param("sss", $name, $email, $message);

    if ($stmt->execute()) {
      echo "Message sent successfully!";
    } else {
      echo "Error: " . $stmt->error;
    }
    $stmt->close();
  } else {
    echo "All fields are required!";
  }
}
$conn->close();
?>

This code:

🌐 Step 7: Test Your Contact Form
  1. Start your local server (XAMPP β†’ Apache + MySQL).
  2. Open browser β†’ visit:
http://localhost/contact-form/
  1. Fill in details and submit.

βœ… If all is well, you’ll see a success message and a new entry in your messages table!


🧩 Step 8: Add Validation & Feedback

You can enhance user experience by showing proper messages:

if ($stmt->execute()) {
  echo "<script>alert('Message Sent Successfully!'); window.location='index.html';</script>";
} else {
  echo "<script>alert('Something went wrong!');</script>";
}
🎯 A small touch of JavaScript improves the user experience greatly!
πŸ”’ Step 9: Secure Your Form

Security is vital. Always:

Example:

$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  die("Invalid email format");
}

At AI Computer Classes – Indore, we emphasize secure coding practices to help students write professional-grade web applications.


πŸ’‘ Upgrade Your PHP Skills at AI Computer Classes – Indore!

Master dynamic web development using PHP, MySQL, and JavaScript with project-based learning.

πŸ‘‰ Enroll Now β†’ AI Computer Classes

πŸ“ Old Palasia, Indore

🧠 Step 10: Extend the Project

Now that your contact form works, try adding:

These additions will help you move from beginner projects to real-world web applications.


🧭 Conclusion

Congratulations! πŸŽ‰ You’ve successfully built a fully functional contact form with PHP and MySQL.

You now understand:

This project is a foundation for bigger things β€” like login systems, CMS platforms, and dynamic websites.

At AI Computer Classes – Indore, we teach students how to build, secure, and deploy such applications with real-world tools and professional techniques.

Start your journey in web development today β€” because every great developer begins with a single line of code! πŸ’‘


πŸ“ž Contact AI Computer Classes – Indore

βœ‰ Email: hello@aicomputerclasses.com

πŸ“± Phone: +91 91113 33255

πŸ“ Address: 208, Captain CS Naidu Building, near Greater Kailash Road, Opp. School of Excellence For Eye, Opp. Grotto Arcade, Old Palasia, Indore, Madhya Pradesh 452018

🌐 Website: www.aicomputerclasses.com

More Posts