Es curioso ver que la mayoría de usuarios que habitualmente configuran sus formularios de contacto en WordPress lo hacen usando el plugin Contact Form 7 ¡y tan panchos!
¿Que tiene este plugin que abduce a todo el mundo? la verdad es que después de muchos años utilizándolo y haber escrito bastante sobre el, no acabo de verle la gracia, y no es que sea un mal plugin, todo lo contrario ¡está muy bien!
Pero también debo decir que a los usuarios noveles, o aquellos que vienen de crear formularios más visuales, este plugin se les atraganta, y no es para menos, demasiado vetusto. Por eso quiero proponerte en esta guía otra forma de hacer formularios rápidos y chulos en WordPress ¡sin despeinarte! ... venga ¿te animas?
Índice de contenidos
- Características de wpforms
- Instalación y configuración de wpforms
- Configurando reCAPTCHA invisible
- Creando un formulario de Contacto
- Añadiendo campos nuevos al formulario
- Insertando el formulario en una Página
- Comprobando el funcionamiento del formulario
- Todo el proceso explicado en un vídeo
- Conclusiones
La propuesta pasa por el uso del plugin Contact Form by WPForms – Drag & Drop Form Builder for WordPress, comúnmente conocido como wpforms para crear Formularios de Contacto en WordPress.
Es compatible con la última versión estable de WordPress, que está desarrollado por Syed Balkhi, Jared Atchison y el equipo de WPForms, LLC. y que como muchos plugins, con la versión libre y gratuita permite crear gran número de formularios muy variados aunque también dispone de funcionalidades de pago (pro).
Haz clic en la imagen para ir al enlace del plugin
Características de wpforms
Estas son algunas de las características del plugin WPForms que hacen que sea sencillo de utilizar.
- Te permite la creación de formularios usando funciones de arrastrar y soltar.
- Puedes crear formularios rápidos sin una línea de código.
- Dispones de plantillas de formulario pre-construidas para ahorrar tiempo.
- WPForms es 100% responsive, lo que significa que funciona en móviles, tablets y equipos de escritorio.
- Te será útil para crear formularios de suscripción y conectarlos con tu servicio de marketing por correo electrónico.
- Con WPForms puedes insertar fácilmente formularios en post, páginas, widgets de la barra lateral, pie de página, etc.
- Si activas CAPTCHA inteligente y honeypot automáticamente evitaras envíos de spam a través de tus formularios.
Instalación y configuración de wpforms
El proceso de instalación de este plugin es similar a cualquier otro, ya que lo puedes instalar sin necesidad de descarga desde el dashboard de WordPress.
- Realiza una copia de seguridad.
- Ve a Plugins, Añadir nuevo.
- Busca "wpforms" en la caja de búsqueda de plugins.
- Una vez lo encuentres ha clic en Instalar.
- Tras la instalación haces clic en Activar.
- Ya puedes ir a las configuraciones generales del plugin para personalizarlas.
Haz clic en la imagen para ampliarla
Una vez instalado, en WPForms, Settings encontrarás 5 pestañas, de las cuales te destaco lo realmente importante de revisar.
- Pestaña General: Marca el checkbox Hide Announcements para evitar ruido innecesario.
- Pestaña Email: Activa HTML Template, sube una imagen personalizada para Header Image, establece un color de fondo en Background Color y activa "copia carbón" si quieres que reciban copia de los formularios.
- Pestaña reCAPTCHA: Configuralo para evitar inyección de SPAM. Te lo explico más abajo.
- Pestaña Validation: Personaliza los mensajes que verás los usuarios que rellenen tus formularios.
- Pestaña Integrations: En la versión gratuita de WPForms solo te permite vincular el plugin con la plataforma Constant Contact. La versión PRO permite integración con MailChimp y otras.
Con estas configuraciones ya deberías poder continuar el proceso para crear tu primer formulario.
Configurando reCAPTCHA invisible
Un elemento de seguridad que deberías incluir en tus formularios es CAPTCHA reCAPTCHA para evitar que los robots spammers llenen tu bandeja de entrada de correos basura inyectándolo a través de formularios no protegidos.
En WPForms, Settings, pestaña reCAPTCHA, escoge la opción Invisible reCAPTCHA que permite proteger tus formularios sin molestar al usuario siendo este humano, ya que este campo solo será un reto a los bots.
Haz clic en la imagen para ampliarla
Accede a Google reCAPTCHA y haz clic en el botón azul Get reCAPTCHA estando logeado en tu cuenta de Google/Gmail u otra del grupo.
Haz clic en la imagen para ampliarla
En el apartado Registrar un nuevo sitio pon un nombre descriptivo para lo que vas a dedicar este método de reCAPTCHA, selecciona Invisible reCAPTCHA, añade el dominio al que va destinado (no sirve si ya tenias el dominio anteriormente añadido para CAPTCHA reCAPTCHA, por ejemplo) y acepta los "Términos del Servicio". Por último clic en Register.
Haz clic en la imagen para ampliarla
En la siguiente pantalla verás las claves pública y privada del sitio.
Haz clic en la imagen para ampliarla
Nota: No olvides volver a Guardar los cambios en esa pantalla, al final de la misma.Dichas claves debes configurarlas en la pestaña reCAPTCHA de WPForms.
Haz clic en la imagen para ampliarla
Listo, haz clic en Save Settings y ya tendrás protegido contra SPAM los formularios que generes con WPForms.
Creando un formulario de Contacto
Usando WPForms vamos a crear un Formulario de Contacto que luego insertaremos en una Página para que desde el menú Contacto de la web sea visible a los visitantes.
En WPForms vete a Add New (menú izquierdo del dashboard) y establece un nombre para el formulario y selecciona Simple Contact Form.
Haz clic en la imagen para ampliarla
Una vez te cargue el formulario simple de contacto ya puedes añadir aquellos campos que necesites. No olvides que a veces "menos es más" y que rellenar muchos campos en un formulario puede hacer desistir a los interesados en contactarte ;)
Céntrate en personalizar las etiquetas (castellanizarlas) y darle la forma deseada a los campos que serán visibles. No abuses del "campo obligatorio" porque podrías condicionar a que algunos no quieran cumplimentar todos los que tu consideras importantes.
Haciendo clic encima de un campo podrás editarlo para personalizarlo.
Haz clic en la imagen para ampliarla
En el apartado Settings del editor de formularios (no lo confundas con las configuraciones globales del plugin) tienes que configurar la descripción del formulario, castellanizar los textos de los botones de envío y activar Invisible reCAPTCHA para este formulario que estás creando.
Haz clic en la imagen para ampliarla
En la pestaña Confirmation del editor de formularios, no olvides personalizar tu mensaje de confirmación de que el formulario se ha enviado y que recibirán respuesta lo antes posible.
Haz clic en la imagen para ampliarla
Muy importante es que tras realizar todos estos cambios no olvides hacer clic en el botón superior derecho (color naranja) llamado Save por aquello de no perder los cambios aplicados ;)
Listo, el formulario básico de Contacto está diseñado.
Añadiendo campos nuevos al formulario
Puede surgir que después de haber creado un formulario de Contacto hayas descubierto la necesidad de añadir un nuevo campo para complementar información que quieres recibir de tus lectores, clientes o usuarios.
Los formularios existentes los ves en el apartado de WPForms llamado All Forms donde puedes editar el que hayas creado para mejorarlo o añadir nuevos campos.
Desde el editor del formulario puedes añadir nuevos campos desde la pestaña Add Fields arrastrándolos con el ratón a la parte deseada de tu formulario existente.
Haz clic en la imagen para ampliarla
Recuerda personalizar el campo añadido para que se adapte estéticamente al diseño que ya habías establecido para el formulario.
Cuando hayas finalizado las tareas de añadir y personalizar los nuevos campos pulsa en Save para que se guarden los nuevos cambios.
Insertando el formulario en una Página
El objetivo de un formulario es mostrarlo en la web y para el caso que nos ocupa vamos a añadirlo a una Página que se llamará Contacto de forma que sea visible a los usuarios.
WPForms permite insertar cualquier formulario creado en Post y Páginas utilizando un código corto (shortcode) que se obtiene desde el apartado de WPForms llamado All Forms al lado de cada formulario existente.
Haz clic en la imagen para ampliarla
En el ejemplo disponemos del código corto siguiente:
[wpforms id="223"]
Vete a Páginas, y si ya existe tu página "Contacto" entonces edítala para añadir el shortcode obtenido.
Haz clic en la imagen para ampliarla
Otra forma de añadirlo desde el editor TinyMCE de WordPress es usando el botón Add Form seleccionando el formulario existente para que se inserte el código corto en tu post o página.
Haz clic en la imagen para ampliarla
Más fácil imposible.
Comprobando el funcionamiento del formulario
Si el código corto insertado es correcto deberías poder ver tu formulario en aquella página (o post) donde lo hayas insertado, más o menos como te muestro aquí.
Haz clic en la imagen para ampliarla
El proceso no podía ser más rápido y sencillo ¡verdad!
Todo el proceso explicado en un vídeo
Pues para que no te queden dudas te lo explico en este vídeo de forma detallada, siguiendo todos los pasos explicados desde el principio de forma que puedas construir tu primer formulario de Contacto en WordPress con el plugin WPForms y que sea el primero de muchos que utilices luego en tus proyectos web.
Conclusiones
Los Formularios de Contacto en WordPress son canales de comunicación esperando cubrir las necesidades de cualquier usuario que se acerque a ellos para conectar con tus contenidos, comentar alguna cuestión o darte feedback.
Un sitio web sin un formulario de Contacto es como un edificio de 15 plantas sin portero electrónico ¿cómo vas a ponerte en contacto con los que viven en el?
Saber crear y publicar los formularios en tu web es parte importante de cualquier proyecto que se precie y no tiene porque ser una tarea complicada solo para profesionales.
El plugin WPForms proporciona una de las formas más rápidas y fáciles de añadir un formulario de contacto a tu sitio web, al mismo tiempo que te da la opción de actualizar tus formularios en caso de que tengas necesidades más avanzadas posteriormente.