如何将HTML联系表单提交按钮改为弹窗提示（替代页面跳转）

Got it, let's get this sorted so your form submits smoothly without redirecting to the PHP page, and shows that "我们已收到您的信息" popup for 5 seconds. Here's a step-by-step breakdown:

Step 1: Update the HTML Form #

First, tweak your form to add an ID (so we can target it with JS) and remove the action attribute (we'll handle submission via JS instead). We'll also add a hidden popup element that we'll show after successful submission:

<form id="contactForm" method="POST">
  <ol>
    <li>How would you like me to call you? <input name="name" type="text" placeholder="Big Jack" /></li>
    <li>Pick Up Address
      <ul>
        <li style="list-style-type: none;"></li>
        <li>Number and Street or Site Name <input type="text" name="pickupadd" placeholder="5600 American Dr or Toronto Pearson Airport Terminal 3"/></li>
        <li>Post Code <input type="text" name="pickuppc" placeholder="L4W 1S9" /></li>
      </ul>
    </li>
    <li>Drop Off Address
      <ul>
        <li>Number and Street or Site Name <input type="text" name="dropoffadd" placeholder="40 Bay Street or Air Canada Centre"/></li>
        <li>Post Code <input type="text" name="dropoffpc" placeholder="M5J 2X2"/></li>
      </ul>
    </li>
    <li>Your Contact
      <ul>
        <li>Phone Number <input type="number" name="phonenumber" placeholder="1 416 123 4567"/></li>
        <li>Email <input type="email" name="useremail" placeholder="youremail@gmail.com"/></li>
      </ul>
    </li>
  </ol>
  Message <textarea style="height: 200px" name="message" placeholder="Anything I should know such as how big your"></textarea>
  <input type="submit" value="send"/>
</form>

<!-- Success Popup (hidden by default) -->
<div id="successPopup" style="display:none; position:fixed; top:20px; left:50%; transform:translateX(-50%); padding:15px 25px; background:#4CAF50; color:white; border-radius:4px; z-index:1000;">
  我们已收到您的信息
</div>

Step 2: Add JavaScript for AJAX Submission & Popup #

Add this script right before the closing </body> tag to handle form submission without redirecting, and trigger the popup:

<script>
document.getElementById('contactForm').addEventListener('submit', function(e) {
  // Prevent the default form redirect behavior
  e.preventDefault();
  
  // Collect all form data
  const formData = new FormData(this);
  
  // Send data to PHP via AJAX
  fetch('/wp-content/themes/writee/templates/form-to-email.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    if(data.success) {
      // Show the success popup
      const popup = document.getElementById('successPopup');
      popup.style.display = 'block';
      
      // Hide popup after 5 seconds, and reset the form
      setTimeout(() => {
        popup.style.display = 'none';
        document.getElementById('contactForm').reset();
      }, 5000);
    } else {
      // Handle submission errors (optional: replace with a styled error popup)
      alert('Oops, something went wrong. Please try again later.');
    }
  })
  .catch(error => {
    console.error('Submission error:', error);
    alert('Oops, something went wrong. Please try again later.');
  });
});
</script>

Step 3: Fix & Update the PHP Code #

First, I noticed a bug in your original PHP: $useremail = $_POST['email']; should be $_POST['useremail'] (since your input's name attribute is useremail). We'll also update the PHP to return a JSON response instead of plain text, so our JS can easily verify if the submission was successful:

<?php
// Only handle POST requests
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // Safely get form data (avoid undefined index errors)
  $name = $_POST['name'] ?? '';
  $pickupadd = $_POST['pickupadd'] ?? '';
  $pickuppc = $_POST['pickuppc'] ?? '';
  $dropoffadd = $_POST['dropoffadd'] ?? '';
  $dropoffpc = $_POST['dropoffpc'] ?? '';
  $phonenumber = $_POST['phonenumber'] ?? '';
  $useremail = $_POST['useremail'] ?? ''; // Fixed variable name here
  $message = $_POST['message'] ?? '';

  $formcontent = "From: $name \n Pick Up Address: $pickupadd \n Pick Up Post Code: $pickuppc\n Drop Off Address: $dropoffadd\n Drop Off Post Code $dropoffpc\n Phone Number: $phonenumber\n Email: $useremail\n Message: $message";
  $recipient = "admin@mydomain.com";
  $subject = "Pickup Request";
  $headers = "Bcc: myemail@gmail.com";

  // Send email and return JSON status
  if(mail($recipient, $subject, $formcontent, $headers)) {
    echo json_encode(['success' => true]);
  } else {
    echo json_encode(['success' => false]);
  }
} else {
  // Block direct access to the PHP file
  echo json_encode(['success' => false]);
}
?>

Quick Notes: #

• The AJAX submission keeps users on the same page, so no jarring redirect happens.
• The popup is styled to be fixed (stays visible while scrolling) and centered for clear visibility.
• We added ?? '' to each variable to avoid PHP errors if a field is left empty.
• Fixed the email variable bug in your original code—this ensures the user's email is captured correctly in the submitted message.

内容的提问来源于stack exchange，提问作者James Macathy