Need help fixing Contact Forms (html + jscript + php)

Code

document.getElementById('contactForm').onsubmit = function(event) {

    event.preventDefault(); // Prevent the default form submission



    var formData = new FormData(this); // Collect form data

    var xhr = new XMLHttpRequest();



    xhr.open('POST', '/send_message.php', true); // Ensure URL matches your PHP script location



    xhr.onload = function() {

        if (xhr.status >= 200 && xhr.status < 400) {

            var response = JSON.parse(xhr.responseText);

            if (response.status === 'success') {

                // Show success message using SweetAlert2

                Swal.fire({

                    icon: 'success',

                    title: 'Success!',

                    text: response.message,

                    timer: 2000, // Auto-close after 2 seconds

                    showConfirmButton: false

                }).then(() => {

                    window.location.href = '/index/'; // Redirect to /index/ after success message

                });

            } else {

                Swal.fire({

                    icon: 'error',

                    title: 'Oops...',

                    text: response.message

                });

            }

        } else {

            Swal.fire({

                icon: 'error',

                title: 'Error',

                text: 'An error occurred while processing the request.'

            });

        }

    };



    xhr.onerror = function() {

        Swal.fire({

            icon: 'error',

            title: 'Error',

            text: 'An error occurred while processing the request.'

        });

    };



    xhr.send(formData);

};

Code

<?php

// Enable error reporting for debugging

error_reporting(E_ALL);

ini_set('display_errors', 1);



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

    $response = [

        "status" => "error",

        "message" => "An unexpected error occurred. Please try again later."

    ];



    // Capture form data with validation

    $name = isset($_POST['name']) ? htmlspecialchars($_POST['name'], ENT_QUOTES, 'UTF-8') : '';

    $email = isset($_POST['email']) ? filter_var($_POST['email'], FILTER_SANITIZE_EMAIL) : '';

    $subject = isset($_POST['subject']) ? htmlspecialchars($_POST['subject'], ENT_QUOTES, 'UTF-8') : '';

    $message = isset($_POST['message']) ? htmlspecialchars($_POST['message'], ENT_QUOTES, 'UTF-8') : '';



    // Validate email format

    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {

        $response = [

            "status" => "error",

            "message" => "Invalid email address."

        ];

        echo json_encode($response);

        exit();

    }



    // File upload handling

    $fileStatus = "No file uploaded.";

    if (isset($_FILES['file']) && $_FILES['file']['error'] === UPLOAD_ERR_OK) {

        $file = $_FILES['file'];

        $uploadDir = 'uploads/';

        $uploadFile = $uploadDir . basename($file['name']);

        

        if (!is_dir($uploadDir)) {

            mkdir($uploadDir, 0755, true);

        }



        if (move_uploaded_file($file['tmp_name'], $uploadFile)) {

            $fileStatus = "File uploaded successfully.";

        } else {

            $fileStatus = "Failed to move uploaded file.";

        }

    } elseif (isset($_FILES['file'])) {

        $fileStatus = "File upload error: " . $_FILES['file']['error'];

    }



    // Email configuration

    $to = "[email protected]"; // Replace with your email address

    $headers = "From: $email";

    $body = "Name: $name\nEmail: $email\nSubject: $subject\nMessage: $message\n\n" . $fileStatus;



    // Try to send the email

    if (mail($to, $subject, $body, $headers)) {

        $response = [

            "status" => "success",

            "message" => "Message sent successfully!"

        ];

    }



    // Send JSON response

    header('Content-Type: application/json');

    echo json_encode($response);

    exit();

}

?>

Code

<div class="contact">

                <h2><i class="fa-solid fa-envelopes-bulk" style="color: #8755b3;"></i> Contact</h2>

                <form id="contactForm" action="/send_message.php" method="POST">

                    <input type="text" placeholder="Name" id="name" name="name" required>

                    <input type="email" placeholder="Email" id="email" name="email" required>

                    <textarea id="message" placeholder="Message" name="message" required></textarea>

                    <button type="submit" class="submitbutton">Submit</button>

                </form>

            </div>