PHP联系表单：同页面显示成功提示及样式设置问询

Hey there! Great job getting your contact form functional—let's tackle those two tweaks you're looking for: showing success/error messages on the same page, and styling those messages to look clean.

1. Show Messages On The Same Page #

Right now, your form submits to a separate action.php file, which is why you see the message on a new page. We can fix this by moving your PHP logic into the same file as your HTML form, so the page reloads with the message instead of jumping to a new one.

Step 1: Combine PHP & HTML in One File #

Move your PHP code to the top of your HTML file (before any HTML tags). We'll modify it to store messages in variables instead of echoing them immediately, so we can display them in the right spot on your page:

<?php
// Initialize message variables
$status_message = '';
$status_type = '';

// Only run this code if the form was submitted via POST
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $to = 'zoeharrisondesign@gmail.com'; 
    $subject = 'New Message Recieved!'; 
    $from = $_POST['email']; 
    $phone = $_POST['phone']; 
    $message = $_POST['message']; 
    $name = $_POST['name']; 
    // Get the honeypot value (your hidden field is named "url")
    $honeypot = $_POST['url'] ?? '';

    // Check honeypot for spam
    if (!empty($honeypot)) { 
        $status_message = 'There was a problem with your submission.';
        $status_type = 'error';
    } else {
        // Set email headers
        $headers = 'MIME-Version: 1.0' . "\r\n"; 
        $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; 
        $headers .= 'From: '.$from."\r\n". 'Reply-To: '.$from."\r\n" . 'X-Mailer: PHP/' . phpversion(); 

        // Format the message content
        $formatted_message = "$message \n | From $name \n | Tel: $phone"; 

        // Send the email and set status message
        if(mail($to, $subject, $formatted_message, $headers)){ 
            $status_message = 'Your mail has been sent successfully.';
            $status_type = 'success';
        } else{ 
            $status_message = 'Unable to send email. Please try again.';
            $status_type = 'error';
        }
    }
}
?>

Step 2: Update the Form's Action #

Change your form's action attribute to empty (so it submits to the same page):

<form role="form" action="" method="post" class="contact-form">
    <!-- Your existing form fields go here -->
</form>

Step 3: Add a Message Container #

Add this code either above or below your form to display the status message when the form is submitted:

<?php if (!empty($status_message)): ?>
    <div class="form-message <?php echo $status_type; ?>">
        <?php echo $status_message; ?>
    </div>
<?php endif; ?>

2. Style the Messages #

Now we'll add CSS to make your success/error messages stand out. Add this to your stylesheet (or a <style> tag in the <head> of your HTML file):

/* Base style for all form messages */
.form-message {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-family: Arial, sans-serif;
    font-weight: 500;
}

/* Success message style (green theme) */
.form-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* Error message style (red theme) */
.form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

That's it! Now when you submit the form, the page will reload and show your styled message right above (or below) the form instead of sending you to a new page.

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