如何用PHP实现联系表单提交后在Send按钮下方显示Message Sent

Got it, let's break down how to add that "Message Sent" prompt right below your Send button, since your HTML and PHP are separate. We’ve got two reliable approaches depending on whether you want a traditional page reload or a smoother, no-refresh experience.

Approach 1: Server-Side Feedback (Traditional Form Submission) #

This is the simpler, no-JavaScript route that works for all browsers. The idea is to have your PHP script send a success status back to your HTML page after processing the form, then display the message.

Step 1: Update Your HTML Form #

Add a container right below the Send button to hold the status message. If your HTML file isn’t already a .php file, you’ll need to rename it (e.g., contact.html → contact.php) so it can process the server-side status:

<form action="submit-form.php" method="POST">
  <!-- Your existing form fields (name, email, message, etc.) -->
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  
  <button type="submit" id="send-btn">Send</button>
  <!-- Status message container -->
  <div id="message-status" class="status-message"></div>
</form>

Step 2: Modify Your PHP Processing Script #

After validating and sending the message, redirect back to your form page with a success parameter to trigger the prompt:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Grab form data
    $name = trim($_POST['name']);
    $email = trim($_POST['email']);
    $message = trim($_POST['message']);

    // Add your validation and message-sending logic here (e.g., send email)
    // For this example, we'll assume submission was successful
    $submissionSuccessful = true;

    // Redirect back to form with status
    if ($submissionSuccessful) {
        header('Location: contact.php?success=1');
        exit;
    } else {
        header('Location: contact.php?success=0');
        exit;
    }
}
?>

Step 3: Display the Success Message #

Add this PHP snippet in your contact.php file, right inside the status container or at the bottom of the page:

<!-- Inside the message-status container -->
<div id="message-status" class="status-message">
    <?php if (isset($_GET['success']) && $_GET['success'] === '1'): ?>
        <span style="color: #2ecc71;">Message Sent</span>
    <?php elseif (isset($_GET['success']) && $_GET['success'] === '0'): ?>
        <span style="color: #e74c3c;">Oops, something went wrong. Please try again.</span>
    <?php endif; ?>
</div>

Approach 2: AJAX Submission (No-Refresh Experience) #

This method keeps the page from reloading, giving users a smoother experience. We’ll use JavaScript to handle the form submission and display the prompt instantly.

Step 1: Update Your HTML Form #

Give the form an ID for easy JavaScript targeting, and keep the status container:

<form id="contact-form">
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  
  <button type="submit" id="send-btn">Send</button>
  <div id="message-status" class="status-message"></div>
</form>

Step 2: Add JavaScript to Handle Submission #

Add this script at the bottom of your HTML page (or in an external JS file) to intercept the form submit event:

document.getElementById('contact-form').addEventListener('submit', async function(e) {
    e.preventDefault(); // Stop the default page reload
    const statusElement = document.getElementById('message-status');
    const submitBtn = document.getElementById('send-btn');

    // Disable button to prevent duplicate submissions
    submitBtn.disabled = true;
    submitBtn.textContent = 'Sending...';

    try {
        // Collect form data
        const formData = new FormData(this);
        // Send data to PHP script
        const response = await fetch('submit-form.php', {
            method: 'POST',
            body: formData
        });

        const result = await response.json();

        if (result.success) {
            statusElement.textContent = 'Message Sent';
            statusElement.style.color = '#2ecc71';
            this.reset(); // Optional: Clear the form after success
        } else {
            statusElement.textContent = 'Failed to send message. Please try again.';
            statusElement.style.color = '#e74c3c';
        }
    } catch (error) {
        statusElement.textContent = 'Connection error. Check your internet and try again.';
        statusElement.style.color = '#e74c3c';
    } finally {
        // Re-enable the button
        submitBtn.disabled = false;
        submitBtn.textContent = 'Send';
    }
});

Step 3: Update PHP to Return JSON Response #

Modify your submit-form.php to send a JSON response instead of redirecting:

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

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

    // Your validation and message-sending logic here
    $submissionSuccessful = true;

    if ($submissionSuccessful) {
        echo json_encode(['success' => true]);
    } else {
        echo json_encode(['success' => false]);
    }
} else {
    echo json_encode(['success' => false, 'error' => 'Invalid request']);
}
?>

Optional: Add CSS for Styling #

Make the status message look nicer with a little CSS:

.status-message {
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: 500;
}

Which Approach to Choose? #

• Use Approach 1 if you need maximum compatibility (no JavaScript required) or prefer a simpler setup.
• Use Approach 2 for a modern, user-friendly experience without page reloads.

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