FileMaster

Edit File: contact-verify.php

<?php
session_start();

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

// SEND OTP
    if ($_POST["action"] == "send_otp") {
        $name = trim($_POST["name"]);
        $email = trim($_POST["email"]);
        $message = trim($_POST["message"]);

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            echo json_encode(["success" => false, "error" => "Invalid Email"]);
            exit;
        }

$otp = str_pad(rand(0, 999999), 6, "0", STR_PAD_LEFT);

$_SESSION["otp"] = $otp;
        $_SESSION["data"] = ["name" => $name, "email" => $email, "message" => $message];

$subject = "Your OTP Code";
        $body = "Hello $name,<br>Your verification code is: <b>$otp</b>";
        $headers = "From: ALMA Tour <info@almasafir.com>\r\n";
        $headers .= "Content-Type: text/html; charset=UTF-8\r\n";

if (mail($email, $subject, $body, $headers)) {
            echo json_encode(["success" => true]);
        } else {
            echo json_encode(["success" => false, "error" => "Failed to send OTP"]);
        }
        exit;
    }

// VERIFY OTP
    if ($_POST["action"] == "verify") {

if ($_POST["otp"] != $_SESSION["otp"]) {
            echo json_encode(["success" => false, "error" => "Incorrect OTP"]);
            exit;
        }

$data = $_SESSION["data"];

$subject = "New Contact Message";
        $body =
            "Name: {$data["name"]}<br>" .
            "Email: {$data["email"]}<br><br>" .
            "Message:<br>{$data["message"]}";
        $headers = "From: {$data["email"]}\r\n";
        $headers .= "Content-Type: text/html; charset=UTF-8\r\n";

mail("info.almasafir@gmail.com", $subject, $body, $headers);

unset($_SESSION["otp"]);
        unset($_SESSION["data"]);

echo json_encode(["success" => true]);
        exit;
    }
}
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Contact Verification</title>
<style>
body {background:#f7f7f7;font-family:sans-serif;padding:20px;}
.box {max-width:450px;margin:auto;background:#fff;padding:20px;border-radius:10px;
box-shadow:0 0 15px rgba(0,0,0,.1);}
.input {width:100%;padding:12px;margin-bottom:10px;border:1px solid #ccc;border-radius:8px;}
.btn {width:100%;padding:14px;background:#1a73e8;color:#fff;border:none;border-radius:8px;cursor:pointer;}
.modal {
    display:none;position:fixed;top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,.5);justify-content:center;align-items:center;
}
.modal-content {
    background:#fff;padding:20px;width:300px;border-radius:10px;text-align:center;
}
</style>
</head>
<body>

<div class="box">
    <h2 style="text-align:center;">Contact Us</h2>

<button id="sendBtn" class="btn">Send Message</button>
</div>

<div id="otpModal" class="modal">
    <div class="modal-content">
        <h3>Email Verification</h3>
        <p>Enter the 6-digit code:</p>
        <input id="otp" maxlength="6" class="input" style="text-align:center;">
        <button id="verifyBtn" class="btn">Verify</button>
    </div>
</div>

fetch("", {method:"POST", body:d})
    .then(r=>r.json())
    .then(r=>{
        if(r.success){
            document.getElementById("otpModal").style.display = "flex";
        } else alert(r.error);
    });
};

document.getElementById("verifyBtn").onclick = () => {
    let d = new FormData();
    d.append("action", "verify");
    d.append("otp", document.getElementById("otp").value);

fetch("", {method:"POST", body:d})
    .then(r=>r.json())
    .then(r=>{
        if(r.success){
            alert("Message Sent Successfully!");
            location.reload();
        } else alert(r.error);
    });
};
</script>

</body>
</html>

Back