如何在 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 页面，上面写着：

哎呀！找不到该页面。

现在我的问题是（或者我想知道）：

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 为开发人员提供了操作和过滤钩子，以添加他们的自定义 PHP 代码或函数。您应该对此进行调查，因为使用生成 sn-ps 的插件对您的情况没有帮助，因为它会导致您的 PHP 代码在不加载表单的情况下执行，因此您将看到您的成功页面。

要了解有关操作和过滤器挂钩的更多信息visit here。

除了我们的操作/过滤器挂钩之外，您还可以将 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') 而不是 document.forms。还要确保在最后关闭脚本标签。请参阅下面的示例。

<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>