En esta guía aprenderás a crear un formulario de contacto con el plugin WP Fluent Forms.
Fluent Forms ofrece una versión gratuita que cubre muchas necesidades habituales. Es flexible y permite construir formularios con un editor visual. Repasaremos sus funciones principales y crearemos un formulario en WordPress paso a paso.
Instalar el plugin en WordPress
Primero, entra en Plugins y selecciona Añadir nuevo, como se muestra en la captura:
En la siguiente pantalla, escribe «wp fluent forms» en el campo Buscar plugins. Cuando aparezca el plugin correspondiente, pulsa Instalar ahora.
Al terminar la instalación, el botón cambiará a Activar. Púlsalo para empezar a utilizar el plugin.
Nota: si contrataste nuestros planes de mantenimiento, que incluyen la versión Pro, no necesitas instalar Fluent Forms por tu cuenta.
Nuestro primer formulario
Con el plugin activado, ya podemos crear el formulario.
Selecciona New Form —nuevo formulario— en la sección de Fluent Forms del menú de WordPress. Los nombres de las opciones pueden variar según el idioma y la versión instalados.
La primera ventana permite elegir una plantilla de la biblioteca. Las plantillas ahorran tiempo, pero en esta guía empezaremos desde cero para conocer el proceso y poder crear después cualquier formulario que necesitemos.
Selecciona New Blank Form, es decir, un formulario en blanco.
A continuación, se abrirá el editor.
Lo primero es asignar un nombre al formulario para distinguirlo de los que crees después. Ese nombre te ayudará a identificarlo al insertarlo en el sitio.
Haz clic en la zona señalada en naranja:
En la ventana que se abre, escribe el nombre que prefieras. Pulsa el botón azul Rename para guardar el cambio.
Las flechas verdes explican cómo usar el editor: los campos se añaden arrastrando y soltando elementos, de forma similar a otros editores visuales. Los elementos que utilizaremos están señalados en naranja en esta captura:
Son los campos generales, los más habituales en un formulario: nombre, correo electrónico y texto, por ejemplo, para comentarios o consultas. También hay opciones avanzadas, pero empezaremos por Name Fields, el elemento de nombre y apellido.
Arrástralo al área del formulario:
Al soltarlo, los campos de nombre y apellido aparecerán en el formulario, que hasta ahora estaba vacío.
También se abrirá su panel de configuración. Allí puedes modificar la etiqueta de esta sección: por ejemplo, cambiar «Name» por «Nombre».
Conviene adaptar los textos que verán las personas al completar el formulario. Despliega las opciones señaladas en naranja:
En estas opciones puedes cambiar las etiquetas y descripciones. La siguiente captura muestra qué texto del formulario modifica cada ajuste:
En este ejemplo, haremos obligatorios el nombre y el apellido. Si marcas un campo como Required, el formulario no podrá enviarse mientras ese dato esté vacío.
Elige Yes o No junto a «Required» para indicar si el campo es obligatorio.
En Error Message puedes escribir el aviso que se mostrará cuando alguien intente enviar el formulario sin completar ese dato. Un mensaje como «Este campo es obligatorio» suele ser suficiente.
Vuelve a la lista de campos para seguir construyendo el formulario:
Añadamos ahora un campo para el correo electrónico. El procedimiento es el mismo: arrastra y suelta el elemento correspondiente.
Coloca Email Address debajo del nombre y el apellido. El resultado será el siguiente:
Haz clic en el campo para personalizarlo:
Escribe las etiquetas y los mensajes que quieras mostrar:
Repite el proceso para añadir los demás campos y ajustar su configuración.
Cuando el formulario tenga todo lo necesario, pulsa Save Form para guardar los cambios.
Evita pedir más datos de los necesarios. Un formulario demasiado largo puede hacer que algunas personas lo abandonen antes de enviarlo. Piensa qué información necesitas realmente para responder a una consulta, gestionar un registro o recibir un comentario. Cuanto más sencillo sea completar el formulario, más fácil será utilizarlo.
El siguiente paso es insertarlo en tu sitio.
Cada formulario recibe un shortcode: un código breve que WordPress utiliza para mostrar un elemento dentro de una página o entrada.
Localiza el shortcode de tu formulario:
Al hacer clic en la zona indicada, se copiará un código similar al siguiente al portapapeles:
La X representa el número identificador de tu formulario.
Pega el código en un bloque Shortcode de WordPress o en el elemento de shortcode del constructor que utilices. Así podrás mostrar el formulario en la página o entrada que necesites.
Si tienes dudas, puedes contactarnos. Estamos para ayudarte.
Recuerda que Fluent Forms Pro está incluido en nuestros planes de mantenimiento.
Ya tienes las bases para crear tus propios formularios. Antes de publicarlos, revisa los campos, el mensaje de confirmación y la recepción de las notificaciones.