¿Cómo puedo crear un formulario personalizado en WordPress?

Tengo un sitio de WordPress y me gustaría crear un formulario (entrada → base de datos).

He visto dos tutoriales:

• Cómo puede crear fácilmente un formulario personalizado en WordPress
• ¿Cómo crear formularios personalizados en WordPress sin usar complementos?

Ambos son muy similares. Creando el front-end con HTML y JavaScript, y luego procesando la información a la base de datos usando PHP.

Mi problema es que cada vez que envío el formulario, muestra una página 404 que dice:

¡Ups! Esa página no se puede encontrar.

Ahora mi problema es (o quiero saber):

1. ¿Dónde tengo que poner el process.php ¿expediente? (Estoy usando ArchivoZilla). He probado varios lugares en el public_html/wp-content carpeta.

2. ¿Por qué no se validan los campos de nombre y correo electrónico? (sin alerta por campo de nombre vacío, etc.)

Estructura del formulario:

Su nombre: [TEXT]Tu correo electrónico: [TEXT]Sexo: [*male *female]Su edad:[TEXT], [Submit Button]

página del formulario:

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

Expediente process.php (no editado):

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

Para responder a la pregunta uno: WordPress proporciona ganchos de acción y filtro para que los desarrolladores agreguen su código o funciones PHP personalizados. Debería investigar eso, porque el uso de complementos que producen fragmentos no ayudará en su caso, ya que hace que su código PHP se ejecute sin siquiera cargar su formulario, por lo que verá su página de éxito en su lugar.

Para obtener más información sobre los ganchos de acción y filtro visitar aquí.

Como alternativa a nosotros, los ganchos de acción/filtro, puede cargar su archivo PHP en la carpeta del tema. Sin embargo, hay un defecto en eso. Su archivo puede perderse cuando se actualice WordPress.

Para responder a la pregunta dos: hay una manera más fácil de validar su formulario si usa JavaScript. Todo lo que necesita hacer es agregar la palabra ‘requerido’ dentro de la etiqueta de entrada. También puede usar el tipo de entrada ‘correo electrónico’ junto con la palabra clave requerida para validar su correo electrónico. Vea el ejemplo a continuación.

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

Si aún desea usar su función de JavaScript, intente usar document.getElementById('customer_name') y document.getElementById('customer_email') en vez de document.forms. También asegúrese de cerrar su etiqueta de script al final. Vea a continuación un ejemplo.

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