¿Cómo hacer un formulario personalizado en WordPress?

Formulario de contacto wordpress

Lamentablemente, no existe una fórmula mágica para el diseño perfecto de un formulario. Los formularios son demasiado diversos para una solución simple. Sin embargo, puede investigar los diseños que mejoran las tasas de conversión y aplicar esos mismos principios.

Formidable incluye diseños de campo incorporados como parte del constructor de formularios de WordPress. Te permiten construir diseños de filas y columnas de forma sencilla y rápida.Formidable Forms es el mejor plugin para construir formularios en WordPress. ¡Consíguelo gratis!

Estos campos de formulario son amigables con los móviles y responsivos, por lo que se ajustarán dependiendo del tamaño de la pantalla. En pantallas pequeñas el diseño del formulario se reorganizará automáticamente en una sola columna de campos de ancho 100% para mantener la usabilidad. Esto es automático y no requiere ninguna configuración.

Para obtener una lista completa de las clases de diseño CSS disponibles y sus funciones, consulte nuestro artículo de la base de conocimientos sobre diseño de formularios. Si utilizas el complemento de Bootstrap, también puedes utilizar las clases de diseño de formularios de Bootstrap para obtener aún más opciones de diseño de formularios personalizados.

Cuando utilices secciones para el diseño de formularios, aplica las clases de diseño CSS a las secciones, en lugar de a los campos individuales. Además, cuando utilice secciones, establezca la Posición de la etiqueta en Ninguno, a menos que desee que se muestre un encabezado.

Formulario de contacto de WordPress sin plugin

Paso 1: Crear la plantilla de páginaEl primer paso es crear una plantilla de página. Para ello, copiamos el código de page.php en un nuevo archivo llamado page-contact.php.Tenemos que añadir un comentario al principio del archivo contact.php para asegurarnos de que WordPress tratará el archivo como una plantilla de página. Este es el código:<?php

<?php get_footer() ?>Paso 2: Construir el formularioAhora, tenemos que crear un simple formulario de contacto. Simplemente pega el siguiente código dentro del div de contenido de la entrada.<form action=”<?php the_permalink(); ?>” id=”contactForm” method=”post”>

</form>Nada difícil con este código html bastante autoexplicativo para nuestro formulario. Fíjate en el input type=”hidden” que he añadido en la línea 19: se utilizará más tarde para comprobar si el formulario ha sido enviado.Paso 3: procesamiento de datos y gestión de erroresNuestro formulario tiene muy buena pinta, pero justo es muy inútil porque no envía ningún correo electrónico. Lo que tenemos que hacer es verificar si el formulario ha sido enviado y luego verificar si los campos han sido rellenados correctamente.Si los campos están correctamente rellenados, obtendremos el correo electrónico del administrador del blog y le enviaremos el correo electrónico. En caso contrario, no se enviará ningún correo electrónico y se mostrarán los errores al usuario.Pega el siguiente código entre la declaración de la plantilla de la página y la función get_header():<?php

Formulario personalizado de WordPress guardar en la base de datos

</form> Ten en cuenta, sin embargo, que el botón de envío tiene un atributo name que usaremos más adelante para asegurarnos, en PHP, de que una entrada del formulario ha sido enviada y necesita ser procesada.InformaciónEl método POST es más habitual para mí, pero si quieres enviar tus datos en GET, no te preocupes siempre que cambies el resto del código en consecuencia.Mejorando este formulario con la magia de PHP y WordPress<form action=”#” method=”POST” class=”comment-form”>.

</form> La idea aquí es aprovechar la potencia de WordPress para asegurar el uso de nuestro formulario con nonces. La función wp_nonce_field() permite comprobar que el contenido de una petición de formulario proviene del sitio actual, y no de otro sitio. Por lo tanto, no es una protección perfecta, pero protege en muchos casos.Su primer argumento representa una acción, el segundo argumento representa un nombre. Estas dos palabras se reutilizan un poco más tarde en nuestro código para comprobar si el nonce recibido corresponde a estos dos argumentos.ImportanteEs muy importante incluir campos nonce en sus formularios de WordPress: “los nonces se pueden utilizar para verificar que un usuario tiene la intención de realizar una acción, y es fundamental para protegerse contra la falsificación de solicitudes en sitios cruzados (CSRF)”.Interceptación de datos con la acción de redirección de la plantilla y la comprobación de seguridad del formularioCentrémonos en la lógica de procesamiento del formulario: dejamos la plantilla para ir al archivo functions.php con el fin de procesar los datos recibidos.<span> function traitement_formulaire_don_cagnotte() {

Formularios de WordPress

La primera línea del método constructor es para enganchar la función init de WordPress. Esto es útil para interceptar los disparos $_GET o $_POST porque init() se ejecuta después de que WordPress haya terminado de cargar pero antes de que se envíe cualquier cabecera. Por lo tanto, aquí es donde vamos a procesar los envíos de nuestros formularios.

En la segunda línea estamos registrando un shortcode que pondremos en las páginas para mostrar nuestro formulario. En este ejemplo el shortcode es ‘custom_form’. Pondrás [custom_form] donde quieras poner tu formulario personalizado.

Dentro del init() del plugin comprobamos si $_POST[‘nonce_custom_form’] está presente? La presencia de este campo en los datos de $_POST significa que nuestro formulario personalizado está siendo enviado. Así que no hay necesidad de poner ‘action’ para nuestro formulario personalizado, sólo hay que poner algún campo oculto con nombre único y comprobarlo dentro de la función init para interceptar el envío del formulario. A continuación verificamos el nonce por motivos de seguridad. Después de la verificación del nonce validamos los campos del formulario y los procesamos.