Cómo crear un formulario en WordPress sin complementos

Publicado: 2023-07-25

¿Quieres crear un formulario en WordPress sin usar complementos? Los formularios son algunos de los elementos más esenciales y utilizados de un sitio web, y existen varias ventajas de crear uno sin usar complementos.

Por qué crear un formulario en WordPress sin complementos

Hay muchos complementos de formulario de WordPress que puede usar para crear un formulario. Pero crear un formulario en WordPress sin usar complementos puede ser beneficioso por varias razones:

  • Simplicidad y ligereza: evita la sobrecarga adicional que conlleva la instalación y el mantenimiento de complementos cuando crea un formulario sin complementos. Un formulario simple creado con código personalizado puede ser más liviano y eficiente que uno creado con un complemento.
  • Personalización: la creación de un formulario desde cero le brinda un control completo sobre su diseño y funcionalidad. Puede adaptar el formulario para que coincida con las necesidades específicas de su sitio web y personalizarlo en consecuencia.
  • Experiencia de aprendizaje: la creación de un formulario sin complementos puede ser una gran experiencia de aprendizaje para los desarrolladores o usuarios interesados ​​en mejorar sus habilidades de codificación. Llegas a comprender los mecanismos subyacentes del manejo de formularios y el procesamiento de datos.
  • Dependencia reducida: reduce la dependencia de su sitio web del código externo al no depender de complementos. Esto puede ser útil si desea minimizar los posibles riesgos de seguridad o los conflictos que surgen del uso de varios complementos.
  • Rendimiento: los formularios codificados a medida pueden proporcionar un mejor rendimiento y velocidad para su sitio web, ya que son livianos en comparación con los complementos. Estos formularios personalizados solo incluyen las funciones que necesita y no tienen las funcionalidades adicionales proporcionadas por complementos que no puede utilizar.
  • Flexibilidad: los formularios personalizados ofrecen una mayor flexibilidad para integrarse con otras partes de su sitio web o tipos de publicaciones personalizadas. Puede ampliar la funcionalidad del formulario en función de sus requisitos únicos.
    Claro, la mayoría de los complementos brindan opciones similares usando los códigos cortos. Pero con los formularios codificados a medida, puede agregarlos a ubicaciones específicas en el sitio web según cómo desee mostrarlos.

Cómo crear un formulario en WordPress sin complementos

Hay muchos tipos de formularios que puede crear en WordPress sin usar los complementos. Pero un formulario de contacto es uno de los más esenciales y populares. Así que le mostraremos cómo crear un formulario de contacto en este tutorial.

Antes de comenzar , esperamos que tenga una comprensión básica de la programación, ya que utilizaremos lenguajes de secuencias de comandos y lenguajes de marcado como HTML y PHP. Si no tienes los conocimientos necesarios para ello, te recomendamos que pidas la ayuda de un programador para que te ayude a crear un formulario.

Para crear un formulario de contacto en WordPress, primero debe crear una página de contacto. Así que empecemos con eso.

1) Crear una página para el formulario

Vaya a Páginas > Agregar nuevo desde su tablero de WordPress.

Esto abrirá el editor de páginas, donde puede ingresar el título de la página y la descripción adicional necesaria además del formulario de contacto real. Pero si lo único que necesita en esta página es un formulario, podemos continuar y crear el formulario directamente.

2) Agregar código HTML para formulario en el editor

 Ahora, vaya a su editor de código haciendo clic en Opciones (tres puntos verticales) > Editor de código en la parte superior izquierda de su pantalla. Luego, agregue un código HTML para el formulario en el editor. Puede agregar los campos de formulario necesarios según el siguiente código. 
<método de formulario="publicar">
  <etiqueta para="nombre">Nombre:</etiqueta>
<tipo de entrada="texto" nombre="nombre" requerido="">

<etiqueta para="correo electrónico">Correo electrónico:</etiqueta>
<tipo de entrada="correo electrónico" nombre="correo electrónico" requerido="">

<label for="mensaje">Mensaje:</label>
<textarea name="mensaje" requerido=""></textarea>

<tipo de entrada="enviar" valor="Enviar">
</formulario>

Este código lo ayudará a crear un formulario de contacto simple en WordPress. Pero puede modificarlo fácilmente para crear el formulario que desee en su sitio web de WordPress.

Después de agregar todos los campos de formulario necesarios al código, haga clic en Publicar o Actualizar para guardar los cambios en la página de contacto.

código html crear un formulario en wordpress

Si obtiene una vista previa de la página, puede ver el formulario que acaba de crear. Pero para que el formulario funcione y extraer datos de él, también debe manejar los envíos de formularios. Entonces, tenemos que crear una base de datos para los envíos de formularios después de esto.

página de vista previa del formulario crear un formulario en wordpress

3) Crear una tabla de base de datos para el envío de formularios

Para crear una base de datos para el envío de formularios, puede utilizar una herramienta de gestión de bases de datos como phpMyAdmin. Puede acceder iniciando sesión en su cPanel. Si no tiene las credenciales necesarias, le recomendamos que se comunique con su servicio de alojamiento o con el propietario del sitio.

Ahora, desplácese hacia abajo hasta la sección Base de datos y haga clic en phpMyAdmin . Esto abrirá el panel de control de phpMyAdmin, donde podrá ver todas las bases de datos de su sitio web.

Expanda la tabla de la base de datos de su sitio web y desplácese hasta la parte inferior de la página, donde puede crear una nueva tabla de base de datos. Aquí, ingrese el nombre de la tabla como " wp_contact_form_submission " y haga clic en Ir para crear la nueva tabla.

Luego, debe ingresar los campos de datos para los campos de formulario en las columnas de la tabla y sus tipos. De acuerdo con el formulario que acabamos de crear, agregaremos los siguientes nombres y tipos de columna:

  • nombre: TEXTO
  • correo electrónico: TEXTO
  • mensaje de texto
  • hora_de_envío: FECHA Y HORA

Finalmente, haga clic enGuardar para guardar los cambios en la tabla de la base de datos.

Hemos nombrado la tabla de la base de datos según el formulario de contacto que creamos. Entonces puede cambiar el nombre de la tabla según el formulario que creó inicialmente. Del mismo modo, si ha utilizado diferentes campos de formulario en su formulario, puede agregar las columnas correspondientes.

4) Agregar código para manejar envíos de formularios

Después de crear la base de datos, aún debe agregar un conjunto de códigos para manejar los envíos de formularios en el archivo de funciones del tema de su sitio web.

Pero le recomendamos que haga una copia de seguridad de su sitio web antes de continuar, ya que editaremos algunos de los archivos principales del sitio web. Y cualquier cambio involuntario podría generar más problemas en su sitio web. Puede consultar nuestra guía detallada sobre cómo hacer una copia de seguridad de un sitio web de WordPress si necesita ayuda.

4.1) Acceder al archivo de funciones del tema

Vaya a Apariencia > Editor de archivos de temas desde su panel de control de WordPress para acceder al archivo de funciones del tema. Aquí encontrará todos los archivos de temas principales de su sitio web. Luego seleccione el archivo Theme Functions ( functions.php) en el lado derecho de su pantalla, donde agregaremos el código.

página de código de envío de formulario crear un formulario en wordpress

4.2) Agregue el código al editor de archivos de temas

Puede usar lo siguiente para manejar el envío de formularios en su sitio web. Así que agregue el siguiente código al final del editor.

 if ($_SERVIDOR["SOLICITUD_MÉTODO"] === "POST") {
  $nombre = sanitize_text_field($_POST["nombre"]);
  $correo electrónico = sanitize_email($_POST["correo electrónico"]);
  $mensaje = sanitize_textarea_field($_POST["mensaje"]);

  // Agregar código para guardar los datos del formulario en la base de datos
  global $wpdb;
  $nombre_tabla = $wpdb->prefijo. 'contact_form_submissions';
  $datos = matriz(
    'nombre' => $nombre,
    'correo' => $correo,
    'mensaje' => $mensaje,
    'submission_time' => current_time('mysql')
  );
  $insert_result = $wpdb->insert($table_name, $data);

  si ($insertar_resultado === falso) {
    $respuesta = matriz(
      'éxito' => falso,
      'mensaje' => 'Error al guardar los datos del formulario.',
    );
  } demás {
    $respuesta = matriz(
      'éxito' => verdadero,
      'mensaje' => 'Los datos del formulario se guardaron correctamente.'
    );
  }

  // Devolver la respuesta JSON
  header('Tipo de contenido: aplicación/json');
  echo json_encode($respuesta);
  salida;
}

Este código almacenará los datos del formulario ingresados ​​desde el formulario en la tabla de la base de datos de envío de formularios que acabamos de crear. También hemos incluido una respuesta JSON para asegurarnos de que haya agregado los nombres y campos correctos de la tabla de la base de datos en su formulario cuando edite el código. Puede eliminarlo después de que los datos del formulario se almacenen correctamente en la base de datos.

Simplemente haga clic en Actualizar archivo después de haber realizado todos los cambios necesarios en el código.

5) Mostrar envíos de formularios en su tablero

Una vez que los datos del formulario se almacenan en la base de datos, puede crear el menú de su tablero para ver los envíos del formulario. Así que incluiremos un código para mostrarlo también.

Puede agregar el siguiente código al archivo de funciones del tema ( funtions.php), al igual que en el paso anterior.

 función display_contact_form_submissions_page() {
  global $wpdb;
  $nombre_tabla = $wpdb->prefijo. 'contact_form_submissions';
  $form_data = $wpdb->get_results("SELECT * FROM $table_name WHERE nombre <> '' Y correo electrónico <> '' Y mensaje <> '' ORDEN POR tiempo_de envío DESC", ARRAY_A);

  ?>
  <div clase="envolver">
    <h1>Envíos de formularios de contacto</h1>
    <table class="wp-list-table widefat fijo rayado">
      <cabeza>
        <tr>
          <th>Nombre</th>
          <th>Correo electrónico</th>
          <th>Mensaje</th>
          <th>Tiempo de envío</th>
        </tr>
      </thead>
      <tbody>
        <?php foreach ($form_data como $datos) : ?>
          <tr>
            <td><?php echo esc_html($datos['nombre']); ?></td>
            <td><?php echo esc_html($datos['correo']); ?></td>
            <td><?php echo esc_html($datos['mensaje']); ?></td>
            <td><?php echo esc_html($data['submission_time']); ?></td>
          </tr>
        <?php endforeach; ?>
      </tbody>
    </tabla>
  </div>
<?php}

función register_contact_form_submissions_page() {
  agregar_menu_pagina(
    'Envíos de formularios de contacto',
    'Envíos de formularios',
    'manejar_opciones',
    'contact_form_submissions',
    'display_contact_form_submissions_page',
    'retroalimentación de dashicons'
  );
}
add_action('admin_menu', 'register_contact_form_submissions_page');

Una vez más, haga clic en Actualizar archivo después de pegar y editar el código de acuerdo con el formulario y la tabla de la base de datos que creó.

Ahora, si va a su panel de control de WordPress, podrá ver un menú de " Envíos de formularios de contacto ". Esto mostrará todos los envíos de formularios del formulario que creó inicialmente.

mostrar la página de envío de formularios crear un formulario en wordpress

Opciones de depuración para mostrar envíos de formularios

Si no puede ver los datos del formulario, le recomendamos que agregue un código para la salida de depuración y una consulta SQL en el código. Puedes agregar los códigos var_dump($form_data); y var_dump($wpdb->last_query); respectivamente después de la consulta.

Entonces el código puede verse así:

 función display_contact_form_submissions_page() {
  global $wpdb;
  $nombre_tabla = $wpdb->prefijo. 'wp_contact_form_submissions';
  $form_data = $wpdb->get_results("SELECT * FROM $table_name ORDER BY submit_time DESC", ARRAY_A);

  var_dump($formulario_datos); // Salida de depuración
  var_dump($wpdb->last_query); // Depurar consulta SQL

  ?>
  <!-- Resto del código... -->
  <?php
}

Según el informe de depuración, puede editar más los códigos para asegurarse de que los datos del formulario se muestren correctamente. Pero también puede revisar los puntos de la siguiente sección para asegurarse de que no ha habido ningún error en el código que utilizó.

Consideraciones esenciales para crear un formulario personalizado eficiente

Estos son algunos factores que debe tener en cuenta al editar los códigos para crear su formulario personalizado . Pueden ser útiles si encuentra algún error durante el proceso.

  • Verifique la base de datos: asegúrese de que los datos del formulario se guarden correctamente en la tabla correcta. Para este tutorial, es la tabla 'wp_contact_form_submissions'.
  • Verifique si hay errores: Verifique sus registros de errores de PHP o habilite el informe de errores para ver si hay algún error relacionado con el envío del formulario o la visualización de datos. Los errores pueden proporcionar pistas sobre lo que podría estar fallando.
  • Verifique el proceso de envío del formulario: asegúrese de que los datos del formulario se envíen correctamente y que el código PHP para guardar los datos del formulario se ejecute sin errores. Compruebe si los datos del formulario se pasan correctamente al código PHP cuando se envía el formulario.
  • Verifique el nombre de la tabla: Vuelva a verificar que el nombre de la tabla utilizado en la función 'display_contact_form_submissions_page()' coincida con el nombre real de la tabla en la base de datos. Asegúrese de que sea 'wp_contact_form_submissions' o ajuste el nombre de la tabla de acuerdo con la tabla de su base de datos.
  • Borrar caché: si está utilizando complementos de almacenamiento en caché o almacenamiento en caché del lado del servidor, borre el caché para asegurarse de ver los datos más recientes.
  • Permisos: asegúrese de que el rol de usuario con el que ha iniciado sesión tenga la capacidad 'manage_options' para acceder a la página de administración personalizada. Esta capacidad permite a los administradores acceder a la página de forma predeterminada.

Hemos mencionado un conjunto de códigos para que pueda crear un formulario de contacto en WordPress. Pero debe editar los códigos si desea hacer cualquier otro formulario o un formulario alternativo con diferentes campos de datos. Entonces, los puntos anteriores también pueden ser útiles para crear su formulario personalizado en WordPress.

Conclusión

Así es como creas un formulario en WordPress sin usar complementos. También puede crear formularios usando complementos. Sin embargo, crear un formulario personalizado tiene muchas ventajas si tiene conocimientos básicos de programación.

Puede crear fácilmente un formulario con los conjuntos básicos de códigos que hemos incluido en este tutorial. Para resumir, estos son los pasos básicos para construir uno efectivo:

  • Agregue el código para el formulario en el editor de páginas.
  • Crear una base de datos para envíos de formularios
  • Agregue los códigos necesarios para manejar los envíos de formularios y mostrarlos

Esperamos que ahora pueda crear con confianza un formulario en su sitio web utilizando los códigos mencionados en este tutorial. Puede editarlos para incluir campos de formulario adicionales, según sus necesidades. Si encuentra algún problema, incluso hemos agregado algunas opciones de depuración y factores a considerar al crear un código personalizado en WordPress.

Entonces, ¿alguna vez has intentado crear un formulario en WordPress sin un complemento?

Háganos saber en los comentarios a continuación.

Mientras tanto, no dude en consultar los siguientes artículos para ayudarlo a mejorar y personalizar su sitio web de WordPress.

  • Cómo personalizar el formulario de registro de WooCommerce
  • ¿El formulario de contacto de Divi no funciona? ¡Aquí está cómo solucionarlo!
  • Cómo agregar un formulario emergente a WordPress