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

Question

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

我看过两个教程：

• 如何轻松在WordPress中创建自定义表单
• 如何在不使用插件的情况下在WordPress中创建自定义表单？

他们都很相似。使用HTML和JavaScript创建前端，然后使用PHP将信息处理到数据库中。

我的问题是，每当我提交表单时，都会显示一个404页面，其中显示：

糟糕！找不到该页面。

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

1. 我需要在哪里存放process.php文件？（我正在使用FileZilla）。我已经尝试了public_html/wp-content文件夹中的几个位置。

2. 为什么不验证名称和电子邮件字段？（对于空名称字段等，不会发出警报）

表格结构：

您的名字：[TEXT]，您的电子邮件：[TEXT]，性别：[* male * female]，您的年龄：[TEXT]，[Submit Button]

表单页面：

<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 代码或函数。您应该研究一下这一点，因为使用生成片段的插件对您的情况没有帮助，因为它会导致您的 PHP 代码甚至在不加载表单的情况下执行，因此您将看到成功页面。

要了解有关操作和过滤器挂钩的更多信息，请访问此处。

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

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

<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')anddocument.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>