基于PHP&JavaScript的无跳转联系表单开发问题求助

Hey Joel, let's work through both of your contact form problems—they're common hurdles, but easy to fix with a few tweaks!

1. Stop Redirecting to submit.php (Stay on the Original Page) #

Right now, your form uses the default browser submission behavior, which loads the action URL when you hit submit. To stay on the same page, we need to use AJAX to send the form data asynchronously, and prevent the default form submission.

Here's how to update your JavaScript:

• Listen to the form's submit event instead of the button's click (this covers both button clicks and Enter key submissions)
• Use event.preventDefault() to block the default page jump
• Send the form data to submit.php using fetch() (modern, promise-based AJAX)
• Update the status message based on whether the request succeeds or fails

// Get the form element first
const contactForm = document.querySelector('form');
const statusElement = document.getElementById('sent-status');

contactForm.addEventListener('submit', function(event) {
  // Block the default form submission
  event.preventDefault();

  // Validate all required fields
  const name = document.getElementById('name-text').value.trim();
  const email = document.getElementById('email-text').value.trim();
  const subject = document.getElementById('subject-text').value.trim();
  const message = document.getElementById('message-text').value.trim();
  const urlField = document.getElementById('antispam-text').value.trim();

  let formFilled = true;
  if (!name || !email || !subject || !message) {
    formFilled = false;
  }

  if (!formFilled) {
    statusElement.style.visibility = 'visible';
    statusElement.style.color = '#FF1D25';
    statusElement.innerText = 'Contact Form Incomplete';
    return; // Don't send the request if fields are empty
  }

  // Prepare form data to send
  const formData = new FormData(contactForm);

  // Send data via AJAX
  fetch('/submit.php', {
    method: 'POST',
    body: formData
  })
  .then(response => {
    if (response.ok) {
      statusElement.style.visibility = 'visible';
      statusElement.style.color = '#7AC943';
      statusElement.innerText = 'Message Sent Successfully';
      // Reset the form after success
      contactForm.reset();
    } else {
      throw new Error('Failed to send message');
    }
  })
  .catch(error => {
    statusElement.style.visibility = 'visible';
    statusElement.style.color = '#FF1D25';
    statusElement.innerText = 'Error Sending Message. Please try again later.';
    console.error(error); // For debugging
  });
});

2. Fix Email Not Being Delivered #

Your current PHP mail() call is missing critical details that most email servers require to accept and deliver the message. Here's what's wrong and how to fix it:

• No From header: Many servers reject emails without a valid sender address
• The email content is raw print_r() output, which is hard to read
• No validation of the user's email address (to ensure it's a valid format)

Update your submit.php with this improved version:

<?php
// Check if the anti-spam URL field is empty (spam trap)
if(isset($_POST['url']) && trim($_POST['url']) == ''){
    // Sanitize and validate form data
    $name = htmlspecialchars(trim($_POST['name']));
    $email = filter_var(trim($_POST['email']), FILTER_VALIDATE_EMAIL);
    $subject = htmlspecialchars(trim($_POST['subject']));
    $message = htmlspecialchars(trim($_POST['message']));

    // Stop if email is invalid
    if(!$email){
        http_response_code(400);
        exit('Invalid email address');
    }

    // Build a clean, readable email content
    $emailContent = "New contact form submission:\n\n";
    $emailContent .= "Name: $name\n";
    $emailContent .= "Email: $email\n";
    $emailContent .= "Subject: $subject\n\n";
    $emailContent .= "Message:\n$message";

    // Set email headers (critical for delivery)
    $headers = [
        'From' => "$name <$email>", // Use the user's name and email as sender
        'Reply-To' => $email, // Let you reply directly to the user
        'X-Mailer' => 'PHP/' . phpversion()
    ];

    // Send the email
    $mailSent = mail('beta@email.com', 'Contact Form: ' . $subject, $emailContent, $headers);

    if($mailSent){
        http_response_code(200);
        exit('Message sent');
    } else {
        http_response_code(500);
        exit('Failed to send email');
    }
} else {
    // Spammer detected - send a fake success response
    http_response_code(200);
    exit('Message sent');
}
?>

Additional Checks for Email Delivery: #

• Check your spam folder: Sometimes legitimate emails get flagged initially
• Verify your host allows mail(): Some shared hosts require using their SMTP servers instead of the default mail() function (if this is the case, look into using PHPMailer for better reliability)
• Test with a real email address (not the placeholder beta@email.com)

Final Notes #

• Make sure your CSS for #sent-status is still working as expected (the visibility toggle is handled in JS)
• Test the form thoroughly: Try submitting with empty fields, a filled spam trap (the hidden url field), and valid data to ensure all cases are covered

内容的提问来源于stack exchange，提问作者Joel Meine