Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)
Hoy vamos a discutir el complemento Formidable Forms para WordPress, que te permite crear diferentes tipos de formularios fácilmente. Específicamente, veremos cómo puedes usar este complemento para crear un formulario de contacto para tu sitio. Comenzaremos explorando las configuraciones básicas proporcionadas por este complemento, y más adelante veremos un ejemplo real para construir un formulario de contacto mediante su uso.
Como propietario de un sitio, es posible que quieras recibir comentarios de tus usuarios y clientes sobre tus servicios: eso te ayuda a atenderlos mejor. Por lo tanto, un formulario de contacto en tu sitio web es una de las herramientas imprescindibles para recopilar comentarios de tus usuarios.
Si eres un desarrollador de WordPress, o si construir sitios usando WordPress es tu pasatiempo, ya sabes que WordPress proporciona una gran cantidad de complementos para casi todas las funciones que puedas imaginar, y puede ser difícil elegir cuál usar. Para esta publicación he elegido uno de los mejores en la categoría, Formidable Forms, y te mostraré cómo usarlo a lo largo de este tutorial.
Para esta publicación he usado WordPress 5.1, y la versión del complemento Formidable Forms es la 3.06. Te recomiendo que lo instales si quieres seguir los pasos de este artículo. Para instalar el complemento Formidable Forms, solamente necesitas seguir el proceso de instalación estándar.
En el siguiente par de secciones, exploraremos los conceptos básicos del complemento Formidable Forms junto con el proceso de configuración. Luego crearemos un ejemplo real que demostrará el uso de este complemento. Mientras tanto, también revisaremos algunos aspectos importantes de este complemento que te permiten crear diferentes tipos de formularios que pueden recopilar datos, no solo formularlos de contacto.
¿Qué es Formidable Forms?
Formidable Forms es un poderoso complemento para la generación de formularios, el cual te permite crear diferentes tipos de formularios para recopilar información de los usuarios. Este proporciona una interfaz en el back-end con la función de arrastrar y soltar, lo que hace que todo el proceso sea muy sencillo. De hecho, podrías usar este complemento para crear cualquier tipo de formulario que puedas imaginar, no solamente formularios de contacto.
Veamos rápidamente las características que ofrece:
- Creador de formularios de contacto con la función de arrastrar y soltar y generador de formularios
- Compatibilidad con notificaciones y autocontestadores de correo electrónico
- Personaliza la apariencia de tus formularios de contacto con un estilizador incorporado
- Integración con MailChimp, Constant Contact, Salesforce y más
- Apto para dispositivos móviles y responsivo
- Protección contra spam
- Y más
Como puedes ver, el complemento ofrece muchas características interesantes que puedes usar para crear magníficos formularios en tu sitio. Y también puede extenderse, lo que es una característica importante, ya que proporciona a los desarrolladores la oportunidad de alterar ciertos aspectos y el comportamiento central del complemento.
En la siguiente sección, discutiremos un par de elementos centrales de este complemento que es importante comprender si quieres usarlo de manera efectiva.
Explora las configuraciones
Una vez que hayas instalado el complemento Formidable Forms, este agregará un enlace en la barra lateral izquierda. Revisemos cada sección brevemente.
Formularios
En esta sección puedes crear nuevos formularios, editar formularios existentes y ver una lista de formularios ya creados.
Esta proporciona tres maneras diferentes de crear un formulario nuevo. Puedes crear un formulario desde cero usando la interfaz de arrastrar y soltar. O puedes elegir de entre las plantillas de formularios integradas para comenzar a crear tu nuevo formulario. Y, finalmente, también puedes importar un formulario a partir de un archivo XML. En cualquier caso, terminarás creando un formulario que será mostrado en el front-end usando el código abreviado.
Entradas
Esta es una página con un listado de entradas que muestra todos los registros enviados desde el front-end. Hay un filtro que te permite filtrar registros por tipo de formulario. Además del listado, también puedes ver una entrada a detalle en la vista de detalles del formulario. Y, finalmente, hay una opción para eliminar, la cual puedes usar si deseas purgar los registros antiguos.
Estilos
En esta sección puedes administrar los diferentes estilos de formularios que pueden ser usados para estilizar un formulario cuando se muestra en el front-end.
Un estilo de formulario te permite configurar y personalizar cómo se mostrarán los diferentes elementos de tu formulario, por ejemplo su título, las etiquetas de los campos o los botones. Ya hay un estilo predeterminado disponible, el cual puedes usar y personalizar de acuerdo a tus requisitos. Además, si no quieres usar ningún estilo de formulario, puedes deshabilitar los estilos y usar CSS personalizado también.
Importar/Exportar
Esta sección te permite importar y exportar formularios creados por este complemento. Es una herramienta verdaderamente útil si deseas mover tus formularios entre diferentes instalaciones de WordPress.
Por ejemplo, si has creado un par de formularios en tu instalación local y quieres mover esos formularios a tu sitio en producción, ¿los volverías a crear en el sitio en producción? De hecho, podrías simplemente exportar esos formularios, ya sea en formato XML o en CSV, e importarlos en la instalación en producción usando esta herramienta. ¡Yo diría que es una herramienta imprescindible!
Configuraciones globales
En esta sección puedes configurar opciones que pueden aplicarse globalmente a todos los formularios. Puedes configurar diferentes aspectos de este complemento, por ejemplo:
- Permisos del usuario
- Configuraciones de reCAPTCHA
- Mensajes predeterminados en el front-end
- Almacenamiento de IP
En la siguiente sección crearemos un ejemplo real como demostración.
Crea un formulario de contacto con Formidable Forms
En esta sección crearemos un ejemplo real para demostrar cómo puedes usar el complemento Formidable Forms para crear un formulario de contacto en tu sitio web.
Antes de que continuemos, asegúrate de haber instalado el complemento Formidable Forms en tu sitio de WordPress si quieres seguir los pasos.
Podrías usar el formulario de contacto incorporado que se incluye con este complemento, pero crearemos uno nuevo desde cero para comprender el proceso completo. Continúa y entra al enlace Formidable > Forms (Formidable > Formularios) de la barra lateral izquierda en el back-end. Eso debería listar todos los formularios existentes en tu sistema. Haz clic en el botón Add new (Agregar nuevo) para crear un nuevo formulario, y eso te pedirá que elijas una de las siguientes tres opciones.
Deberías estar familiarizado con estas tres opciones, ya que las acabamos de discutir en la sección anterior. Sigue adelante y haz clic en Create Blank Form (Crear formulario en blanco) para crear un formulario desde cero, y eso debería mostrarte la siguiente interfaz.
Como puedes ver, la interfaz del generador de formularios es bastante intuitiva. Puedes agregar tantos campos como desees a tu formulario desde la lista de la barra lateral derecha.
En primer lugar, escribamos el nombre de nuestro formulario. Escribe Contact Us (Contáctanos) en el campo Enter title here (Escribe el título aquí).
En nuestro ejemplo, agregaremos campos para los siguientes datos:
- Nombre
- Correo electrónico
- Teléfono
- Asunto
- Mensaje
- reCAPTCHA
Arrastra el campo Text (Texto) desde la lista de campos de la barra lateral derecha y suéltalo en el área de contenido titulada Add Fields Here (Agrega los campos aquí). Esto agregará un nuevo campo en tu formulario.
Una vez que agregues cualquier campo, debes configurar ciertos ajustes de este último. Ya que acabamos de agregar un nuevo campo de texto, veamos cómo configurarlo para que se convierta en el campo de nombre.
Como puedes ver, la sección Field Settings (Configuraciones de campo) nos permite configurar los diferentes aspectos del campo, por ejemplo si es obligatorio, la posición de la etiqueta o el tamaño del campo. Continúa y configura el campo de nombre.
A continuación, agrega los campos de correo electrónico, teléfono y asunto usando la misma interfaz de arrastrar y soltar. Todos los campos que hemos agregado hasta ahora son campos de tipo Text (Texto).
A continuación agrega el campo párrafo, que actuará como el campo de mensaje en nuestro formulario. Ese será de tipo Paragraph (Párrafo).
Y, finalmente, agrega un campo reCAPTCHA para la prevención de spam. Para habilitar la protección reCAPTCHA contra spam, debes configurar la Site Key (Clave de sitio) y la Secret Key (Clave secreta) dentro de la sección Formidable > Global Settings > reCAPTCHA (Formidable > Configuraciones globales > reCAPTCHA), como se muestra en la siguiente captura de pantalla.
Después de agregar todos los campos, el formulario debería verse como se muestra en la siguiente captura de pantalla:
Por supuesto, esta es solo una vista previa del back-end. Para mostrar el formulario en el front-end necesitarás usar el código abreviado. Puedes copiar el código abreviado de tu formulario desde la página del listado de formularios.
Obtén el código abreviado del formulario que acabas de crear. Puedes usar este código abreviado en una entrada o en una barra lateral: donde sea que quieras mostrar este formulario.
Este se verá más o menos así:
Continúa y envía el formulario para probarlo. Puedes consultar las entradas enviadas en la sección Formidable > Entries (Formidable > Entradas).
De esta manera puedes crear un formulario, agregarle campos y, finalmente, mostrarlo en el front-end usando un código abreviado. De hecho, puedes hacer mucho más, ya que Formidable Forms proporciona muchas más herramientas. Te animo a que explores otras configuraciones proporcionadas por este complemento, ¡eso debería ser divertido!
Complementos avanzados de formularios
Como he mostrado anteriormente, Formidable Forms es un excelente paquete gratuito para crear formularios de WordPress. Pero si necesitas funciones más avanzadas para tu sitio, consulta algunos de los generadores de formularios de nivel profesional disponibles en CodeCanyon. Por un costo bajo, estos complementos pueden ahorrarte mucho trabajo y llevar a tu sitio de WordPress al siguiente nivel.
Usa un generador de formularios con la función de arrastrar y soltar para WordPress
Quform vs. FormCraft: Los principales complementos de WordPress para la generación de formularios comparados
Elige un generador de formularios: los 7 mejores generadores de formularios de WordPress comparados
Conclusión
Hoy discutimos cómo crear un formulario de contacto usando el complemento Formidable Forms en WordPress. También vimos una descripción a profundidad de este complemento y discutimos diferentes aspectos del mismo.
¡Siéntete libre de compartir tus pensamientos y comentarios usando el canal a continuación! Me encantaría escucharte si quieres compartir tus experiencias sobre otros complementos de formularios de contacto que hayas usado en tu sitio web.
By
