Bootstrap 模式中的 WordPress 自定義聯系表單未顯示驗證和提交響應

Question

對於我的 WordPress (v5.5.1)，我使用 Bootstrap 並使用以下 HTML 在 Bootstrap Modal 中構建了一個自定義聯系表單（遵循本教程： https : //premium.wpmudev.org/blog/how-to-build-your-own -wordpress-contact-form-and-why/ ）。

<form id="contact-form" action="<?php echo get_site_url(); ?>" method="post">

<div class="modal-body">
    <?php echo $response; ?>
    <div class="form-group">
        <input class="form-control my-2" type="text" name="message_name" size="50" placeholder="Your full name" value="<?php echo esc_attr($_POST['message_name']); ?>">
        <input class="form-control my-2" type="email" name="message_email" size="50" placeholder="Email address" value="<?php echo esc_attr($_POST['message_email']); ?>">
        <input class="form-control my-2" type="tel" name="message_tel" size="50" placeholder="Country code, Phone number" value="<?php echo esc_attr($_POST['message_tel']); ?>">
        <textarea class="form-control my-2" name="message_text" rows="2" placeholder="Your message" value="<?php echo esc_attr($_POST['message_text']); ?>"></textarea>
        <input  class="form-control my-2" type="text" name="message_human" placeholder="Human check: Enter 2">
        <input type="hidden" name="message_url" value="<?php the_permalink(); ?>">
        <input type="hidden" name="message_page" value="<?php the_title(); ?>">
    </div>
</div>
<div class="modal-footer">
    <input type="hidden" name="submitted" value="1">
    <button type="submit" value="Submit" class="btn btn-search form-control">Send Enquiry</button>
</div>

在表單提交時驗證表單和顯示響應的功能下方：

function validateform() {
//response generation function
$response = "";

//function to generate response
function contact_g_form_response($type, $message) {

global $response;

if ($type == "success") {
    $response = "<div class='message-success text-center'>{$message}</div>";
} else {
    $response = "<div class='message-error text-center'>{$message}</div>";
}
}

//response messages
$not_human = "Enter current year in numbers.";
$missing_content = "Missing something.";
$email_invalid = "Check your Email address.";
$message_unsent = "Message was not sent. Try Again.";
$message_sent = "Thanks! We got your enquiry.";

//user posted variables
$name = $_POST['message_name'];
$email = $_POST['message_email'];
$fromEmail = $name . '<' . $email . '>';
$tel = $_POST['message_tel'];
$text = $_POST['message_text'];
$url = $_POST['message_url'];
$page = $_POST['message_page'];
$human = $_POST['message_human'];


//php mailer variables
$to = get_option('admin_email');
$subject = '[General Enquiry] ' . $name . ' | Phone Number:' . $tel;
$headers = 'From: ' . $fromEmail . "\r\n" .
    'Reply-To: ' . $email . "\r\n";

$message = '<html><body><h1>New general enquiry from ' . $name . '!</h1>'
    . '<p>Email: ' . $email . '</p>'
    . '<p>Phone Number: ' . $tel . '</P>'
    . '<p>Inquiry: ' . $text . '</P>'
    . '<p>From page: <b>' . $page . '</b></P>'
    . '<p>Page URL: ' . $url . '</p>'
    . '</body></html>';

if (!$human == 0) {
if ($human != 2) {
    contact_g_form_response("error", $not_human); //not human!
} else {

    //validate email
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        contact_g_form_response("error", $email_invalid);
    } else { //email is valid
        //validate presence of name, phone number
        if (empty($name) || empty($tel)) {
            contact_g_form_response("error", $missing_content);
        } else { //ready to go!
            $sent = wp_mail($to, $subject, $message, implode("\r\n", $headers)); //mail to admin - striptags removing formatting
            // $sent2 = wp_mail($email, $subject, $body, $headers); //mail to visitor
            // if ($sent || $sent2) {
            if ($sent) {
                contact_g_form_response("success", $message_sent); //message sent!
            } else {
                contact_g_form_response("error", $message_unsent); //message wasn't sent
            }
        }
    }
}
} else if ($_POST['submitted']) {
contact_g_form_response("error", $missing_content);
}
}

在早期版本的 WordPress 中，電子郵件未經驗證就發送，隨着 v5.5.1 升級，Modal 在沒有任何驗證的情況下關閉，電子郵件也沒有發送。

Answer 1

你只需要替換這個：

<form id="contact-form" action="<?php echo get_site_url();?>" method="post">

有了這個：

<form id="contact-form" method="post">

因為您在同一頁面上顯示錯誤，但單擊提交按鈕時，該操作會將您帶到特定的 url，這就是未顯示驗證的原因。

和這個：

if ($type == "success") {
$response = "<div class='message-success text-center'>{$message}</div>";
} else {
$response = "<div class='message-error text-center'>{$message}</div>";
}

這也：

if ($type == "success") {
$response =  $message;
echo $response;
} else {
$response =  $message;
echo $response;
}

Bootstrap 模式中的 WordPress 自定義聯系表單未顯示驗證和提交響應

問題描述

1 個解決方案

解決方案1
1 2018-07-17 05:34:31

Bootstrap 模式中的 WordPress 自定義聯系表單未顯示驗證和提交響應

問題描述

1 個解決方案

解決方案1 1 2018-07-17 05:34:31

解決方案1
1 2018-07-17 05:34:31