fbpx

Cómo crear un formulario de contacto en WordPress

Crear un formulario de contacto en WordPress no es sencillo para alguien que empieza a utilizar este CMS. Te ensañaré cuál es, en mi opinión, la mejor y más fácil manera de hacerlo.

Índice de contenido:

  1. Cómo agregar un formulario de contacto sin plugins
  2. ¿Cuál es el mejor plugin de formularios para WordPress?
  3. Ninja Forms: El mejor plugin para formularios
  4. Adaptar mi formulario WordPress al RGPD
  5. Cómo configurar un formulario de contacto en WordPress
  6. Configurar acciones en el formulario de contacto
  7. ¿Dónde guarda Ninja Forms los datos?
  8. Video tutorial para configurar formulario de contacto en WordPress

Cómo agregar formulario de contacto en WordPress sin plugins

Para agregar un formulario de contacto en WordPress sin usar plugins, debes utilizar código HTML y PHP. ¿Qué inconveniente tiene hacerlo de esta manera?, sencillo, para una persona que no tenga conocimientos de programación, prácticamente es imposible.

Tienes la opción de recurrir a tutoriales en internet dónde te dan porciones de código para que insertes en los archivos de WordPress, pero es una mala opción, hazme caso, ¡no lo hagas!

En el caso de que lo hagas con código directamente, si quieres usarlo en más de una página, tienes que volver a realizar el proceso otra vez por cada página donde quieras añadirlo.

Hay muchos plugins, tanto gratuitos como de pago, que te permiten crear un formulario en WordPress sin tener que tocar una sola línea de código. ¡Veamos como hacerlo! 💪

¿Cuál es el mejor plugin de formularios para hacer una web con WordPress?

Decir que un plugin de formularios es el mejor sería muy ostentoso por mi parte. Dependiendo de lo que necesites, hay múltiple opciones tanto de pago como gratuitas.

Por supuesto, te voy a contar cuál es para mi el mejor, el más sencillo y versátil. Pero antes, vamos a listar los plugins WordPress de formularios más usados y conocidos:

  • Gravity forms. Tiene un coste actualmente de $59 al año. Quizás sea el más completo y con más opciones. Tiene muchos add-ons para integrarse con múltiples servicios (PayPal, Stripe, MailChimp, etc), con lo que es un serio candidato si quieres integrar o automatizar los datos que tu formulario va a manejar con un servicio externo.
  • Contact form 7. Es una opción gratuita bastante potente. Tiene muchas opciones y en concreto tiene la opción de usar reCAPTCHA, lo que funciona muy bien para evitar el SPAM. Lo he usado en el pasado, pero en mi opinión hay opciones que te dan mayor facilidad a la hora de configurar los formularios.
  • Ninja Forms. Es freemium, es decir puedes instalarlo gratuitamente, pero para opciones más avanzadas tienes que pasar por caja. Por ejemplo, para la integración con Stripe tienes un complemento de pago. Este plugin destaca por su facilidad para ser configurado.

Estas tres opciones son, en 2018, las más usadas y conocidas por la comunidad WordPress. Pero estarás pensado, ¿qué plugin de formularios me recomiendas?. Como te he comentado antes, eso es relativo, pero sí te voy a decir cuál uso yo para formularios de contacto en WordPress.

Ninja Forms: El mejor plugin para formularios de contacto en WordPress

Para un formulario de contacto típico (nombre, email y mensaje), según mi experiencia, Ninja forms es el mejor. ¿Por qué?, ¿qué ventajas tiene respecto a Contact Form y Gravity Form?. Para empezar, es gratis, intuitivo y fácil de configurar. Por otra parte, puedes personalizarlo visualmente mediante clases de CSS, esto siempre es más óptimo que hacerlo mediante CSS inline.

Como te he dicho, aconsejo Ninja Forms para formularios de contacto. Ya que, estos formularios suelen ser sencillos y con campos típicos. ¿Esto quiere decir que no puede usarse en formularios más complejos?. Con Ninja Forms se pueden hacer todo tipo de formularios, de hecho tiene muchos añadidos de pago para integraciones de terceros (como Paypal, Stripe, MailChimp, etc…).

Por último, algo que nos trae a todos de cabeza desde mayo de 2018, seguro que tu no eres una excepción… el RGPD. ¿Ninja Forms me permite integrarlo?. Claro! te explico como hacerlo.

¿Cómo adaptar mi formulario WordPress al RGPD con un plugin?

Es muy sencillo! Para adaptar tu formulario en WordPress al RGPD, tanto con Ninja Forms como con cualquier otro plugin, solo tienes que añadir dos elementos.

Primer elemento para el RGPD en tu formulario: la casilla de verificación

Pues muy sencillo, añade una casilla de verificación en cualquiera de tus formularios, eso sí, tiene que venir desmarcada por defecto. El texto de esta casilla de verificación tiene que ser sencillo pero enlazando a tu política de privacidad.

Se que te lo acabo de decir, pero es muy importante que la casilla esté desmarcada. Es uno de los requisitos indispensables a cumplir para tener tu formulario de contacto en WordPress adaptado al RGPD. Lógicamente, si la casilla no está marcada, el formulario no puede almacenar los datos del usuario.

Segundo elemento para el RGPD en tu formulario: pequeño texto informativo

Más fácil aún, debes añadir un pequeño texto con la información básica sobre la protección de los datos del formulario en tu web. Este texto tiene que especificar los siguientes puntos:

  • El responsable de los datos.
  • La finalidad de la recogida de estos datos.
  • La legitimación de dichos datos.
  • Los destinatarios a los que se enviarán los datos.
  • Los derechos del usuario de los datos sobre estos.

Lo mejor a la hora de tenerlo claro es ver un ejemplo donde estén aplicados estos requisitos. Para ello, puedes visitar mi página de contacto, en la que puedes ver cómo lo he implementado. Una vez visto todo esto, te voy a mostrar cómo configurar un formulario de contacto con Ninja Forms en WordPress ¡vamos a ello!

Cómo configurar un formulario de contacto en WordPress

Configurar un formulario de contacto WordPress con Ninja Forms es muy fácil e intuitivo. Ahora voy a explicarte paso a paso, con imágenes, cómo hacerlo. Para empezar, ve al panel de administración de tu WordPress y en el menú lateral elige Ninja Forms y Añadir nuevo.

Añade un nuevo formulario en Ninja Forms desde el panel de administración de WordPress
Añade un nuevo formulario en Ninja Forms desde el panel de administración de WordPress

Verás una serie de formularios predeterminados que puedes usar. Lógicamente, elige el de contacto Contacta con nosotros.

Elige el formulario de contacto por predefinido en Ninja Forms como "Contacta con nosotros"
Elige el formulario de contacto por predefinido en Ninja Forms como “Contacta con nosotros”

Verás los campos básicos para un formulario de contacto. Ya tienes tu formulario casi listo, recuerda que hay que adaptarlo a la RGPD. Para ello, como has visto arriba tienes que añadir una campo más y un pequeño texto. ¡A por ello! Pulsa el botón azul, con el signo + blanco en su interior, que se encuentra en la parte inferior derecha de la pantalla.

Formulario de contacto predefinido en Ninja Forms
Formulario de contacto predefinido en Ninja Forms

En la parte derecha, en CAMPOS COMUNES elige el tipo de campo Cuadro de verificación único.

Añade un cuadro de verificación en Ninja Forms para cumplir la RGPD en tu formulario de contacto en WordPress
Añade un cuadro de verificación en Ninja Forms para cumplir la RGPD en tu formulario de contacto en WordPress

Ahora, solo tienes que añadir en el campo ETIQUETA el siguiente texto:

Acepto la <a href="ENLACE-A-PAGINA-DE-PRIVACIDAD" rel="nofollow" target="_blank">Política de privacidad</a>

Cambia ENLACE-A-PAGINA-DE-PRIVACIDAD por la url donde está tu política de privacidad. Muy importante, marca este campo como obligatorio en el interruptor que te indico en la imagen de abajo.

En la etiqueta del campo de verificación añade un enlace a tu página de privacidad
En la etiqueta del campo de verificación añade un enlace a tu página de privacidad

Una vez que tienes lo anterior, pulsa el botón azul HECHO para poder añadir el siguiente campo necesario para cumplir la RGPD en tu formulario WordPress.

Ahora, pulsa el botón azul con el + en blanco para añadir el segundo campo. En este caso, en CAMPOS DE DISEÑO elige el campo de tipo HTML. Deja el campo ETIQUETA vacío y añade el texto que te dije aquí. Ahora, le das al botón HECHO.

Añade texto con información básica de la protección de datos para cumplir el RGPD en tu formulario de contacto de WordPress
Añade texto con información básica de la protección de datos para cumplir el RGPD en tu formulario de contacto de WordPress

Ya tienes tu formulario de contacto para WordPress con todos los campos necesarios. Para finalizar, pulsa el botón PUBLICAR que ves arriba a la derecha y ya puedes usar tu formulario de contacto en cualquier página de tu web. Dale al botón de cerrar el formulario de arriba a la derecha y verás la siguiente pantalla.

Copia el shortcode de tu formulario de contacto para usarlo en una página de WordPress
Copia el shortcode de tu formulario de contacto para usarlo en una página de WordPress

Como ves en la imagen de arriba, te señalo donde tienes el shortcode que debes poner donde quieras que aparezca tu formulario de contacto. Este puedes usarlo todas las veces que quieras, no tendrás que volver a modificar tu formulario de contacto ¡lo tienes listo para que te contacten!


🙋🏽‍♂️ ¿Quieres recibir tutoriales como este y contenido sobre el sector online cada 15 días? Suscríbete que es gratis! 🤙🏽

Información básica sobre protección de datos: Responsable: Antonio Madera González. Finalidad: Gestionar el envío de información y prospección comercial y dar acceso a los productos online. Legitimación: Consentimiento del interesado. Destinatarios: Empresas proveedoras nacionales y encargados de tratamiento acogidos a privacy shield. Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos como se explica en la información adicional.

Cómo configurar acciones para tu formulario de contacto con Ninja Forms

Seguramente quieras que cuando un usuario rellene y envíe un formulario de contacto en tu web, te llegue un email automático para poder resolverle sus dudas o comentar con él qué servicio necesita contratar. Otra acción habitual, en este caso imprescindible, es guardar los datos del contacto (email, nombre y mensaje) en tu base de datos. Para esto, Ninja Forms te da la opción de configurar acciones automáticas cuando un usuario use el formulario de tu web.

Estas acciones se configuran para cada formulario y, al igual que cuando configuraste los campos del formulario, es muy fácil con Ninja Forms. Para ello, debes de ir a Ninja Forms -> Escritorio en el menú lateral del panel de administración de WordPress.

Editar formulario de contacto en Ninja Forms desde el panel de administración de WordPress
Editar formulario de contacto en Ninja Forms desde el panel de administración de WordPress

Una vez estás en las opciones de Ninja Forms, haz click sobre el icono rueda dentada del formulario al que quieres añadirle las opciones y Editar sobre las opciones que aparecen.

Configurar acciones en Ninja Forms
Configurar acciones en Ninja Forms

Aquí, debes de ir a la pestaña Correos electrónicos y acciones, pulsa el icono azul con el + blanco dentro que aparece en la esquina inferior derecha. Te aparecerán multiples acciones para añadir.

Acciones posibles con Ninja Forms para tu formulario de contacto WordPress
Acciones posibles con Ninja Forms para tu formulario de contacto WordPress

Bajo mi punto de vista, hay tres acciones imprescindibles que debes añadir:

  • Correo electrónico: esta la uso para que me llegue a mi email un correo electrónico con el nombre, email y mensaje que el usuario quiere hacerme llegar. Si configuras correctamente esta opción, te llegará un email con los datos del formulario pero como si el usuario te hubiese mandado el email. También podrías configurar que al usuario le llegará una copia del mensaje que te dejó en el formulario de contacto. Esta última opción es muy útil para un formulario de soporte.
  • Guardar los datos: es muy interesante que los datos del contacto se guarden en tu base de datos. Nunca puedes asegurar al 100% que un email no vaya a SPAM, que lo borres o que simplemente no lo veas. Guardando los datos te aseguras no perder, por una cosa u otra, los datos del usuario que rellenó el formulario de contacto de tu WordPress.
  • Mensaje de éxito: esta opción parece obvia, por esto mismo tienes que ponerla sí o sí. El usuario que rellene tu formulario, debe recibir un mensaje como que todo ha ido bien y, por qué no, informándole que le contestarás lo antes posible.
Acciones imprescindibles para un formulario de contacto en WordPress con Ninja Forms
Acciones imprescindibles para un formulario de contacto en WordPress con Ninja Forms

Con estas tres opciones, te aseguras de que le das al usuario un mínimo de feedback y tu te enteras al momento de que alguien necesita algo de ti. Por ejemplo, al configurar que te llegue un email con el mensaje del usuario, puedes comenzar una conversación con este. Esto es muy útil en el caso de que este usuario requiera uno de los servicios o productos que vendes. Si necesitas saber cómo configurar esta acción correctamente contáctame aquí y te ayudaré a resolverlo 🙂

Ninja Forms te da muchas más acciones para añadir a tu formulario de contacto para que puedas hacer múltiples estrategias. Aprovéchalas tanto en tus formularios de contacto como en otro tipos de formularios de tu página web.

¿Dónde guarda Ninja Forms los datos?

Todos los datos que maneje Ninja Forms, puedes verlos en el panel de administración de WordPress. Solo tienes que ir a Ninja Forms -> Envíos, seleccionas el formulario del cuál quieres ver los datos y ya tienes el listado de todos los datos que ha almacenado para ese formulario en concreto.

Dónde guarda Ninja Forms los datos de un formulario
Dónde guarda Ninja Forms los datos de un formulario

Aquí puedes ver de solo un vistazo el número de contactos que has recibido, puedes filtrar por fechas, etc. Como te comentaba antes, para mi guardar los datos en la base de datos de mi web es una de las acciones imprescindibles a configurar en un formulario de contacto.

Si necesitas ayuda con Ninja Forms, mejorar la conversión de tu web, atraer tráfico cualificado, etc, mira los servicios que ofrezco en mi web antoniomadera.com. También tienes más tutoriales y contenido útil para mejorar tu página web en mi blog.

Video tutorial para configurar formulario de contacto en WordPress