AiComputerClasses 4 months ago

aicomputerclasses #programming

Create a Contact Form with PHP and MySQL — Beginner’s Guide

: Create a Contact Form with PHP and MySQL — Beginner’s Guide. Get practical lessons and hands-on examples at AIComputerClasses in Indore to master programming & IT development skills quickly. Ideal for beginners and working professionals seeking fast skill gains. This article from AIComputerClasses Indore breaks down how to create a contact form with PHP and MySQL into actionable steps. Follow practical exercises and tool-based examples to learn rapidly.

Creating a contact form is one of the first projects every web developer should master. It’s simple, practical, and teaches key concepts like form handling, data validation, and database integration.

In this hands-on guide from AI Computer Classes – Indore, you’ll learn how to build a basic contact form using PHP for the backend and MySQL for storing submissions.

Whether you’re a beginner or revisiting core concepts, this project will strengthen your foundation in web development.

🚀 What You’ll Learn

By the end of this guide, you’ll know how to:

✅ Create an HTML form with input fields.

✅ Connect PHP with MySQL.

✅ Validate and sanitize user inputs.

✅ Insert form data into a database.

✅ Display success or error messages dynamically.

🧱 Step 1: Create the HTML Form

Start by building the front-end structure using HTML.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contact Form</title>
</head>
<body>
  <h2>Contact Us</h2>
  <form action="contact.php" method="POST">
    <label>Name:</label>
    <input type="text" name="name" required><br><br>
    
    <label>Email:</label>
    <input type="email" name="email" required><br><br>
    
    <label>Message:</label>
    <textarea name="message" required></textarea><br><br>
    
    <button type="submit" name="submit">Send Message</button>
  </form>
</body>
</html>

This form collects the visitor’s name, email, and message, then sends the data to contact.php for processing.

🧩 Step 2: Create the MySQL Database

Open phpMyAdmin or your MySQL terminal and run:

CREATE DATABASE contact_db;

USE contact_db;

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

💡 Tip: Keep column names simple and relevant for better scalability later.

⚙️ Step 3: Connect PHP to MySQL

Create a file named db_connect.php:

<?php
$servername = "localhost";
$username = "root";  // default user
$password = "";      // default password is blank
$database = "contact_db";

$conn = mysqli_connect($servername, $username, $password, $database);

if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
}
?>

✅ This script establishes a secure connection to your database using PHP’s MySQLi extension.

🧠 Step 4: Handle Form Submission

Now, let’s process the submitted form in contact.php:

<?php
include('db_connect.php');

if (isset($_POST['submit'])) {
  $name = mysqli_real_escape_string($conn, $_POST['name']);
  $email = mysqli_real_escape_string($conn, $_POST['email']);
  $message = mysqli_real_escape_string($conn, $_POST['message']);

  $sql = "INSERT INTO messages (name, email, message) VALUES ('$name', '$email', '$message')";

  if (mysqli_query($conn, $sql)) {
    echo "✅ Message sent successfully!";
  } else {
    echo "❌ Error: " . $sql . "<br>" . mysqli_error($conn);
  }
}
?>

💡 Always sanitize user inputs to prevent SQL injection and security risks.

🎨 Step 5: Add Basic Styling (Optional)

For a better look, add this CSS inside the <head> section of your HTML:

<style>
body { font-family: Arial, sans-serif; background-color: #f4f4f9; padding: 40px; }
form { background: #fff; padding: 20px; border-radius: 8px; width: 300px; margin: auto; }
input, textarea { width: 100%; margin: 5px 0; padding: 8px; border-radius: 5px; border: 1px solid #ccc; }
button { background-color: #0078ff; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; }
button:hover { background-color: #005fd1; }
</style>

🧩 Step 6: Test the Contact Form

Save all files inside your htdocs folder (for XAMPP users).
Run Apache and MySQL from XAMPP Control Panel.
Visit: http://localhost/contact_form/index.html
Fill in details and click Send Message.

If everything’s working, your message should be stored in the messages table in MySQL. 🎉

🧰 Bonus: Adding Validation and Notifications

You can enhance your form by:

Adding email validation using regex.
Sending confirmation emails to users.
Using SweetAlert for modern success popups.
Integrating Google reCAPTCHA to prevent spam.

Example:

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  echo "Please enter a valid email address!";
}

💬 Integrate with ChatGPT or Power BI

Once your form collects user data, tools like ChatGPT and Power BI can help you analyze it.

Use ChatGPT to draft automated email responses.
Use Power BI to visualize user submission trends.

💡 Example ChatGPT prompt:

“Create a polite auto-reply email template for customer inquiries.”

🏁 Conclusion

Building a contact form with PHP and MySQL is a perfect beginner project for aspiring web developers. It teaches essential concepts like server-side scripting, database integration, and secure coding practices.

At AI Computer Classes – Indore, students build such real-world projects to understand how front-end and back-end systems connect — preparing them for professional IT roles.

📞 Contact AI Computer Classes – Indore

✉ Email: hello@aicomputerclasses.com

📱 Phone: +91 91113 33255

📍 Address: 208, Captain CS Naidu Building, near Greater Kailash Road, opposite School of Excellence For Eye, Opposite Grotto Arcade, Old Palasia, Indore, Madhya Pradesh 452018

🌐 Website: www.aicomputerclasses.comCreate a Contact Form with PHP and MySQL — Beginner’s Guide

In this hands-on guide from AI Computer Classes – Indore, you’ll learn how to build a basic contact form using PHP for the backend and MySQL for storing submissions.

Whether you’re a beginner or revisiting core concepts, this project will strengthen your foundation in web development.

🚀 What You’ll Learn

By the end of this guide, you’ll know how to:

✅ Create an HTML form with input fields.

✅ Connect PHP with MySQL.

✅ Validate and sanitize user inputs.

✅ Insert form data into a database.

✅ Display success or error messages dynamically.

🧱 Step 1: Create the HTML Form

Start by building the front-end structure using HTML.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contact Form</title>
</head>
<body>
  <h2>Contact Us</h2>
  <form action="contact.php" method="POST">
    <label>Name:</label>
    <input type="text" name="name" required><br><br>
    
    <label>Email:</label>
    <input type="email" name="email" required><br><br>
    
    <label>Message:</label>
    <textarea name="message" required></textarea><br><br>
    
    <button type="submit" name="submit">Send Message</button>
  </form>
</body>
</html>

This form collects the visitor’s name, email, and message, then sends the data to contact.php for processing.

🧩 Step 2: Create the MySQL Database

Open phpMyAdmin or your MySQL terminal and run:

CREATE DATABASE contact_db;

USE contact_db;

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

💡 Tip: Keep column names simple and relevant for better scalability later.

⚙️ Step 3: Connect PHP to MySQL

Create a file named db_connect.php:

<?php
$servername = "localhost";
$username = "root";  // default user
$password = "";      // default password is blank
$database = "contact_db";

$conn = mysqli_connect($servername, $username, $password, $database);

if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
}
?>

✅ This script establishes a secure connection to your database using PHP’s MySQLi extension.

🧠 Step 4: Handle Form Submission

Now, let’s process the submitted form in contact.php:

<?php
include('db_connect.php');

if (isset($_POST['submit'])) {
  $name = mysqli_real_escape_string($conn, $_POST['name']);
  $email = mysqli_real_escape_string($conn, $_POST['email']);
  $message = mysqli_real_escape_string($conn, $_POST['message']);

  $sql = "INSERT INTO messages (name, email, message) VALUES ('$name', '$email', '$message')";

  if (mysqli_query($conn, $sql)) {
    echo "✅ Message sent successfully!";
  } else {
    echo "❌ Error: " . $sql . "<br>" . mysqli_error($conn);
  }
}
?>

💡 Always sanitize user inputs to prevent SQL injection and security risks.

🎨 Step 5: Add Basic Styling (Optional)

For a better look, add this CSS inside the <head> section of your HTML:

<style>
body { font-family: Arial, sans-serif; background-color: #f4f4f9; padding: 40px; }
form { background: #fff; padding: 20px; border-radius: 8px; width: 300px; margin: auto; }
input, textarea { width: 100%; margin: 5px 0; padding: 8px; border-radius: 5px; border: 1px solid #ccc; }
button { background-color: #0078ff; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; }
button:hover { background-color: #005fd1; }
</style>

🧩 Step 6: Test the Contact Form

Save all files inside your htdocs folder (for XAMPP users).
Run Apache and MySQL from XAMPP Control Panel.
Visit: http://localhost/contact_form/index.html
Fill in details and click Send Message.

If everything’s working, your message should be stored in the messages table in MySQL. 🎉

🧰 Bonus: Adding Validation and Notifications

You can enhance your form by:

Adding email validation using regex.
Sending confirmation emails to users.
Using SweetAlert for modern success popups.
Integrating Google reCAPTCHA to prevent spam.

Example:

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  echo "Please enter a valid email address!";
}

💬 Integrate with ChatGPT or Power BI

Once your form collects user data, tools like ChatGPT and Power BI can help you analyze it.

Use ChatGPT to draft automated email responses.
Use Power BI to visualize user submission trends.

💡 Example ChatGPT prompt:

“Create a polite auto-reply email template for customer inquiries.”

🏁 Conclusion

At AI Computer Classes – Indore, students build such real-world projects to understand how front-end and back-end systems connect — preparing them for professional IT roles.

📞 Contact AI Computer Classes – Indore

✉ Email: hello@aicomputerclasses.com

📱 Phone: +91 91113 33255

📍 Address: 208, Captain CS Naidu Building, near Greater Kailash Road, opposite School of Excellence For Eye, Opposite Grotto Arcade, Old Palasia, Indore, Madhya Pradesh 452018

🌐 Website: www.aicomputerclasses.comCreate a Contact Form with PHP and MySQL — Beginner’s Guide

In this hands-on guide from AI Computer Classes – Indore, you’ll learn how to build a basic contact form using PHP for the backend and MySQL for storing submissions.

Whether you’re a beginner or revisiting core concepts, this project will strengthen your foundation in web development.

🚀 What You’ll Learn

By the end of this guide, you’ll know how to:

✅ Create an HTML form with input fields.

✅ Connect PHP with MySQL.

✅ Validate and sanitize user inputs.

✅ Insert form data into a database.

✅ Display success or error messages dynamically.

🧱 Step 1: Create the HTML Form

Start by building the front-end structure using HTML.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contact Form</title>
</head>
<body>
  <h2>Contact Us</h2>
  <form action="contact.php" method="POST">
    <label>Name:</label>
    <input type="text" name="name" required><br><br>
    
    <label>Email:</label>
    <input type="email" name="email" required><br><br>
    
    <label>Message:</label>
    <textarea name="message" required></textarea><br><br>
    
    <button type="submit" name="submit">Send Message</button>
  </form>
</body>
</html>

This form collects the visitor’s name, email, and message, then sends the data to contact.php for processing.

🧩 Step 2: Create the MySQL Database

Open phpMyAdmin or your MySQL terminal and run:

CREATE DATABASE contact_db;

USE contact_db;

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

💡 Tip: Keep column names simple and relevant for better scalability later.

⚙️ Step 3: Connect PHP to MySQL

Create a file named db_connect.php:

<?php
$servername = "localhost";
$username = "root";  // default user
$password = "";      // default password is blank
$database = "contact_db";

$conn = mysqli_connect($servername, $username, $password, $database);

if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
}
?>

✅ This script establishes a secure connection to your database using PHP’s MySQLi extension.

🧠 Step 4: Handle Form Submission

Now, let’s process the submitted form in contact.php:

<?php
include('db_connect.php');

if (isset($_POST['submit'])) {
  $name = mysqli_real_escape_string($conn, $_POST['name']);
  $email = mysqli_real_escape_string($conn, $_POST['email']);
  $message = mysqli_real_escape_string($conn, $_POST['message']);

  $sql = "INSERT INTO messages (name, email, message) VALUES ('$name', '$email', '$message')";

  if (mysqli_query($conn, $sql)) {
    echo "✅ Message sent successfully!";
  } else {
    echo "❌ Error: " . $sql . "<br>" . mysqli_error($conn);
  }
}
?>

💡 Always sanitize user inputs to prevent SQL injection and security risks.

🎨 Step 5: Add Basic Styling (Optional)

For a better look, add this CSS inside the <head> section of your HTML:

<style>
body { font-family: Arial, sans-serif; background-color: #f4f4f9; padding: 40px; }
form { background: #fff; padding: 20px; border-radius: 8px; width: 300px; margin: auto; }
input, textarea { width: 100%; margin: 5px 0; padding: 8px; border-radius: 5px; border: 1px solid #ccc; }
button { background-color: #0078ff; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; }
button:hover { background-color: #005fd1; }
</style>

🧩 Step 6: Test the Contact Form

Save all files inside your htdocs folder (for XAMPP users).
Run Apache and MySQL from XAMPP Control Panel.
Visit: http://localhost/contact_form/index.html
Fill in details and click Send Message.

If everything’s working, your message should be stored in the messages table in MySQL. 🎉

🧰 Bonus: Adding Validation and Notifications

You can enhance your form by:

Adding email validation using regex.
Sending confirmation emails to users.
Using SweetAlert for modern success popups.
Integrating Google reCAPTCHA to prevent spam.

Example:

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  echo "Please enter a valid email address!";
}

💬 Integrate with ChatGPT or Power BI

Once your form collects user data, tools like ChatGPT and Power BI can help you analyze it.

Use ChatGPT to draft automated email responses.
Use Power BI to visualize user submission trends.

💡 Example ChatGPT prompt:

“Create a polite auto-reply email template for customer inquiries.”

🏁 Conclusion

At AI Computer Classes – Indore, students build such real-world projects to understand how front-end and back-end systems connect — preparing them for professional IT roles.

📞 Contact AI Computer Classes – Indore

✉ Email: hello@aicomputerclasses.com

📱 Phone: +91 91113 33255

📍 Address: 208, Captain CS Naidu Building, near Greater Kailash Road, opposite School of Excellence For Eye, Opposite Grotto Arcade, Old Palasia, Indore, Madhya Pradesh 452018

🌐 Website: www.aicomputerclasses.com

Create a Contact Form with PHP and MySQL — Beginner’s Guide

In this hands-on guide from AI Computer Classes – Indore, you’ll learn how to build a basic contact form using PHP for the backend and MySQL for storing submissions.

Whether you’re a beginner or revisiting core concepts, this project will strengthen your foundation in web development.

🚀 What You’ll Learn

By the end of this guide, you’ll know how to:

✅ Create an HTML form with input fields.

✅ Connect PHP with MySQL.

✅ Validate and sanitize user inputs.

✅ Insert form data into a database.

✅ Display success or error messages dynamically.

🧱 Step 1: Create the HTML Form

Start by building the front-end structure using HTML.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contact Form</title>
</head>
<body>
  <h2>Contact Us</h2>
  <form action="contact.php" method="POST">
    <label>Name:</label>
    <input type="text" name="name" required><br><br>
    
    <label>Email:</label>
    <input type="email" name="email" required><br><br>
    
    <label>Message:</label>
    <textarea name="message" required></textarea><br><br>
    
    <button type="submit" name="submit">Send Message</button>
  </form>
</body>
</html>

This form collects the visitor’s name, email, and message, then sends the data to contact.php for processing.

🧩 Step 2: Create the MySQL Database

Open phpMyAdmin or your MySQL terminal and run:

CREATE DATABASE contact_db;

USE contact_db;

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

💡 Tip: Keep column names simple and relevant for better scalability later.

⚙️ Step 3: Connect PHP to MySQL

Create a file named db_connect.php:

<?php
$servername = "localhost";
$username = "root";  // default user
$password = "";      // default password is blank
$database = "contact_db";

$conn = mysqli_connect($servername, $username, $password, $database);

if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
}
?>

✅ This script establishes a secure connection to your database using PHP’s MySQLi extension.

🧠 Step 4: Handle Form Submission

Now, let’s process the submitted form in contact.php:

<?php
include('db_connect.php');

if (isset($_POST['submit'])) {
  $name = mysqli_real_escape_string($conn, $_POST['name']);
  $email = mysqli_real_escape_string($conn, $_POST['email']);
  $message = mysqli_real_escape_string($conn, $_POST['message']);

  $sql = "INSERT INTO messages (name, email, message) VALUES ('$name', '$email', '$message')";

  if (mysqli_query($conn, $sql)) {
    echo "✅ Message sent successfully!";
  } else {
    echo "❌ Error: " . $sql . "<br>" . mysqli_error($conn);
  }
}
?>

💡 Always sanitize user inputs to prevent SQL injection and security risks.

🎨 Step 5: Add Basic Styling (Optional)

For a better look, add this CSS inside the <head> section of your HTML:

<style>
body { font-family: Arial, sans-serif; background-color: #f4f4f9; padding: 40px; }
form { background: #fff; padding: 20px; border-radius: 8px; width: 300px; margin: auto; }
input, textarea { width: 100%; margin: 5px 0; padding: 8px; border-radius: 5px; border: 1px solid #ccc; }
button { background-color: #0078ff; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; }
button:hover { background-color: #005fd1; }
</style>

🧩 Step 6: Test the Contact Form

Save all files inside your htdocs folder (for XAMPP users).
Run Apache and MySQL from XAMPP Control Panel.
Visit: http://localhost/contact_form/index.html
Fill in details and click Send Message.

If everything’s working, your message should be stored in the messages table in MySQL. 🎉

🧰 Bonus: Adding Validation and Notifications

You can enhance your form by:

Adding email validation using regex.
Sending confirmation emails to users.
Using SweetAlert for modern success popups.
Integrating Google reCAPTCHA to prevent spam.

Example:

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  echo "Please enter a valid email address!";
}

💬 Integrate with ChatGPT or Power BI

Once your form collects user data, tools like ChatGPT and Power BI can help you analyze it.

Use ChatGPT to draft automated email responses.
Use Power BI to visualize user submission trends.

💡 Example ChatGPT prompt:

“Create a polite auto-reply email template for customer inquiries.”

🏁 Conclusion

At AI Computer Classes – Indore, students build such real-world projects to understand how front-end and back-end systems connect — preparing them for professional IT roles.

📞 Contact AI Computer Classes – Indore

✉ Email: hello@aicomputerclasses.com

📱 Phone: +91 91113 33255

📍 Address: 208, Captain CS Naidu Building, near Greater Kailash Road, opposite School of Excellence For Eye, Opposite Grotto Arcade, Old Palasia, Indore, Madhya Pradesh 452018

🌐 Website: www.aicomputerclasses.com