How To Create a Responsive Form Using PHP, JavaScript, HTML, CSS,...

How To Create a Responsive Form Using PHP, JavaScript, HTML, CSS, and MySQL

Posté 2025-02-21 12:46:38

452

I'll provide a detailed guide with full source code, descriptions, explanations, and key points on how to create a responsive form using PHP, JavaScript, HTML, CSS, and MySQL, including:

✅ AJAX-based form submission (without page refresh)
✅ Email verification system (sending a verification link)
✅ Form validation (both front-end and back-end)
✅ Database storage using MySQL
✅ Responsive design (works on all devices)
✅ Security best practices (prepared statements, validation, sanitization)

Step 1: Setting Up the Project Folder Structure

Create the following directory structure:

/responsive-form/
│── /css/
│   └── style.css  
│── /js/
│   └── script.js  
│── /php/
│   ├── connect.php  
│   ├── register.php  
│   ├── verify_email.php  
│── index.html  
│── database.sql

Step 2: Create the MySQL Database and Table

Create a database and users table in MySQL.

database.sql

CREATE DATABASE responsive_form_db;
USE responsive_form_db;

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL,
    token VARCHAR(255) NOT NULL,
    is_verified TINYINT(1) DEFAULT 0,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Step 3: Database Connection File

php/connect.php

<?php
$host = "localhost";
$user = "root";  // Change if needed
$pass = "";      // Change if needed
$dbname = "responsive_form_db";

$conn = new mysqli($host, $user, $pass, $dbname);

if ($conn->connect_error) {
    die("Database Connection Failed: " . $conn->connect_error);
}
?>

Step 4: Create the Responsive Form (HTML + CSS + JS)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Form with AJAX & Email Verification</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="container">
    <h2>Register</h2>
    <form id="registerForm">
        <input type="text" id="name" placeholder="Full Name" required>
        <input type="email" id="email" placeholder="Email" required>
        <input type="password" id="password" placeholder="Password" required>
        <button type="submit">Register</button>
    </form>
    <p id="message"></p>
</div>

<script src="js/script.js"></script>
</body>
</html>

css/style.css

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #f4f4f4;
}

.container {
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    width: 100%;
    padding: 10px;
    background: #28a745;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background: #218838;
}

p {
    color: red;
}

Step 5: Handle AJAX Submission with JavaScript

js/script.js

document.getElementById("registerForm").addEventListener("submit", function(e) {
    e.preventDefault();
    
    let name = document.getElementById("name").value;
    let email = document.getElementById("email").value;
    let password = document.getElementById("password").value;
    
    let formData = new FormData();
    formData.append("name", name);
    formData.append("email", email);
    formData.append("password", password);

    fetch("php/register.php", {
        method: "POST",
        body: formData
    })
    .then(response => response.text())
    .then(data => {
        document.getElementById("message").innerHTML = data;
    })
    .catch(error => console.error("Error:", error));
});

Step 6: Process Registration in PHP & Send Verification Email

php/register.php

<?php
require "connect.php";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = trim($_POST["name"]);
    $email = trim($_POST["email"]);
    $password = password_hash($_POST["password"], PASSWORD_BCRYPT);
    $token = bin2hex(random_bytes(50));

    // Check if email exists
    $checkEmail = $conn->prepare("SELECT email FROM users WHERE email = ?");
    $checkEmail->bind_param("s", $email);
    $checkEmail->execute();
    $checkEmail->store_result();

    if ($checkEmail->num_rows > 0) {
        echo "Email already registered!";
        exit;
    }

    // Insert new user
    $stmt = $conn->prepare("INSERT INTO users (name, email, password, token) VALUES (?, ?, ?, ?)");
    $stmt->bind_param("ssss", $name, $email, $password, $token);

    if ($stmt->execute()) {
        $verificationLink = "http://localhost/responsive-form/php/verify_email.php?token=$token";
        mail($email, "Verify Your Email", "Click this link to verify: $verificationLink");
        echo "Registration successful! Check your email for verification.";
    } else {
        echo "Error: " . $conn->error;
    }
}
?>

Step 7: Verify Email in PHP

php/verify_email.php

<?php
require "connect.php";

if (isset($_GET["token"])) {
    $token = $_GET["token"];
    $stmt = $conn->prepare("UPDATE users SET is_verified = 1 WHERE token = ?");
    $stmt->bind_param("s", $token);
    if ($stmt->execute()) {
        echo "Email verified successfully!";
    } else {
        echo "Invalid verification link.";
    }
} else {
    echo "No token provided!";
}
?>

Key Points & Summary

✔ AJAX-based form submission: Uses fetch() to send form data asynchronously.
✔ Email verification: Sends a link to the user's email and updates is_verified on verification.
✔ MySQL Prepared Statements: Protects against SQL injection.
✔ Password Hashing: Uses password_hash() for security.
✔ Validation: Prevents duplicate emails and ensures input is sanitized.
✔ Responsive Design: CSS ensures the form adapts to different screen sizes.

Would you like extra features such as password reset or reCAPTCHA?

Connectez-vous pour aimer, partager et commenter!