php - 如何在 WordPress 中创建自定义表单？

Question

我有一个 WordPress 网站，想创建一个表单(输入 → 数据库)。

我看过两个教程:

• How you can easily create customized form in WordPress
• How to create custom forms in WordPress without using plugins?

它们非常相似。使用 HTML 和 JavaScript 创建前端，然后使用 PHP 将信息处理到数据库。

我的问题是每当我提交表单时，它都会显示一个 404 页面，上面写着:

Oops! That page can’t be found.

现在我的问题是(或者我想知道):

1. 我需要将 process.php 文件放在哪里？ (我正在使用 FileZilla )。我已经在 public_html/wp-content 文件夹中尝试了几个地方。

2. 为什么不验证姓名和电子邮件字段？ (没有空名称字段等的警报)

表单结构:

您的姓名:[TEXT]，您的电子邮件:[TEXT]，性别:[*男 *女]，您的年龄:[TEXT]，[提交按钮]

表单页面:

<form name="myForm" method="POST" onsubmit="return form_validation()" action="../process.php">
    Your Name: <input id="customer_name" name="customer_name" type="text" />
    Your Email: <input id="customer_email" name="customer_email" type="text" />
    Sex: <input name="customer_sex" type="radio" value="male" />Male <input name="customer_sex" type="radio" value="female" />Female
    Your Age: <input id="customer_age" name="customer_age" type="text" />
    <input type="submit" value="Submit" />
</form>

<script type="text/javascript">
    function form_validation() {
        /* Check the Customer Name for blank submission */
        var customer_name = document.forms["myForm"]["customer_name"].value;
        if (customer_name == "" || customer_name == null) {
            alert("Name field must be filled.");
            return false;
        }

        /* Check the Customer Email for invalid format */
        var customer_email = document.forms["myForm"]["customer_email"].value;
        var at_position = customer_email.indexOf("@");
        var dot_position = customer_email.lastIndexOf(".");
        if (at_position < 1 || dot_position < at_position + 2 || dot_position + 2 >= customer_email.length) {
            alert("Given email address is not valid.");
            return false;
        }
    }
</script>

文件 process.php(未编辑):

<?php
    $customer_name = $_POST["customer_name"];
    $customer_email = $_POST["customer_email"];
    $customer_sex = $_POST["customer_sex"];
    $customer_age = $_POST["customer_age"];

    $conn = mysqli_connect("Database Host", "Database Username", "Database  Password", "Database Name");
    if(!$conn) {
        die(‘Problem in database connection: ‘ . mysql_error());
    }

    $query = "INSERT INTO ‘Database Name’.’Table Name’ ( ‘customer_name’, ‘customer_email’, ‘customer_sex’, ‘customer_age’ ) VALUES ( $customer_name, $customer_email, $customer_sex, $customer_age )";
    mysqli_query($conn, $query);

    header("Location: my-site.com/success"); // Redirects to success page
?>

Answer 1

回答问题一:WordPress 为开发人员提供了操作和过滤器 Hook ，以添加他们的自定义 PHP 代码或函数。您应该研究一下，因为使用生成片段的插件对您的情况没有帮助，因为它会导致您的 PHP 代码甚至在不加载表单的情况下执行，因此您将看到您的成功页面。

要了解有关操作和过滤器 Hook 的更多信息 visit here .

除了我们的操作/过滤器 Hook 之外，您还可以将 PHP 文件上传到主题文件夹中。但是，这有一个缺陷。 WordPress 更新时您的文件可能会丢失。

---

回答问题二:如果使用 JavaScript，验证表单的方法更简单。您需要做的就是在输入标签中添加“必需”一词。您还可以使用输入类型“电子邮件”和所需的关键字来验证您的电子邮件。请参见下面的示例。

<form name="myForm" method="POST" action="../process.php">
    Your Name: <input id="customer_name" name="customer_name" type="text" required/>
    Your Email: <input id="customer_email" name="customer_email" type="email" required/>
    Sex: <input name="customer_sex" type="radio" value="male" />Male <input name="customer_sex" type="radio" value="female" />Female
    Your Age: <input id="customer_age" name="customer_age" type="text" />
    <input type="submit" value="Submit" />
</form>

如果您仍想使用 JavaScript 函数，请尝试使用 document.getElementById('customer_name') 和 document.getElementById('customer_email') 而不是 文档.表单。还要确保在最后关闭脚本标签。请参阅下面的示例。

<script type="text/javascript">
    function form_validation() {
        /* Check the Customer Name for blank submission */
        var customer_name = document.getElementById('customer_name').value;
        if (customer_name == "" || customer_name == null) {
            alert("Name field must be filled.");
            return false;
        }

        /* Check the Customer Email for invalid format */
        var customer_email = document.getElementById('customer_email').value;
        var at_position = customer_email.indexOf("@");
        var dot_position = customer_email.lastIndexOf(".");
        if (at_position < 1 ||
            dot_position < at_position + 2 ||
            dot_position + 2 >= customer_email.length) {

            alert("Given email address is not valid.");
            return false;
        }
    }
</script>