¡WordPress formulario HTML personalizado + práctica de base de datos! ¡Novato puede hacerlo!

¿Se lo puede creer? Formularios de contacto, formularios de registro de usuarios o formularios de envío de datos, el principio que subyace a la adelantar parte de algo HTML Formularios + Procesamiento de bases de datos backend. Este artículo explicará detalladamente, desde los conceptos básicos, pasando por los aspectos prácticos, hasta las precauciones, cómo el WordPress para crear un formulario HTML y almacenar los datos en la base de datos.

I. ¿Por qué personalizar formularios HTML?

WordPress Aunque existen muchos plugins de formularios (como Contact Form 7,WPForms), pero en algunos casos necesitamos escribir el formulario HTML a mano:

Lógica empresarial personalizadaPor ejemplo, necesita recopilar campos adicionales o almacenarlos en una tabla personalizada.
Mayor rendimiento: No es necesario cargar plugins complejos con un código más ligero.
Totalmente controlableEl diseño front-end y la lógica de procesamiento back-end dependen de ti.

En segundo lugar, la estructura básica del formulario HTML

El formulario HTML más sencillo consta de un cuadro de entrada, un botón de envío y una etiqueta formulario Etiquetas, por ejemplo:

Nombre:
  

  Correo electrónico: 
  

  
</form

Descripción:

method="post"Envío de datos de formulario con POST.
action="": Enviar a la página actual.
nombre: Atributo clave del campo a través del cual se recupera el valor tras el envío.

Cómo tratar los datos de los formularios en WordPress

existe WordPress en la que suele encontrarse en el funciones.php o plugins personalizados para añadir lógica de procesamiento.

archivo functions.php

Todos los temas de WordPress incluyen funciones.php Documentación.
Puede escribir código aquí para que WordPress ejecute esta lógica cuando se cargue el tema.
Adecuado para poner algunas funciones simples, como el procesamiento de datos de formularios.

Plug-ins personalizados

Si la función es más independiente y compleja, es mejor escribirla como un plugin.
El plugin tiene una carpeta separada y archivos PHP que no se perderán con un cambio de tema.
Por ejemplo, crear un "plugin de recopilación de formularios personalizados", para que el código sea más claro y seguro.

1. Obtener datos del formulario

if ( isset($_POST['submit_form']) ) {
    $name = sanitize_text_field($_POST['nombre']);
    $email = sanitize_email($_POST['email']);
}

hacer uso de sanitize_text_field() responder cantando limpiar_correo() Filtrado de datos para garantizar la seguridad.

2. Acceso a la base de datos

WordPress proporciona $wpdb que pueden interactuar fácilmente con la base de datos.

global $wpdb.
$table_name = $wpdb->prefix . "custom_form"; // nombre de la tabla de datos

$wpdb->insert(
    1TP4Nombre_tabla,
    array(
        'name' => $name,
        'email' => $email, 'created_at' => current_time('mysql')
        'created_at' => hora_actual('mysql')
    )
).

Descripción:

$wpdb->prefijo es el prefijo de la tabla de la base de datos (por defecto es wp_).
insertar() escribirá los datos en la tabla especificada.

3. Creación de tablas en la base de datos

Primero necesitas crear una tabla para que el formulario almacene los datos, y puedes ejecutar el SQL cuando el plugin esté activado:

function crear_tabla_personalizada() {
    global $wpdb; $table_name = $wpdb->prefix .
    $table_name = $wpdb->prefix . "custom_form";

    $charset_collate = $wpdb->get_charset_collate();

    $sql = "CREATE TABLE $table_name (
      id mediumint(9) NOT NULL AUTO_INCREMENT,
      name varchar(50) NOT NULL, email varchar(100)
      email varchar(100) NOT NULL, created_at datetime DEFORM
      created_at datetime DEFAULT CURRENT_TIMESTAMP NOT NULL, PRIMARY KEY (id)
      PRIMARY KEY (id)
    ) $charset_collate;";

    require_once( ABSPATH . wp-admin/includes/upgrade.php' );
    dbDelta($sql);
}
add_action('after_switch_theme', 'create_custom_table' );

Este código crea la tabla de datos cuando se cambia de tema.

IV. Visualización de formularios en la página

WordPress sugiere pasar el Código corto para llamar al formulario y poder incrustarlo en cualquier página.

function custom_form_shortcode() {
    function custom_form_shortcode() { ob_start(); ?
    El siguiente es un ejemplo de formulario personalizado. 
    
       .
      
      
    </form
    <?php
    return ob_get_clean();
}
add_shortcode('custom_form', 'custom_form_shortcode');

Insertar en la página [custom_form] Se puede visualizar el formulario.

V. Cómo consultar los datos enviados

Inicie sesión en phpMyAdmin o en la herramienta de gestión de bases de datos y busque el archivo wp_custom_form para ver los datos enviados.

Si desea verlo en el backend, puede escribir una simple página de administración con la función $wpdb->get_results() Saca los datos y muéstralos.

VI. Recomendaciones de seguridad y optimización

Filtrado y validación de datos
- hacer uso de desinfectar_*() para limpiar los datos de entrada.
- Validación periódica de campos especiales como los buzones de correo.
Prevención de ataques CSRF
WordPress ofrece wp_nonce_field() junto con check_admin_referer() para asegurar la solicitud.
Paginación y restricciones
- Añada límites de frecuencia a los envíos de formularios para evitar el spam.
- Realice la paginación al mostrar los datos para evitar una carga lenta en segundo plano.
Considere el uso de AJAX
Los formularios pueden enviarse a través de AJAX, una combinación de tecnologías que se utiliza para crear aplicaciones web con mayor capacidad de respuesta y que permite refrescar la página sin necesidad de actualizarla, lo que mejora la experiencia del usuario.

VII. Resumen

Los pasos básicos para crear un formulario HTML y conectarse a una base de datos en WordPress incluyen:Escribir estructuras de formularios HTML > Obtener y procesar datos en PHP > Utilizar el $wpdb Escribir en base de datos > Mostrar formulario en frontend con shortcode.

En comparación con el enfoque de plug-in, los formularios personalizados son más flexibles y pueden satisfacer con precisión las necesidades del proyecto. Aunque la cantidad de código es ligeramente mayor, la libertad y el control que aporta merecen la inversión.

Una vez que domine este proceso, podrá ampliar fácilmente las funciones de su sitio web, como la personalización del sistema de inscripción, la recogida de cuestionarios, la gestión de la información de los miembros, ¡y muchas más posibilidades para su sitio web!

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres