如何在wordpress中制作联系表格调用另一个php文件

Posted 2023-03-05

【中文标题】如何在wordpress中制作联系表格调用另一个php文件

【英文标题】：How to make a contact form in wordpress call another php file

【发布时间】：2018-05-05 14:54:46

【问题描述】：

我正在尝试在我的 WordPress 网站的侧边栏中添加一个小型联系表单。我将我的代码从它的原始 html 文件转移到适当的 WordPress php 文件中。唯一不起作用的是联系表格。

当我单击发送按钮时，它会转到 URL 栏中的 mailer.php 文件，而不是发送消息。

这是表格：

<div class="w3-container w3-padding w3-white">
<h4 class="w3-left">Contact</h4>
<br> <br>
<div id="form-messages">&nbsp;</div>
<form id="ajax-contact" class="w3-container w3-margin" action="mailer.php" method="post">
<div class="w3-row w3-section field"><label for="name">Name:</label> <input id="name" class="w3-input w3-border" name="name" required="" type="text"></div>
<div class="w3-row w3-section field"><label for="email">Email:</label> <input id="email" class="w3-input w3-border" name="email" required="" type="email"></div>
<div class="w3-row w3-section field"><label for="message">Message:</label> <textarea id="message" class="w3-input w3-border" name="message" required=""></textarea></div>
<div class="field"><button class="w3-button w3-blue w3-ripple w3-section" type="submit">Send</button></div>
</form></div> 

这是 mailer.php 文件：

<?php
    // My modifications to mailer script from:
    // http://blog.teamtreehouse.com/create-ajax-contact-form
    // Added input sanitizing to prevent injection

    // Only process POST reqeusts.
    if ($_SERVER["REQUEST_METHOD"] == "POST") 
        // Get the form fields and remove whitespace.
        $name = strip_tags(trim($_POST["name"]));
                $name = str_replace(array("\r","\n"),array(" "," "),$name);
        $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
        $message = trim($_POST["message"]);

        // Check that data was sent to the mailer.
        if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) 
            // Set a 400 (bad request) response code and exit.
            http_response_code(400);
            echo "Oops! There was a problem with your submission. Please complete the form and try again.";
            exit;
        

        // Set the recipient email address.
        // FIXME: Update this to your desired email address.
        $recipient = "[e-mail]";

        // Set the email subject.
        $subject = "New contact from $name";

        // Build the email content.
        $email_content = "Name: $name\n";
        $email_content .= "Email: $email\n\n";
        $email_content .= "Message:\n$message\n";

        // Build the email headers.
        $email_headers = "From: $name <$email>";

        // Send the email.
        if (mail($recipient, $subject, $email_content, $email_headers)) 
            // Set a 200 (okay) response code.
            http_response_code(200);
            echo "Thank You! Your message has been sent.";
         else 
            // Set a 500 (internal server error) response code.
            http_response_code(500);
            echo "Oops! Something went wrong and we couldn't send your message.";
        

     else 
        // Not a POST request, set a 403 (forbidden) response code.
        http_response_code(403);
        echo "There was a problem with your submission, please try again.";
    

【参考方案1】：

在 onClick 事件中添加这样的函数。

function sendmail() 
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    var message = document.getElementById("message").value;

    var SendInfo=      "name":name,
                        "email":email,
                        "message":message   ;
    $.ajax(
            type: 'POST',
            url: 'mailer.php',
            data: SendInfo,
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            traditional: true,
            success: function (data) 
                // Whatever
            
    );

【讨论】：

你能解释一下吗？我真的可以一步一步地使用它。我也会尝试查找它。非常感谢您提供的任何和所有信息！

这个函数告诉他们的客户端加载url中的文件，在Sendinfo中指定post数据，而不刷新整个页面。如果您从按钮中删除提交类，并将此功能添加为 onClick，它将使用正确的发布数据调用您的 mailer.php，而无需刷新页面。然后它将执行您在 sucess 函数中放置的任何代码（您可以使用它来清除表单数据或弹出警报，告诉他们邮件已发送）。我也会使用 mailer.php 的绝对文件路径，而不是 ajax 请求的相对路径。

Sidenote ajax 在 jquery 库中，所以如果你不熟悉它，你需要确保包含它。如果您想从 mailer.php 页面接收反馈，或者根据回复更新页面上的内容，变量数据也将是您在 mailer.php 中打印的任何内容。

非常感谢。我想我明白了。我在 WordPress 主题中执行此操作，但我不确定如何包含您给我的功能。如果我要让它成为自己的 .js 文件，我将如何让按钮调用它？这可能吗？

是的，如果您将其设为自己的 .js 文件，只要将 .js 包含在某处，就应该可以访问该函数以添加到按钮中。

【参考方案2】：

编辑 :: 这将完全停止表单提交。如果您希望表单不会导致页面重定向，则需要使用 ajax。

如果您想阻止表单将您重定向到 mailer.php，那么您需要添加一些 javascript 来取消请求。挂钩按钮点击事件，并添加“return false;”以防止页面发生变化。

或者，使用 AJAX 提交表单，您可以更好地控制无缝提交此信息。 :)

【讨论】：

所以你是说我不能按照我现在的方式来做？

看起来您有答案，但正如上面的@Mason Stedman 所说，您使用 ajax 请求提交表单，这是停止页面刷新或导航的方式。上面提供的功能正是您所需要的。