### **📌 Blogger Title:** 🔥 Create PHP Contact Form with AJAX & File Upload - No Page Reload! 🚀

    Demo :


Click Video 👇👇👇


Code : 

📌 Step 1: Create Database

Run the following SQL query in phpMyAdmin (XAMPP):


CREATE DATABASE contact_db;

USE contact_db;

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


📌 Step 2: Create PHP Backend (submit.php)

This file handles form submission and file upload.


<?php

$conn = new mysqli("localhost", "root", "", "contact_db");


if ($_SERVER["REQUEST_METHOD"] == "POST") {

    $name = $_POST['name'];

    $email = $_POST['email'];

    $message = $_POST['message'];

    $file = $_FILES['file']['name'];

    

    $target_dir = "uploads/";

    $target_file = $target_dir . basename($file);

    

    if (move_uploaded_file($_FILES['file']['tmp_name'], $target_file)) {

        $sql = "INSERT INTO contacts (name, email, message, file_path) VALUES ('$name', '$email', '$message', '$target_file')";

        

        if ($conn->query($sql) === TRUE) {

            echo "Success";

        } else {

            echo "Error: " . $conn->error;

        }

    } else {

        echo "File Upload Failed";

    }

}

?>


📌 Step 3: Create HTML Form with AJAX Submission (index.php)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP Contact Form</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body class="container mt-5">
    <h2 class="text-center">Contact Us</h2>
    <form id="contactForm" enctype="multipart/form-data">
        <div class="mb-3">
            <label>Name:</label>
            <input type="text" name="name" class="form-control" required>
        </div>
        <div class="mb-3">
            <label>Email:</label>
            <input type="email" name="email" class="form-control" required>
        </div>
        <div class="mb-3">
            <label>Message:</label>
            <textarea name="message" class="form-control" required></textarea>
        </div>
        <div class="mb-3">
            <label>Upload File:</label>
            <input type="file" name="file" class="form-control" required>
        </div>
        <button type="submit" class="btn btn-primary">Send</button>
    </form>

    <script>
        $(document).ready(function() {
            $("#contactForm").submit(function(e) {
                e.preventDefault();
                var formData = new FormData(this);

                $.ajax({
                    type: "POST",
                    url: "submit.php",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        alert(response);
                    }
                });
            });
        });
    </script>
</body>
</html>

📌 Step 4: Create Upload Folder

Create a folder named uploads/ in your project directory.


📌 Step 5: Run Project in XAMPP

  1. Save files inside htdocs/contact-form/.
  2. Start XAMPP Apache & MySQL.
  3. Open http://localhost/contact-form/index.php.



Comments

Post a Comment

Popular posts from this blog

🚀 Simple Login & Registration System in Python Tkinter 📱

Image
   Demo : Click Video 👇👇👇 ✅ Features: ✔️ Simple Login UI 🖥️ ✔️ Secure User Authentication 🔒 ✔️ SQLite Database Integration 📂 ✔️ User Registration Form ✍️ Code : import tkinter as tk from tkinter import messagebox from tkinter import ttk import sqlite3 # Global variables root = tk.Tk() root.withdraw()  # Hide main root window login_window = None home_window = None settings_window = None planner_window = None # Database setup def create_db():     conn = sqlite3.connect('user_data.db')     c = conn.cursor()     c.execute('''CREATE TABLE IF NOT EXISTS users (username TEXT, password TEXT)''')     conn.commit()     conn.close() # User registration def register_user():     username = reg_username_entry.get()     password = reg_password_entry.get()     if username and password:         conn = sqlite3.connect('user_data.db')         c = conn.cursor...
Read more

🚀 Create a Python Screen Recorder with Audio (Complete Code)

Image
  Demo : Click Video 👇👇👇 📂 Folder Structure 📁 Python-Screen-Recorder     ├── 📄 screen_recorder.py  (Main Python Script)     ├── 🎵 audio.wav  (Recorded Audio)     ├── 🎥 screen_record.avi  (Recorded Video) Dependencies Install Karo: cmd => pip install opencv-python numpy pyautogui pyaudio Code : import cv2 import numpy as np import pyautogui import pyaudio import wave import threading import tkinter as tk from tkinter import filedialog # Set screen size screen_width, screen_height = pyautogui.size() frame_rate = 20 # Audio recording settings audio_format = pyaudio.paInt16 channels = 2 rate = 44100 chunk = 1024 audio_filename = "audio.wav" video_filename = "screen_record.avi" # Audio recording function def record_audio():     audio = pyaudio.PyAudio()     stream = audio.open(format=audio_format, channels=channels, rate=rate, input=True, frames_per_buffer=chunk)     frames = []     whil...
Read more

📡 Fuzzu Packet Sniffer – Python GUI for Real-Time IP Monitoring | Tkinter + Scapy

Image
  Demo : Click Video 👇👇👇 📝 Description: Explore the power of Python + Scapy in this sleek GUI app that sniffs packets live! Whether you're into network security or learning how to trace source/destination IPs, this hacker-style app gives you a stunning GUI interface with real-time output. Built with threading, styled with dark mode, and structured for maximum speed. Watch the Short video demo and grab the code from our next release. ✨ Features: Live Packet Sniffing with IP & Protocol Stylish Dark GUI with Tkinter Real-time TreeView display Beginner-friendly + Offline Tool Code : import tkinter as tk from tkinter import ttk, messagebox import threading from scapy.all import sniff, IP class PacketSnifferGUI:     def __init__(self, root):         self.root = root         self.root.title("📡 FuzzuTech Packet Sniffer")         self.root.geometry("600x500")         self.r...
Read more