Flowisetech Flowisetech
Home
Market
Groups
Pages
See More
Groups Pages Market Events Blogs Funding Offers Jobs Courses Study Cycle Movies Games Merits FT Messanger Refer and Earn

Our Information Center

 Terms and Conditions Legal & Business Law Agreement Child Safety & Policy Referral Tearms About Us Flowisetech Earning Guide Terms of Use Privacy Policy Help FAQs Community Guidelines Our Purpose Withdrawal Terms Verification Terms Community Policy
2K Views

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

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? 

#PHP #CSS #HTML #JavaScript
Please log in to like, share and comment!
Upgrade to Pro
Choose the Plan That's Right for You
Upgrade
Categories
Read More
Flowisetech Hi , For easy access