Ticker

6/recent/ticker-posts

Ad Code

Responsive Advertisement

Cómo crear un formulario de contacto en WordPress

Cómo crear un formulario de contacto en WordPress

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 se quedan tan panchos!

¿Qué 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 él, no acabo de verle la gracia, y no es que sea un mal plugin, todo lo contrario ¡está muy bien y es muy popular!

Por cierto, este artículo va de cómo crear un formulario de contacto en WordPress.

Decir que a los usuarios noveles, o aquellos que vienen de crear formularios más visuales, el plugin CF7 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?

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).

  Utilizar un plugin para crear formularios en WordPress

 

Para utilizar un plugin que te ayude en la creación de formularios en WordPress, puedes seguir una serie de pasos muy sencillos. En tu sitio web de WordPress, ve a Plugins ➜ Añadir nuevo y busca el plugin de formularios que cumpla tus necesidades y preferencias.

Hay muchos plugins disponibles, como Gravity Forms, WPForms y Ninja Forms, entre otros, aunque en este artículo me centro en WPForms.

Plugin Contact Form by WPForms – Drag & Drop Form Builder for WordPress

Haz clic en la imagen para acceder al plugin en WordPress.org

En el directorio oficial de plugins de WordPress.org lo encontrarás por el nombre Contact Form by WPForms – Drag & Drop Form Builder for WordPress, pero que no te confunda, porque no es Contact Form 7. 😉

Pasos resumidos para crear formularios con WPForms:

  1. Una vez que localizado el plugin en el buscador de plugins, haz clic en el botón Instalar y luego en Activar para poderlo utilizar.
  2. Después ve a la página de ajustes del plugin y configura las opciones y preferencias que desees.
  3. A continuación céntrate en el diseño del formulario, las preguntas y respuestas, los campos obligatorios y las acciones que se deben realizar después de enviar el formulario.
  4. Una vez que hayas configurado el formulario de contacto, ve a la página o entrada donde quieras insertarlo y utiliza el editor de WordPress para añadir un nuevo bloque de formulario.
  5. El plugin debería aparecer en la lista de opciones disponibles, pudiendo seleccionarlo y personalizarlo según tus preferencias.
  6. Guarda los cambios y publica la página o entrada donde lo hayas añadido para que el formulario esté disponible para los usuarios.

A partir de ese momento, los usuarios podrán llenar el formulario y enviarlo, y los resultados se guardarán en la base de datos del plugin o se enviarán a una dirección de correo electrónico, según las opciones configuradas.

Es muy sencillo crear y añadir formularios en tus publicaciones de WordPress con este plugin.

  Características de WPForms

 

Estas son algunas de las características del plugin WPForms que hacen que este 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 evitarás envíos de spam a través de tus formularios.

WPForms es un plugin de formularios para WordPress que permite a los usuarios crear y personalizar formularios de contacto, encuestas, cuestionarios y otros tipos de formularios en un sitio web de WordPress.

  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.

  1. Realiza una copia de seguridad.
  2. Ve a Plugins, Añadir nuevo.
  3. Busca wpforms en la caja de búsqueda de plugins.
  4. Una vez lo encuentres haz clic en Instalar.
  5. Tras la instalación haces clic en Activar.
  6. Ya puedes ir a las configuraciones generales del plugin para personalizarlas.
Instalar plugin WPForms en WordPress

Una vez instalado accede al plugin desde el menú lateral izquierdo del dashboard, WPForms ➜ Ajustes encontrarás 8 pestañas, de las cuales te destaco lo realmente importante a revisar.

  • Pestaña General: Marca el tickbox Mejoras para el RGPD para activar opciones del Reglamento General de Protección de Datos.
  • Pestaña Correo electrónico: Activa Plantilla HTML, sube una imagen personalizada para Imagen de cabecera, establece un color de fondo en Color de fondo y activa “copia carbón” si quieres que reciban copia de los formularios desde Copia.
  • Pestaña CAPTCHA: Configuralo para evitar inyección de SPAM. Te lo explico más abajo.
  • Pestaña Validación: Personaliza los mensajes que verán los usuarios que rellenen tus formularios.
  • Pestaña Integraciones: 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.
  • Pestaña Geolocalización: Solo disponible en la versión de pago.
  • Pestaña Acceso: Solo disponible en la versión de pago.
  • Pestaña Varios: Para configurar algunos aspectos de visibilidad del plugin.

Con estas configuraciones ya deberías poder continuar el proceso para crear tu primer formulario.

  Configurando CAPTCHA invisible

 

Un elemento de seguridad que deberías incluir en tus formularios es CAPTCHA o reCAPTCHA para evitar que los robots spammers llenen tu bandeja de entrada de correos basura inyectándolos a través de formularios no protegidos.

En WPForms ➜ Ajustes ➜ pestaña CAPTCHA selecciona la opción reCAPTCHA v2 invisible que permite proteger tus formularios sin molestar al usuario siendo este humano, ya que este campo solo será un reto a los bots.

Activar reCAPTCHA v2 invisible en WPForms

Accede a Google reCAPTCHA y rellena todos los datos para obtener las claves pública y privada de reCAPTCHA v2, estando conectad@ en tu cuenta de Google/Gmail.

Registrar sitio web para reCAPTCHA v2

En el apartado Etiqueta pon un nombre descriptivo para lo que vas a dedicar este método de reCAPTCHA (puede ser el nombre de tu dominio para luego identificarlo mejor), selecciona reCAPTCHA v2, y en las opciones adicionales Insignia de reCAPTCHA invisible, añade el dominio al que va destinado (no sirve si ya tenías el dominio anteriormente añadido para CAPTCHA reCAPTCHA, por ejemplo) y acepta los «Términos del Servicio». Por último clic en Enviar.

En la siguiente pantalla verás las claves pública y privada del sitio.

Claves pública y privada de reCAPTCHA

Dichas claves debes configurarlas en la pestaña CAPTCHA de WPForms.

Configurar claves reCAPTCHA v2 en WPForms

Listo, haz clic en Guardar los ajustes y ya tendrás protegido contra SPAM los formularios que generes con el plugin WPForms.

Si accedes a la página donde tengas publicado un formulario con reCAPTCHA deberías ver a la derecha el icono de Google reCAPTCHA, indicador de que está activo y protegiendo tu formulario.

Formulario de contacto protegido con reCAPTCHA

Utilizar reCAPTCHA en un sitio web es importante porque puede ayudar a proteger el sitio de acciones malintencionadas y mejorar la seguridad del sitio. Además, reCAPTCHA ayuda a prevenir el correo basura en formularios de contacto, registro de usuarios y otros elementos del sitio que requieran la intervención de un ser humano.

  Creando un formulario de Contacto

 

Usando WPForms vas a crear un Formulario de Contacto que luego insertarás en una Página para que desde el menú Contacto de la web sea visible a los visitantes.

En WPForms vete a Añadir nuevo (menú izquierdo del dashboard) y establece un nombre para el formulario y selecciona Simple Contact Form.

Añadir un nuevo formulario con WPForms

Una vez te cargue, WPForms selecciona el Formulario de contacto simple ➜ Usar una plantilla y 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 tú consideras importantes.

Haciendo clic encima de un campo podrás editarlo para personalizarlo.

En el apartado Ajustes 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.

Personaliar y ajustar los campos del formulario

En la pestaña Ajustes ➜ Confirmaciones 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.

Personalizar mensaje de confirmación

Muy importante es que tras realizar todos estos cambios no olvides hacer clic en el botón superior derecho (color naranja) llamado Guardar por aquello de no perder los cambios aplicados.

Listo, el formulario básico de Contacto está diseñado.

Formulario de contacto creado con WPForms

  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.

Te resumo los pasos de cómo añadir campos nuevos al formulario de WPForms:

  1. Inicia sesión en tu sitio web de WordPress y ve a la página de WPForms.
  2. Selecciona el formulario en el que quieras agregar campos nuevos y haz clic en Editar.
  3. En la página de edición del formulario, haz clic en el botón Añadir campo y selecciona el tipo de campo que deseas agregar. Puedes elegir entre diferentes tipos de campos, como texto, botones de opción, casillas de verificación, desplegables y más.
  4. Una vez que hayas seleccionado el tipo de campo, te pedirá que escribas el título del campo y configures las opciones y preferencias del campo. Puedes personalizar el contenido del campo, establecer si es obligatorio o no, y configurar las acciones que se deben realizar después de que el usuario envíe el formulario.
  5. Cuando hayas terminado de configurar el campo, haz clic en Añadir campo para incorporarlo al formulario. Luego, puedes arrastrar y soltar el campo en la posición deseada en el formulario.
  6. Guarda los cambios y publica el formulario para que los usuarios puedan ver y utilizar el campo nuevo.

Los formularios existentes los ves en el apartado de WPForms llamado Todos los formularios 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 Añadir campos arrastrándolos con el ratón a la parte deseada de tu formulario existente.

Añadir nuevos campos al formulario de WPForms

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 Guardar para que se guarden los nuevos cambios.

Resumiendo, añadir campos nuevos al formulario de WPForms es un proceso sencillo y rápido que puede ayudar a mejorar la interacción y la comunicación con los usuarios del sitio web.

  Insertar el formulario en una Página

 

El objetivo de un formulario es mostrarlo en la web y para el caso que nos ocupa voy 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 Entradas y Páginas utilizando un código corto (shortcode) que se obtiene desde el apartado de WPForms llamado Todos los formularios al lado de cada formulario existente.

Obtener código corto de formulario de WPForms

En el ejemplo dispongo del código corto siguiente:

Vete a Páginas, y si ya existe tu página Contacto entonces edítala para añadir el shortcode obtenido.

Añadir el shortcode en la página de Contacto

Otra forma de añadirlo desde el editor «Visual» de WordPress (si usas el editor clásico de WordPress), es usando el botón Añadir formulario seleccionando el formulario existente para que se inserte el código corto en tu entrada o página.

Añadir formulario usando el editor visual de WordPress

Lo hagas de una forma u otra, el resultado es el mismo, se añade el formulario en la posición indicada en tu página de contacto, o en la que lo estés añadiendo.

Vista frontal del formulario de contacto

Más fácil imposible.

  Haz que los formularios lleguen, modifica la cuenta cambiame@

 

Puede ser habitual que tras configurar WPForms para mostrar formularios en tu sitio web, se te haya pasado por alto la configuración de determinados ajustes importantes de WordPress, como por ejemplo la cuenta de correo.

Esto lo haces en el dashboard de WordPress:

dashboard   Ajustes   Generales   Dirección de correo electrónico

Pero también puedes forzar el campo directamente en WPForms, por si usas otro correo diferente en los ajustes generales de tu web.

En WPForms, vete a Ajustes y en Notificaciones cambia el parámetro:

{admin_email}

Por una cuenta de correo válida donde se recibirán los correos de los formularios que los usuarios rellenen en tu web.

  Comprueba el funcionamiento del formulario

 

Si el código corto insertado es correcto, deberías poder ver tu formulario en aquella página (o entrada) donde lo hayas insertado, más o menos como te muestro aquí.

Formulario en la página de contcato de WordPress

La recomendación es que rellenes el formulario y lo envíes, por un lado, para verificar que el mensaje de confirmación, tras el envío, se muestra correctamente.

Mensaje de confirmación tras enviar el formulario

Si tienes la versión PRO de WPForms, en el dashboard, desde Entradas, podrás ver los mensajes recibidos que los usuarios van enviando desde dicho formulario y responderlos desde ahí, eliminarlos o visualizarlos al completo.

Con la versión Lite de WPForms, la recomendación es completar con tu dirección de respuesta el campo CCO en la configuración del formulario para que te envíe una copia de carbón oculta a la dirección de correo que indiques, y de esa forma podrás recibir copia de los mensajes, aunque lo cierto es que de igual forma los recibirás cuando los envíen.

El proceso no podía ser más rápido y sencillo ¡verdad!

  Vídeo sobre la creación de un formulario con WPForms

 

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 manera 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

 

Utilizar un plugin para crear formularios en WordPress es un proceso simple y rápido, y puede ofrecer una gran cantidad de beneficios y características para mejorar la interacción y la comunicación con los usuarios del sitio web.

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 él?

Saber crear y publicar los formularios en tu web es parte importante de cualquier proyecto que se precie y no tiene por qué 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.

Si quieres aprender a crear Formularios en WordPress, con diferentes plugins muy conocidos, te recomiendo este Curso de Formularios en WordPress de Webempresa University donde explicamos cómo crear formularios de contacto, desde cero.

Curso 100 % GRATUITO ¡recomendado!

La entrada Cómo crear un formulario de contacto en WordPress se publicó primero en Webempresa.

Enregistrer un commentaire

0 Commentaires