Thiết kế website giá rẻ

Question

I have a simple HTML page that contains a form with these fields: Full Name, Email, Phone and Text area.
Full Name & Email are mandatory fields.

When I click the ‘Send’ button, the page becomes white, and nothing was sent.

I have an HTML page with the form, Javascript to validate the fields, and a PHP file to send the form to an email address.

What am I missing?

here’s the link to the page
https://vldesign.co.il/form.html

HTML & JS


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
    <link rel="stylesheet" href="css/sendForm.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="form-container">
        <form id="contactForm" action="send_email.php" method="post">
            <div>
                <input type="text" id="fullName" name="fullName" placeholder="Full Name">
            </div>
            <div>
                <input type="email" id="email" name="email" placeholder="Email Address">
            </div>
            <div>
                <input type="tel" id="phone" name="phone" placeholder="Phone">
            </div>
            <div>
                <textarea id="message" name="message" placeholder="Message"></textarea>
            </div>
            <div class="form-footer">
                <span id="formMessage" class="form-message"></span>
                <button type="submit">Send</button>
            </div>
        </form>
    </div>

    <script>
    $(document).ready(function() {
        $('#contactForm').on('submit', function(event) {
            let isValid = true;
            const fullName = $('#fullName').val().trim();
            const email = $('#email').val().trim();
            const formMessage = $('#formMessage');

            // Reset previous error styles and message
            $('#fullName').removeClass('error');
            $('#email').removeClass('error');
            formMessage.text('');

            // Validate Full Name
            if (!fullName) {
                $('#fullName').addClass('error');
                isValid = false;
            }

            // Validate Email
            if (!email) {
                $('#email').addClass('error');
                isValid = false;
            }

            if (!isValid) {
                formMessage.text('Mandatory fields');
                event.preventDefault();
            }
        });
    });
    </script>
</body>
</html>

PHP

<?php
// Enable error reporting for debugging
error_reporting(E_ALL);
ini_set('display_errors', 1);

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $fullName = trim($_POST['fullName']);
    $email = trim($_POST['email']);
    $phone = trim($_POST['phone']);
    $message = trim($_POST['message']);

    $errors = [];

    // Validate Full Name
    if (empty($fullName)) {
        $errors[] = 'Full name is required';
    }

    // Validate Email
    if (empty($email)) {
        $errors[] = 'Email is required';
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors[] = 'Invalid email format';
    }

    if (!empty($errors)) {
        $errorString = implode(', ', $errors);
        echo "<script>
                window.onload = function() {
                    var formMessage = document.getElementById('formMessage');
                    if (formMessage) {
                        formMessage.textContent = 'Mandatory fields: $errorString';
                        if ('$fullName' === '') {
                            document.getElementById('fullName').classList.add('error');
                        }
                        if ('$email' === '') {
                            document.getElementById('email').classList.add('error');
                        }
                    }
                }
              </script>";
    } else {
        $to = "[email protected]";
        $subject = "Contact Form Submission";
        $body = "Full Name: $fullNamenEmail: $emailnPhone: $phonenMessage: $message";
        $headers = "From: $email";

        if (mail($to, $subject, $body, $headers)) {
            echo "<script>
                    window.onload = function() {
                        var formMessage = document.getElementById('formMessage');
                        if (formMessage) {
                            formMessage.textContent = 'Details sent';
                        }
                    }
                  </script>";
        } else {
            echo "<script>
                    window.onload = function() {
                        var formMessage = document.getElementById('formMessage');
                        if (formMessage) {
                            formMessage.textContent = 'Error sending details';
                        }
                    }
                  </script>";
        }
    }
} else {
    echo "Invalid request method";
}
?>

A form which should send details to an email, but the page gets blank after submitting.

Thiết kế website giá rẻ

Danh mục

After submitting a form, page becomes blank (white)