Web Hosting
blog-crear-formularios-contacto-wordpress

Crear formularios de contacto en WordPress

En esta guía te enseñaremos cómo crear con mucha facilidad un poderoso formulario de contacto mediante el plugin WP Fluent Forms

Hay excelentes razones para emplear WP Fluent Forms: además de satisfacer la mayoría de las exigencias en su versión gratis, es flexible, fácil y poderoso. En esta nota veremos sus puntos más fuertes, además de que te vamos a enseñar a crear un formulario en WordPress paso a paso.

Instalando un nuevo plugin en tu WordPress

Primero, por favor dirígete a Plugins y haz clic en Añadir nuevo como te mostramos en la captura inferior:

Crear formularios de contacto en WordPress 1

En la pantalla siguiente, puedes emplear el buscador de Plugins para instalarlo rápidamente. Escribe ‘wp fluent forms’ en el campo de la Palabra clave y aguarda a que WordPress te devuelva el plugin correcto. Haz clic en Instalar ahora.

Crear formularios de contacto en WordPress 2

Una vez instalado, presiona de nuevo en el botón (cambiará de ‘Instalar ahora’ a ‘Activar’).

Crear formularios de contacto en WordPress 3

Nota: no es necesario instalar el plugin Fluent Form si has contratado nuestro plan de hosting con WordPress Administrado pues incluye la versión completa PRO.

Nuestro primer formulario

Una vez activado el plugin ya podemos comenzar a crear nuestro nuevo formulario.

Para ello, haz clic en la opción ‘New Form’ (nuevo formulario) en el apartado correspondiente de tu menú de herramientas de WordPress.

Crear formularios de contacto en WordPress 4

La primera ventana emergente que veremos nos permite escoger de entrada una plantilla (template en inglés). Si bien esto es útil y nos permite ahorrar tiempo, el motivo de esta guía es justamente aprender a realizar un formulario por nuestra cuenta. Crear uno nuevo de cero es la manera de familiarizarse con la práctica de modo que podamos crear cuantos formularios necesitamos y de la manera exacta en que lo necesitamos.

Por eso, haremos clic en ‘create a blank form‘ (ó crear un formulario en blanco),

Crear formularios de contacto en WordPress 5

Tras un mensaje de éxito, veremos la siguiente pantalla.

Crear formularios de contacto en WordPress 6

Lo primero que haremos es darle un nombre a nuestro formulario para indentificarlo de otros que quizás eventualmente creemos. Es también el nombre con que lo invocaremos en nuestro sitio.

Hagamos clic en el enlace aquí señalado con naranja:

Crear formularios de contacto en WordPress 7

Tras cliquear sobre el área indicada, una ventana emergente nos permitirá colocar el nombre que querramos. No olvidemos dar clic en el botón azul de «Rename» para guardar los cambios.

Crear formularios de contacto en WordPress 8

Las indicaciones en verde con sus flechas son instrucciones visuales que nos brinda este plugin: nos está comunicando que la manera de crear un formulario es arrastrando y soltando elementos (para aquellos que estén familiarizados con Elementor, Gutenberg o símil, esto funciona igual). ¿Qué elementos usaremos? Pues aquellos que te marcamos con un rectángulo naranja.

Crear formularios de contacto en WordPress 6

Los elementos marcados en naranja conforman lo que en Fluent Forms se consideran elementos generales (los más usados, o típicos de un formulario). Por ejemplo: campo para ingresar Nombre, Correo, un Texto Simple (por ejemplo, un comentario que nuestras visitas deseen completar, o una especificación). Vemos también  que existen otras opciones más avanzadas, pero empecemos por el principio: vamos a arrastrar y soltar nuestro primer elemento, Name Fields (campo para Nombre y Apellido).

Así:

Crear formularios de contacto en WordPress 10

Tras soltar, vemos que nuestros campos para Nombre y Apellido se han añadido a la plantilla (hasta recién vacía) de nuestro nuevo formulario.

Además de eso, se nos habilita una ventana para configurar mejor nuestro formulario. Por ejemplo, es posible cambiar la identificación de esta sección, que al momento se denomina ‘Name’, por ‘Nombre’ reescribiendo en el campo señalado debajo.

Crear formularios de contacto en WordPress 11

Más importante aún es traducir al castellano los campos que eventualmente completarán nuestros visitantes. Despleguemos las opciones correspondientes según te señalamos con naranja en la captura inferior.

Crear formularios de contacto en WordPress 12

Desplegadas estas opciones, podremos modificar a gusto la descripción de los campos que verán nuestras visitas al ingresar al formulario para contactarse con nosotros. En la siguiente captura te marcamos los campos y sus influencias correspondientes en nuestro formulario.

Crear formularios de contacto en WordPress 13

Consideramos que los campos de Nombre y Apellido son obligatorios. Cada vez que tildamos una opción como ‘Required‘ (requerida), impediremos el envío del formulario cuando nuestro usuario eventual NO completa dicho campo.

Podemos decidir qué campos son obligatorios o no simplemente tildando yes o no (sí o no) junto a la opción ‘Required‘.

En el campo ‘Error Message‘ podemos escribir un mensaje personalizado, el mismo que recibirá la persona que pretende enviar el formulario sin haber completado dicho campo. En el ejemplo, nos basta con informarle que dicha información es requerida (‘campo requerido’).

Crear formularios de contacto en WordPress 14

Tras este paso, volvamos a concentranos en las herramientas disponibles para continuar añadiendo campos.Hagamos clic en el enlace señalado debajo:

Crear formularios de contacto en WordPress 15

¿Les parece que añadamos un campo para que nuestras visitas puedan ingresar su dirección de correo electrónico? Desde ya, eso es importante. Lo haremos arrastrando y soltando de nuevo.

Crear formularios de contacto en WordPress 16

Soltando el elemento ‘Emal Address’ debajo de los campos de Nombre y Apellido, el resultado será el siguiente:

Crear formularios de contacto en WordPress 17

Vamos a personalizar el campo haciendo clic aquí:

Crear formularios de contacto en WordPress 18

Entonces tipearemos según corresponda:

Crear formularios de contacto en WordPress 19

Repitiendo estas operaciones es la manera en que podemos añadir campos adicionales y personalizarlos a gusto.

Cuando estemos satisfechos con nuestro formulario, teniendo todos los campos que necesitemos que nuestros usuarios completen, haremos clic sobre el botón ‘Save form’.

Crear formularios de contacto en WordPress 20

Nota importante: puede resultar tentador realizar un formulario muy completo para recabar la mayor cantidad posible de datos sobre nuestros usuarios/clientes. No obstante, existe una relación indirecta entre la cantidad de usuarios que completan un formulario y el largo del mismo. Es decir: cuantos más datos le solicitemos a nuestras visitas, mayor es la probabilidad de que no completen la información. A esto se le llama ‘rebote’, y es indeseado. Por eso, te recomendamos pensar realmente cuáles son los datos esenciales reales que se necesitan para una base de datos de clientes, para un registro o para un mero comentario sobre nuestro sitio. Menos siempre puede ser más.

Sigamos:

Todos los formularios creados serán asignados con un código de identificación, y lo que se denomina un ‘shortcode’. El shortcode (o ‘código abreviado’) es la manera en que WordPress nos permite ‘invocar’ algún elemento en cualquier parte de nuestro sitio (en este caso, el elemento es el formulario creado).

Ubiquemos el shortcode de nuestro formulario:

Crear formularios de contacto en WordPress 21

Haciendo clic sobre el área señalada en la captura superior automáticamente nos copiará el shortcode (es decir, [fluentform id=»1″]) al portapapeles de nuestro sistema operativo.

Gracias a ese shortcode, podremos ‘pegar’ nuestro formulario allí donde lo necesitemos (ya sea dentro de un elemento HTML en Gutenberg, Elementor, o bien sobre el código HTML mismo).

Si les surge alguna duda, por favor no duden en escribirla en los comentarios. Estamos para ayudarles.

Recuerden que el plugin Fluent Form en su versión PRO está incluida en nuestro plan de hosting con WordPress Administrado.

Esperamos que hayan disfrutado de la guía y aprendido de ella para poder realizar sus propios formularios a partir de ahora. Gracias por leer.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *