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

2K Views

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

Posted 2025-02-21 12:52:11 · Uncategorized

I'll provide a comprehensive guide on creating a responsive form using PHP, JavaScript, HTML, CSS, and MySQL. This form will include:

User Registration with email verification
AJAX-based Form Submission for a smooth user experience
Password Reset functionality
Google reCAPTCHA for spam protection

Step 1: Database Setup (MySQL)

We'll create a database and a table to store user information.

Database Schema

CREATE DATABASE user_system;
USE user_system;

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

Step 2: HTML Form Structure

We'll create a responsive registration form.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Form</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
    <div class="container">
        <h2>Register</h2>
        <form id="registerForm">
            <input type="text" id="name" name="name" placeholder="Full Name" required>
            <input type="email" id="email" name="email" placeholder="Email" required>
            <input type="password" id="password" name="password" placeholder="Password" required>
            <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
            <button type="submit">Register</button>
        </form>
        <p>Already have an account? <a href="login.html">Login</a></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 3: Styling the Form (CSS)

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

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

input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
}

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

button:hover {
    background-color: #218838;
}

Step 4: AJAX Submission with JavaScript

document.getElementById("registerForm").addEventListener("submit", function(event) {
    event.preventDefault();

    let formData = new FormData(this);

    fetch("register.php", {
        method: "POST",
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        alert(data.message);
    })
    .catch(error => console.error("Error:", error));
});

Step 5: Processing Form Submission in PHP

register.php

<?php
require 'config.php';

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

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

    if ($stmt->execute()) {
        $verification_link = "http://yourwebsite.com/verify.php?email=$email&token=$token";
        mail($email, "Verify your email", "Click here to verify: $verification_link");
        echo json_encode(["message" => "Check your email to verify your account."]);
    } else {
        echo json_encode(["message" => "Error registering."]);
    }
}
?>

Step 6: Email Verification

verify.php

<?php
require 'config.php';

$email = $_GET['email'];
$token = $_GET['token'];

$stmt = $conn->prepare("SELECT * FROM users WHERE email = ? AND token = ?");
$stmt->bind_param("ss", $email, $token);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows > 0) {
    $stmt = $conn->prepare("UPDATE users SET verified = 1 WHERE email = ?");
    $stmt->bind_param("s", $email);
    $stmt->execute();
    echo "Email verified. You can now login.";
} else {
    echo "Invalid verification link.";
}
?>

Step 7: Password Reset

reset_request.php

<?php
require 'config.php';

$email = $_POST['email'];
$token = bin2hex(random_bytes(50));

$stmt = $conn->prepare("UPDATE users SET token=? WHERE email=?");
$stmt->bind_param("ss", $token, $email);
$stmt->execute();

$reset_link = "http://yourwebsite.com/reset_password.php?email=$email&token=$token";
mail($email, "Reset Password", "Click here to reset: $reset_link");

echo json_encode(["message" => "Check your email for password reset link."]);
?>

reset_password.php

<?php
require 'config.php';

if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $email = $_POST['email'];
    $token = $_POST['token'];
    $new_password = password_hash($_POST['new_password'], PASSWORD_DEFAULT);

    $stmt = $conn->prepare("SELECT * FROM users WHERE email=? AND token=?");
    $stmt->bind_param("ss", $email, $token);
    $stmt->execute();
    $result = $stmt->get_result();

    if ($result->num_rows > 0) {
        $stmt = $conn->prepare("UPDATE users SET password=? WHERE email=?");
        $stmt->bind_param("ss", $new_password, $email);
        $stmt->execute();
        echo "Password reset successfully.";
    } else {
        echo "Invalid reset link.";
    }
}
?>

Key Points

AJAX-Based Submission
- Prevents page reloads and provides a smooth user experience.
Email Verification
- Ensures only valid users can log in.
Google reCAPTCHA
- Prevents bot registrations.
Password Hashing
- Uses password_hash() to store secure passwords.
Token-Based Authentication for Email Verification & Password Reset
- Ensures security by verifying email identity.

This setup ensures a fully functional, secure, and responsive form with modern features. Let me know if you need any modifications!

#HTML #CSS #PHP #JavaScript

Please log in to like, share and comment!