5 min 19/02/2019

Como diseñador web freelance, me encontré en la tesitura de tener que buscar plugins de formulario para WordPress en muchas ocasiones. Hay muchos, gratuitos y de pago. Incluso la mayoría de los constructores visuales traen un módulo de formulario. Pero todos suelen ser muy simples o muy difíciles de usar.

Para crear mis páginas webs uso Divi, que trae un módulo de formulario de contacto bastante personalizable y que permite añadir varios campos distintos. Incluso tiene la posibilidad de añadir el típico checkbox para la política de privacidad fácilmente.

Pero cuando se requieren funcionalidades extras, como la carga de archivos, la personalización de los campos de Asunto del email o el nombre del remitente, Divi ya no es una opción. En esos casos recurro al que para mi es el mejor y más completo plugin de formulario de WordPress, Caldera Forms.

¿Porqué usar Caldera Forms?

Yo recomiendo usar Caldera Forms por varias cosas:

  • Tiene una variedad de campos muy grande.
  • Se pueden realizar formularios complejos de forma visual, sin necesidad de saber código.
  • Se puede añadir el formulario de contacto creado en cualquier lugar con un shortcode.
  • Tienes la opción de crear formularios con campos condicionales.
  • Está adaptado para la visualización en distintos dispositivos ya que puedes crear distintas columnas para los campos que vas añadiendo.
  • Puedes personalizar el remitente, el campo responder a, el copia oculta, el asunto del email y el cuerpo del email. ¡Casi nada!

Aunque también tiene sus puntos negativos, no vayamos a engañarnos:

  • Para personalizarlo hay que usar CSS. Eso si, a cada campo puedes añadirle una clase fácilmente.
  • Con tantas funcionalidades, el uso se hace un poco complicado en un primer momento.

Como usar Caldera Forms

Lo primero es instalarlo. Está disponible en repositorio oficial de WordPress, Plugins->Añadir nuevo y en buscar plugins pones Caldera Forms. Le das a Instalar ahora y Activar. Vale, ahora ya nos debería aparecer Caldera Forms en el menú.

Para hacer un formulario nos vamos a Caldera Forms->Formularios y ahí pulsamos en Nuevo Formulario.

Nuevo formulario Caldera Forms

Podemos usar alguna de las plantillas predefinas o crear un Formulario vacío. En este punto, cada uno que valore….

Elegir plantillas Caldera Forms

Una vez que le ponemos el nombre, ya nos vamos al editor en sí.

Aquí nos encontramos con una barra con varias opciones:


Diseño

En esta pestaña realizamos el diseño en sí del formulario de contacto. Arrastrando en Añadir campo a donde queremos añadir un nuevo campo, nos aparece una lista con la multitud de campos que podemos añadir.

Añadir un nuevo campo Caldera Forms

Sobra la descripción ya que cada uno de ellos tiene una descripción lo suficientemente clara.

Campos de Caldera Forms

Una vez seleccionado el campo, nos aparece en el lateral derecho todas las opciones disponibles para ese campo en sí ( nombre, ocultar etiqueta, slug, condición, requerido, descripción, etc). Cabe destacar la opción de poner una clase en cada campo, algo muy interesante para darle estilo con CSS.

Ajustes de campo de Caldera Forms

En cada columna podemos poner un solo campo o podemos poner dos, por ejemplo Nombre y Apellidos sería un buen ejemplo de ponerlos en la misma línea. Sí, tranquilos, en la versión móvil se ponen en distintas líneas si configuras la opción Adaptabilidad.

Dividir filas Caldera Forms

Por cierto, no os olvidéis de incluir un botón de Enviar, parece lógico, pero como no lo añade por defecto es mejor aclarar.

Fijaos que al lado de Añadir campo hay otro botón para Añadir página y crear formularios donde haya que ir cubriendo en distintos pasos. ¡Completo al máximo!

Email

Aquí tenemos todas las opciones de configuración de lo que es el email en sí. Podemos personalizar el Remitente, el Email del remitente, Responder al email, Recipientes de correo electrónico ( a quien se envía el email ), CCO, Asunto del email y el Mensaje del Email. Y lo mejor de todo es que podemos usar datos introducidos en el propio formulario usando etiquetas magic. Las etiquetas magic son del tipo %id%, donde id es el nombre del campo puesto en el diseñador.

Personalizar emails Caldera Forms

Por ejemplo, si en el campo Responder al email queremos poner el email introducido en el contacto ponemos %email%, donde email tiene que ser Nombre del campo puesto en el diseño. ¡Qué maravilla!

Procesadores

En esta pestaña podemos añadir ciertas funcionalidades que permiten que el formulario procese algo después de que un usuario envíe un formulario. Por ejemplo para procesar un pago (necesitarás complementos adicionales para usar esta opción).

Anti-Spam

Activa la opción Básico para evitar los emails de spam hechos por robots. Esta opción no es muy efectiva, pero es la que trae en la opción gratuita. La opción avanzada es solo para usuarios Pro, que elementalmente es mucho más efectiva. ¡A pasar por caja si esto es importante!

Condicionales

Son reglas que se aplican a ciertos campos para realizar cambios en el formulario dinámicamente. Por ejemplo, si pulsamos un checkbox determinado, que aparezca un campo de texto solicitando ciertos datos. Para crear una condicional, primero tienes que tener los campos que vas condicionar creados. Luego seleccionas añadir grupo condicional, le das nombre, seleccionas el tipo de condición (mostrar, ocultar o desactivar) y añades la condición. Parece fácil, pero mejor prueba bien para ver su eficacia!

Condicionales Calderas Forms

Revisiones

El típico historial para retomar una versión anterior si te confundes con algo.

Variables

Son variables dinámicas que puedes usar en otra parte de tu sitio web. Una variable estática guardar datos que podrás usar como una etiqueta magic(%id%) en alguna otra parte de Caldera Forms. También puedes usar una variable de transferencia para enviar datos a la siguiente solicitud HTTP como variables de consulta cuando utilice el procesador de redireccionamiento. Sinceramente, yo esto nunca lo usé. ¡Pero tiene un potencial tremendo!

Adaptabilidad

Sencillamente, tienes que marcar cuando se hace el cambio a una sola columna. Lo idóneo es dejarlo por defecto en <767px.

Pro

Pasa por caja y obtén algunas funcionalidades extras y sobre todo, soporte por parte de los desarrolladores si tienes dificultades.

Configuración de formulario

Ya tenemos diseñado nuestro formulario. Uno bien complejo. Y los datos personalizados del email que recibes. ¿Aun hay más? Pues si. Nos queda un pequeño paso, la configuración de formulario.

En esta pestaña podemos cambiarle el nombre al formulario, obtener el shortcode, activar la opción la opción de volver arriba una vez que se pulsa el botón de Enviar, personalizar el mensaje de éxito, capturar entradas (que queden guardadas en la base de datos del servidor, ojito con la protección de datos), crear un submenú para visualizar las entradas, opción de ocultar el formulario tras el envío con éxito y envío con Ajax (simplemente actívalo para que no recargue la página).

Configuración formularios Calderas Forms

Ahora si. Ya está listo. Le das a guardar formulario y con el shortcode lo puedes poner en cualquier lugar de tu sitio web. Aunque uses un constructor visual, solo tienes que introducir el shortcode en un módulo de texto.

Añadir el checkbox para cumplir con el RGPD en Caldera Forms

Para añadir este checkbox, obligatorio por el RGPD, tenemos un campo especial llamado Consent Field. En las opciones de este campo, en el apartado Agreement, ponemos el texto legal que corresponda y que se visualizará antes del enlace a la política de privacidad (el típico «He leído y acepto» sería un ejemplo). En Linked Text ponemos el texto que mostrará el enlace en sí (política de privacidad o similar). Y ya. El enlace te llevará a la página de Política de Privacidad que hayas configurado en Ajustes->Privacidad (que sino lo has hecho, ya estás tardando).

Checkbox consentimiento Caldera Forms

Conclusión

Como puedes comprobar, Caldera Forms es un potente constructor de formularios que puedes necesitar en tus diseños web. Su configuración se realiza de manera visual (no necesitas usar código), lo puedes usar en cualquier sitio de tu web con el shortcode y para rematar es gratis.

Ahora la gran duda que te asalta, si usas Divi, o cualquier otro constructor visual que tenga un módulo de formulario, ¿necesitas este potente plugin para formularios de WordPress si solo voy hacer un simple formulario de contacto? Pues no, para que nos vamos engañar. El módulo de contacto de la mayoría de constructores visuales que conozco es más que suficiente para la solicitud básica de datos, y aún por encima suelen poder personalizarse fácilmente (por lo menos en Divi se puede). Este plugin es idóneo cuando necesitas eses extras, como puede ser la carga de archivos o ciertos campos extras.

Espero que este post te sirva para configurar Caldera Forms y conocer un buen plugin para crear formularios avanzados en WordPress.

Nos vemos en el próximo post. ¡Un saludo!

Publicaciones Similares

2 comentarios

  1. buen artículo explicando cómo funciona, justo estoy haciendo mis pruebas ahora y me has ayudado.
    Saludos

Los comentarios están cerrados.