WordPress AMP插件中表单POST提交失效，替换action-xhr仍无效求助

Hey there, let's break down why your AMP form isn't working even after switching to action-xhr, and fix those empty emails and unresponsive submissions.

1. First, Verify You've Loaded the Required AMP Form Component #

AMP forms depend on the amp-form custom element to handle XHR submissions. If this script is missing from your template, the form will fail silently. Add this to the <head> section of your AMP page:

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

2. Ensure Your Form Follows AMP's Strict Structure Rules #

Your form tag must meet these minimum requirements to work with action-xhr:

<form method="post" action-xhr="your-processing-script.php" target="_top">
  <!-- All form fields must have a `name` attribute to send data -->
  <input type="text" name="hos" placeholder="Enter hospital name">
  
  <!-- Submit button -->
  <input type="submit" value="Submit">

  <!-- Required success/error feedback blocks (AMP mandates these) -->
  <div submit-success>
    <template type="amp-mustache">
      Thank you for your submission!
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Oops, something went wrong. Please try again.
    </template>
  </div>
</form>

• Critical Checks:
  • method="post" is non-negotiable for action-xhr submissions.
  • target="_top" ensures the submission works within AMP's sandboxed environment.
  • No form field will be sent without a name attribute—double-check all your inputs!

3. Fix Your PHP Processing Script (Root Cause of Empty Emails) #

AMP's action-xhr expects your PHP script to return a valid JSON response with specific CORS headers. Here's a corrected, AMP-compliant example:

<?php
// Set mandatory CORS headers (AMP will reject the response without these)
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Allow-Headers: Content-Type");
header("Content-Type: application/json");

// Process only POST requests
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Retrieve form data (AMP sends data as url-encoded, so $_POST works)
    $hospital = isset($_POST['hos']) ? trim($_POST['hos']) : '';

    // Send your email (test this logic independently first!)
    $to = 'your-email@example.com';
    $subject = 'New Form Submission';
    $message = "Hospital Name: " . $hospital;
    $headers = 'From: noreply@example.com' . "\r\n";

    $emailSent = mail($to, $subject, $message, $headers);

    // Return AMP-compatible JSON response
    if ($emailSent && !empty($hospital)) {
        echo json_encode(['success' => true]);
    } else {
        echo json_encode([
            'success' => false,
            'errors' => ['form' => 'Failed to process submission.']
        ]);
    }
} else {
    // Handle non-POST requests
    echo json_encode(['success' => false]);
}
?>

• Key Fixes:
  • CORS headers allow AMP to process the response (silent failures happen without these).
  • The script returns a JSON object with success: true/false—AMP uses this to trigger success/error messages.
  • Add checks for empty fields to avoid sending blank emails.

4. Debug with Browser Dev Tools #

If issues persist, use Chrome DevTools to diagnose:

• Go to the Network tab, filter by "XHR", and check the submission request:
  • Did your form data appear in the "Form Data" section?
  • What's the response status code? 200 is good, but 4xx/5xx means your PHP script has errors.
  • Is the response valid JSON?
• Check the Console tab for additional errors (e.g., missing amp-form component, CORS violations).

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