Fecha: 01/04/2021

Como crear un formulario con WPForms en WordPress [GUÍA COMPLETA]

Si has entrado a este post seguramente quieras crear un formulario de contacto para tu página web de la manera más sencilla posible.

Pues estás de suerte porque es precisamente lo que te voy a enseñar en este artículo.

Vamos a crear un formulario de contacto de manera gratuita con el plugin WPForms para WordPress. Además que te enseñaré a como añadirlo a WordPress y Elementor para que se muestre en tu página.

 

Instalación de WPForms

En tu instalación de WordPress vete a plugins y pulsa el botón añadir nuevo. En la ventana te aparecerán un montón de plugins para instalar de WordPress. En el buscador busca WPForms y cuando te aparezca dale a instalar ahora.

Instalar WPForms

Una vez se termine de instalar, pulsa a activar y cuando esté listo te llevará a la página de configuración del plugin donde te aparecerá una ventana preguntándote para hacer el tutorial del plugin. Nosotros lo vamos a cerrar porque para eso está esta guía 😉.

 

Ventanas gratuitas de WPForms

  • Añadir nuevo: Crear un nuevo formulario
  • Todos los formularios: Muestra todos los formularios con el shortcode para insertar en una página o post de WordPress. También nos permite eliminar varios formularios a la vez
  • Ajustes: Los ajustes generales del plugin
  • Herramientas: Importar y exportar formularios. Ventanas para mostrar información de la instalación
  • Analíticas: Extensión de WPForms para integrar el formulario con Google Analytics
  • SMTP: Sirve para poder enviar correos a través de un proveedor de confianza

 

Crea un formulario

Pulsamos WPForms en el menú de WordPress y nos vamos a añadir nuevo. Introducimos el nombre del formulario.

Ahora selecciona la plantilla para empezar un formulario con una base. Entre esas plantillas tenemos:

  • Formulario en blanco: formulario vacío
  • Formulario de contacto simple: formulario con el correo, nombre y mensaje
  • Formulario de registro al boletín:: formulario con el nombre y el correo

También puedes instalar una extensión para WPForms que te viene con más plantillas. Y si pagas la versión pro podrás acceder a más plantillas que usen campos premium.

Plantillas de WPForms

Cuando termines de seleccionar plantilla te llevará al apartado de campos para que puedas ver una vista previa de tu formulario. Si quieres añadir algún campo extra simplemente arrastra un campo del menú de la izquierda a la ventana de la derecha con la vista previa del formulario.

Vista previa de WPForms

 

Campos de formulario

Ahora te voy a explicar cada parte de la configuración de los campos de WPForms para que tengas la base de crear formularios de contacto personalizados. Dentro de las opciones de cada campo tenemos la opción básica que siempre estará a la vista y las opciones avanzadas con características únicas a cada campo.

 

Dentro de las opciones básicas podemos cambiar la etiqueta del campo y si queremos podemos añadir una descripción que se añadirá por debajo del campo con una letra pequeña.

También podemos hacer que el campo sea obligatorio para que la gente no deje vacío el campo al enviar un formulario de contacto.

Las opciones básicas se repiten en cada campo por lo que solo te voy a especificar las opciones avanzadas de cada campo

 

Texto de una sola línea

Este campo es un campo especializado para introducir texto.

En las opciones avanzadas podemos seleccionar el tamaño del campo que hará que se expanda horizontalmente dependiendo de la opción escogida.

El texto de marcador sirve para poner un texto dentro del campo que servirá como sugerencia para introducir. No tiene muchas características más que para dar sugerencias

También podemos ocultar la etiqueta del campo que se muestra como título. A la vez que podemos poner un límite a la longitud de texto a introducir en el campo.

En el campo por defecto podemos añadir un valor por defecto que estará introducido en el formulario cada vez que carguemos la página. Esto es útil si quieres poner un valor por defecto para que el campo no se deje en blanco al enviar el formulario.

La máscara de entrada sirve para crear patrones para validar el campo como que la primera letra sea mayúscula o que solo haya letras y no números en el campo.

Opciones básicas del campo de texto

 

Texto del párrafo

Tiene las mismas opciones que el campo de "texto de una sola línea" excepto algunas opciones que no están. Este campo sirve para introducir textos con saltos de línea que requieren mucho más contenido que una sola frase

 

Desplegable

Este campo crea una serie de opciones a elegir. Dentro de las opciones podemos añadir más elementos o eliminar uno. Si seleccionamos un elemento en las configuraciones será el valor por defecto del campo.

Opciones básicas del campo desplegable

En las opciones avanzadas podemos cambiar el tipo para que se puedan escoger múltiples opciones a la vez. En esta ventana se muestran todas las opciones a la vez para escoger.

También podemos cambiar el estilo del desplegable para mostrar un estilo moderno o un estilo clásico. El estilo clásico usa unos estilos que viene predeterminados por el navegador como la flecha del desplegable. En cambio el moderno con unos estilos completamente personalizados.

Opciones avanzadas del campo desplegable

 

Opciones múltiples

Las opciones múltiples nos permite escoger distintas opciones. La diferencia entre este campo y el desplegable es que el desplegable normalmente se usa cuando tenemos muchas opciones. En cambio, las opciones múltiples se usa para pocas opciones que se puedan mostrar en pantalla a la vez.

Opciones básicas del campo opciones múltiples

También podemos hacer que cada opción tenga una imagen en vez de mostrar el estado de cada opción con un círculo relleno.

En las opciones avanzadas podemos hacer que las opciones se muestren en distintas columnas en vez de todas en la misma con la opción de diseño. También podemos hacer que se muestre en fila con la opción "integrado"

Opciones avanzadas del campo opciones múltiples

Si pulsamos respuestas aleatorias se cambiará el orden de cada opción cada vez que recarguemos la página.

Y cambiando las opciones dinámicas podemos hacer que se muestren las opciones basándonos en páginas, posts o taxonomía. Dentro de la taxonomía podemos cambiar por categoría de post o etiqueta.

 

Casillas de verificación

Tiene las mismas opciones que las opciones múltiples a diferencia que podemos seleccionar múltiples opciones a la vez.

 

Números

Este campo sirve para solo añadir números al campo.

Tiene las mismas opciones que el campo de "texto de una sola línea".

 

Nombre

Este es un campo de texto para poner un nombre. El campo en las opciones avanzadas lo podemos dividir en uno solo o en nombre, segundo nombre y apellidos.

Opciones básicas del campo nombre

Para cada campo que hayamos decidido mostrar podemos poner un texto de marcador de posición y un valor por defecto

Opciones avanzadas del campo nombre

 

Correo electrónico

Campo para introducir un correo como su nombre indica. Dentro de sus opciones básicas podemos escoger que aparezca otro campo para confirmar correo electrónico.

Opciones básicas del campo correo

Dentro de las opciones avanzadas podemos ocultar las subetiquetas del campo de correo. Sin embargo no os lo recomiendo si tenéis habilitado el campo de confirmación de correo porque si no no sabremos que significa el segundo campo y esto afecta negativamente la usabilidad.

Opciones avanzadas del campo correo

También podemos crear una lista de correos rechazados o aprobados usando correos literales (correos específicos de personas) o expresiones regulares (código que sirve para filtrar un texto basándonos en un patrón)

 

Número de carrusel

Campo para seleccionar un número basándonos en arrastrar un círculo en una cinta.

Dentro de sus opciones básicas podemos escoger el número mínimo y máximo para seleccionar.

Opciones básicas del campo carrusel

En las opciones avanzadas podemos escoger el valr por defecto que tiene que estar entre los valores mínimo y máximo. En la visualización de valor podemos cambiar el texto que muestra que valor tenemos seleccionado. Y el incremento es en cuanto aumentará cada valor. Si escogemos el dos cada vez que cambiamos el valor lo hará en múltiplos de 2.

Al escoger esto es muy importante que el valor mínimo sea un múltiplo del incremento para que no de errores al escoger valor.

Opciones avanzadas del campo carrusel

 

Captcha

Este es un campo que se utiliza normalmente para evitar el spam automático realizado por bots en los formularios de contacto. Solamente puedes añadirlo al formulario cuando tengas configurado el captcha en los ajustes del plugin.

Para habilitar este campo nos tenemos que ir a los ajustes del plugin e irnos a la pestaña de CAPTCHA. En esta ventana selecciona el tipo de Captcha a usar. Los dos que hay son hCaptcha y reCAPTCHA. Si quieres ver como añadir cada uno entra en la página recomendada de WPForms (inglés) para ver las recomendaciones para añadir cada tipo.

Ajustes WPForms CatpchaAjustes WPForms Catpcha 2

 

Acuerdo RGPD

Este campo es un campo similar a una casilla de verificación para que la persona acepte la política de privacidad y el manejo de los datos personales de la persona.

Opciones básicas del campo RGPD

Para tener habilitado el campo de "Acuerdo RGPD" tenemos que irnos a los ajustes del plugin y en la pestaña general en el apartado RGPD seleccionar "Mejoras para RGPD".

Ajustes WPForms RPGD

 

Ajustes de un formulario

Ahora te voy a explicar los ajustes básicos de la versión gratuita. Para irnos a los ajustes del formulario tenemos que pulsar en ajustes en la barra negra de la izquierda del todo.

 

Generales

En los ajustes generales podemos cambiar el título del formulario a mostrar y crear una descripción del mismo.

También podemos cambiar el botón del texto de enviar y el texto cuando se está enviando el formulario.

Y en las opciones de más abajo podemos activar la protección antispam, la opción del completado dinámico de campo, y el envío del formulario mediante AJAX.

El campo de protección antispam nos permite evitar el spam de un formulario.

La opción del completado dinámico consiste en rellenar información del formulario basándonos en la URL de la página. Si quieres más información entra a la documentación de WPForms, eso sí, está en inglés. Como no quiero alargar mucho este artículo no pongo como configurar esa opción.

Formulario ajustes generales

 

Avisos

En los avisos podemos configurar el formato de los avisos que recibamos cada vez que se rellena un campo de formulario. Dentro de cada opción si pulsamos etiquetas inteligentes podremos rellenar el campo con el contenido de algún campo del formulario

Formulario ajustes avisos

 

Confirmaciones

Las confirmaciones sirven para mostrar un mensaje de confirmación cada vez que se realiza una acción. En la confirmación por defecto se mostrará el mensaje cuando se envíe el formulario.

En el tipo de confirmación podemos mostrar un mensaje, o redireccionar a una página o una URL específica.

Formulario ajustes confirmaciones

 

Añadir formulario a una página

Para añadir formulario a una página de WordPress tenemos que irnos al formulario que queramos añadir y pulsar el botón de incrustar arriba a la derecha.

WPForms incrustar formulario

Ahora selecciona una página existente y selecciona la página a añadir. En el caso que no tengas una página para el formulario. Ahora en WordPress pulsa al botón azul con el signo "+" para añadir un bloque. En la ventana de bloques vete a la sección de widgets y arrastra el widget de WPForms a la página.

Ahora te pedirá WPForms que seleccionemos un formulario. Selecciona el que quieras añadir y con esto ya lo tendrás en tu página de WordPress. Si te has equivocado al seleccionar un formulario, simplemente pulsa en el formulario y en el menú de la derecha, en ajustes de formulario, cambia por el formulario deseado.

WPForms widget

 

Añadir formulario a una página de Elementor

Para añadir un formulario con Elementor nos vamos al editor de Elementor y en el editor nos vamos a la sección de WordPress. En esta sección busca WPForms y arrástralo a la pantalla. Ahora que ya lo tienes en la pantalla selecciona el formulario que quieras añadir a la página.

WPForms Elementor widgetWPForms Elementor configuración

 

Conclusión

Con este artículo ya estás más que preparado para crear tu formulario de contacto de manera gratuita y poder añadirlo a tu página de WordPress.

Si te ha gustado el artículo compártelo en redes sociales, abajo tienes botones para compartir en Twitter y Facebook.

Jefferson Valle

Soy el co-fundador de Indicsa, me especializo en diseño, programación y marketing. También llevo el canal de Youtube de Indicsa donde subo vídeos para cada artículo

Mi pasión es el marketing aunque disfruto de aprender sobre programación y diseño. Me encanta escribir sobre todo lo que voy descubriendo y aprendiendo. Me considero un estudiante de por vida y espero que lo que comparta te sirva de ayuda.

Si quieres estar en contacto conmigo puedes hacer en mi cuenta de Twitter: @rjeffvalle