Easy PHP Contact form including Mobile with Ajax Validation and captcha CSS included

Easy PHP Contact form including Mobile with Ajax Validation and captcha CSS included

Easy, PHP Contact form, including Mobile, Ajax Validation. captcha, CSS included

This is easy, simple copy paste PHP contact form for with full Ajax and captcha validation

Save the Below code in a simple index.php and save it

// Variables
$name = "";
$email = "";
$mobile = "";
$message = "";
$errorMessage = "";
$captchaError = "";

// CAPTCHA configuration
$captchaSecret = "YOUR_CAPTCHA_SECRET_KEY";

// Check if form is submitted
    // Retrieve form data
    $name = sanitizeInput($_POST["name"]);
    $email = sanitizeInput($_POST["email"]);
    $mobile = sanitizeInput($_POST["mobile"]);
    $message = sanitizeInput($_POST["message"]);
    $captchaResponse = $_POST["g-recaptcha-response"];

    // Validate CAPTCHA
    $captchaUrl = "https://www.google.com/recaptcha/api/siteverify";
    $captchaData = [
        "secret" => $captchaSecret,
        "response" => $captchaResponse,
        "remoteip" => $_SERVER["REMOTE_ADDR"]

    $ch = curl_init($captchaUrl);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($captchaData));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $captchaResult = json_decode(curl_exec($ch), true);

    if (!$captchaResult["success"]) {
        $captchaError = "CAPTCHA verification failed. Please try again.";

    // Validate form data
    if (empty($name) || empty($email) || empty($mobile) || empty($message)) {
        $errorMessage = "All fields are required.";
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errorMessage = "Invalid email format.";
    } elseif (!preg_match("/^[0-9]{10}$/", $mobile)) {
        $errorMessage = "Invalid mobile number format.";

    // If no errors, send the email
    if (empty($errorMessage) && empty($captchaError)) {
        $to = "[email protected]";
        $subject = "New Contact Form Submission";
        $emailBody = "Name: $name\nEmail: $email\nMobile: $mobile\nMessage: $message";
        $headers = "From: $email";

        if (mail($to, $subject, $emailBody, $headers)) {
            // Email sent successfully
            echo "success";
        } else {
            $errorMessage = "Failed to send the email. Please try again later.";
    } else {
        // Return error message for AJAX validation
        echo $errorMessage;

// Helper function to sanitize form input
function sanitizeInput($input)
    $input = trim($input);
    $input = stripslashes($input);
    $input = htmlspecialchars($input);
    return $input;

<!DOCTYPE html>
    <title>Contact Form</title>
        .contact-form {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;

        .contact-form label {
            display: block;
            margin-bottom: 10px;

        .contact-form input[type="text"],
        .contact-form input[type="email"],
        .contact-form input[type="tel"],
        .contact-form textarea {
            width: 100%;
            padding: 10px;
            border-radius: 3px;
            border: 1px solid #ccc;
            margin-bottom: 15px;

        .contact-form button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 3px;
            cursor: pointer;

        .contact-form .error {
            color: red;
            margin-top: 5px;
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        $(document).ready(function () {
            $(".contact-form").on("submit", function (e) {

                var form = $(this);
                var url = form.attr("action");
                var formData = form.serialize();

                $(".error").html(""); // Clear previous error messages

                    type: "POST",
                    url: url,
                    data: formData,
                    success: function (response) {
                        if (response === "success") {
                            // Display success message
                            form.html("<p>Thank you for your message!</p>");
                        } else {
                            // Display error message(s)
    <div class="contact-form">
        <h1>Contact Form</h1>
        <form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" value="<?php echo $name; ?>">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" value="<?php echo $email; ?>">
                <label for="mobile">Mobile:</label>
                <input type="tel" id="mobile" name="mobile" value="<?php echo $mobile; ?>">
                <label for="message">Message:</label>
                <textarea id="message" name="message"><?php echo $message; ?></textarea>
            <div class="g-recaptcha" data-sitekey="YOUR_CAPTCHA_SITE_KEY"></div>
            <?php if (!empty($captchaError)) : ?>
                <p class="error"><?php echo $captchaError; ?></p>
            <?php endif; ?>
                <button type="submit">Submit</button>
            <?php if (!empty($errorMessage)) : ?>
                <p class="error"><?php echo $errorMessage; ?></p>
            <?php endif; ?>

Donot forget to replace "YOUR_CAPTCHA_SECRET_KEY" with your actual reCAPTCHA secret key and "YOUR_CAPTCHA_SITE_KEY" with your actual reCAPTCHA site key.

replace "[email protected]" to your email address where you want to receive the contact form mails.

Included CSS styles for the form

You can customize the CSS according to your preference
More on PHP


This site uses Akismet to reduce spam. Learn how your comment data is processed.