Cómo crear un formulario de contacto COJONUDO en tu web con Elementor

Cómo crear un formulario de contacto COJONUDO en tu web con Elementor

Uno de los aspectos más importantes de una página web y a lo que sin duda tenemos que dar la importancia que tiene es el formulario de contacto.

Puedes diseñar una página web de manera impecable, poner imágenes que echan fuego, unos copies que venden solo con mirarlos y unos precios irresistibles, pero, ay amig@… si el formulario de contacto es una mierda…

…¡la cagaste Burt Lancaster!

En este post voy a enseñarte varios aspectos que deberías conocer a la hora de crear un formulario de contacto COJONUDO con Elementor Page Builder.

Al final del post te muestro la manera que yo utilizo para crear mis formularios y los de mis clientes, que es a través del plugin Elementor, uno de los mejores editores visuales para WordPress, si no el mejor…

Tipos de formularios de contacto

Más allá de tus capacidades creativas para diseñar un formulario de contacto atractivo, en este apartado quiero llamar tu atención sobre cómo sacar partido a los formularios dependiendo de para qué los quieras.

Independientemente de que puedes ser todo lo artístico que quieras, en mi humilde opinión, un formulario de contacto debe de ser lo más claro posible y no confundir al usuario, pues es la vía más importante por la que tus visitantes puedan ponerse en contacto contigo para contratar tus servicios o comprar tus productos.

Yo categorizo los formularios por estos tipos (¿hay otros?, puede ser, pero esto es lo que yo conozco):

  • Simples: son aquellos formularios que solo solicitan lo necesario para comenzar una conversación con un prospecto. En estos formularios de contacto yo incluiría los siguientes campos principales: Nombre, Email, Asunto y Mensaje.

    ¡Y listo! No necesitas nada más para que alguien te cuente qué necesita de ti.

  • Complejos: también conocidos «formularios ahuyenta-clientes» o «caca de formularios». Estos en los que te piden cuarenta datos… ¡¡¡y todos obligatorios!!!


    ¡¡¡PERO A DÓNDE VAAAAAAAASSSSSS!!!

    Estos formularios… ¡¡¡a la basura!!!

  • Multi-step: existen también los llamados formularios de contacto multi-step, que lo que hacen es separar las preguntas que haces a tus usuarios en varios pasos o páginas para que parezca más ligero.

    ¡Qué quieres que te diga!, para mí esto es lo mismo que un truño con azúcar… ¡por mucho que lo endulces, sigue siendo un truño!

  • Tipo popup: los formularios de contacto tipo popup pueden estar bien para algunos casos en tu página web, como puede ser una llamada a la acción, una campaña promocional, etc. pero el formulario principal de tu web que no sea tipo popup, por Dior, pues si el usuario tiene bloqueados los popups en su navegador… ¡te va a cubrir el formulario la abuela de la fabada!

     

  • De suscripción: los formularios de suscripción suelen ser sencillos y básicos y la premisa fundamental es crear base de datos de usuarios o seguidores de nuestras peripecias, nuestro blog o nuestra vida emprendedora (aburrida en muchos casos). Con pedir los campos Nombre y Email, vas que chutas.

Cuanto más simple, mejor

¿Qué necesitas para comenzar una conversación con un prospecto/posible cliente?

¿Su número de pie?

¿Su grupo sanguíneo?

¿El nombre de su gato?

¡No seas pesado/a ya desde el comienzo!

Pide únicamente los campos necesarios y una vez el usuario te escriba, ya tendrás tiempo a hablar con él y pedirle más cosas si te contrata.

¿Campos obligatorios u opcionales?

Otra cosa que me irrita muchísimo… que te pidan 20 datos y encima ¡¡¡TODOS OBLIGATORIOS!!!

¡¡¡Estás de coña, no!!!

Si quieres que tus usuarios cubran tus formularios de contacto, pon solo como obligatorios los campos Nombre y Email… y como mucho muchísimo, el Teléfono.

¡El resto, si no te los dan, tampoco te flageles!

Información legal que hay que incluir en los formularios de contacto

Por si no lo sabes, te lo digo yo: todos los formularios de contacto que tengas en tu página web tienen que cumplir con una serie de obligaciones legales que desde el parlamento europeo se han sacado de la manga para complicarnos la vida.

Estos son los campos que debes añadir:

  • Mensaje sobre el uso de los datos que recopilas: además del check, en la parte inferior de tus formularios debes incluir un mensajito bastante coñazo en el que informas a tus usuarios del uso que haces de sus datos.

    Básicamente tienes que decirles que vas a venderlos a empresas de Kuala Lumpur y cosas así. Esto es coña, ¿vale? 😀


  • Check de aceptación de la Política de Privacidad: para que un usuario pueda enviarte un formulario debe aceptar tu Política de Privacidad. Para ello debes añadir en tus formularios un check obligatorio con un enlace a la página donde tienes las dichosas cláusulas legales redactadas correctamente.

¡Personaliza tus mensajes!

En los formularios de contacto de algunos plugins podremos añadir una serie de campos, etiquetas, mensajes, etc. para personalizar todo a nuestro gusto.

Si tienes la posibilidad, hazlo, para que tu formulario quede lo mejor posible.

Pero espera… ¿te has parado a pensar que aquí podemos ser creativos también?

¿Cómorrrrr??? ¡Edu, no me jodas, que es un formulario!

Mira, te lo muestro con un ejemplo…

Etiquetas

Estos serían los campos de un formulario de contacto sencillo con las etiquetas que ve el usuario en cada uno de ellos:

Pero, ¿te imaginas poner las etiquetas de esta otra forma?…

¿A que no es lo mismo? ¡¡¡Claro que no es lo mismo, caramba!!!

Vale, cierto, según el negocio que tengas no te vas a poner en modo cachondeo con esto, pero si el tono de tu web/blog es desenfadado, ¿por qué no?

¡Saca tu vena creativa, pero no bebas vino antes!

Mensajes dinámicos

En los formularios de contacto suele haber la posibilidad de configurar una serie de mensajes que pueden saltar en algún momento, por ejemplo:

  • Mensaje de formulario enviado satisfactoriamente
  • Mensaje de error en el envío
  • Mensaje de «Campo obligatorio»
  • Mensaje de envío no válido.

Pues en estos mensajitos que el usuario puede ver en cualquier momento, puedes ser también algo gamberrete y meter algo desenfadado…

Añadir otras formas de contacto junto a tu formulario

Existen otras formas de contacto que puedes implementar junto a tu formulario para facilitar que los usuarios se comuniquen contigo, aunque el formulario sigue siendo la más común.

Por ejemplo, puedes añadir con Elementor un botón de WhatsApp o Messenger o incluso generar un sistema de reservas muy útil para webs de hoteles, peluquerías, etc.

Aquí puedes ver cómo hacerlo con Elementor:

Plugins para crear formularios de contacto en WordPress

Existen una buena ristra de plugins gratuitos y/o de pago con los que montar un formulario de contacto bien chulo y funcional en WordPress.

Los más conocidos son los siguientes, aunque ahora no me voy a poner a explicarte cada uno, pues el post no va de ellos:

Formulario de contacto de Elementor

Pero a pesar de que hay un montón de plugins muy buenos para este cometido, yo voy a contarte aquí cómo diseñar un formulario de contacto súper funcional e integrado con Elementor, uno de los mejores editores visuales para diseñar páginas web en WordPress.

Widget ‘Formulario’ de Elementor: funcionalidades más importantes

En este apartado no voy a entrar en temas de diseño ni de estilos; solo voy a hablarte de funcionalidades.

Lo que debes conocer de los formularios de contacto de Elementor en este sentido está en la pestaña ‘Contenido’ y las más importantes son las siguientes:

  1. Form fields: aquí debes añadir los campos que necesitas en tu formulario. Tienes estos tipos de campos:
    • Texto: campo de texto simple.
    • Email: ¡eso!
    • Textarea (área de texto): campo de texto largo o tipo parrafada.
    • URL: añadir la dirección de una web.
    • Tel (teléfono): ¿te lo tengo que explicar? 😛
    • Radio (no, no es para poner una emisora): permite al usuario seleccionar una única opción entre varias pre-configuradas por ti.
    • Seleccionar: incluye un listado de opciones para escoger una (Ej.: Provincias)
    • Checkbox: como la opción ‘Radio’, pero aquí el usuario podrá marcar más de una opción de las pre-configuradas.
    • Acceptance: añade el check de aceptación de tu Política de Privacidad con esta opción.
    • Número: para añadir datos numéricos.
    • Fecha: añade una fecha.
    • Time: añade una hora.
    • File upload: campo para poder subir un archivo.
    • Contraseña: campo para añadir una contraseña (útil para formularios de login).
    • HTML: añade información en formato HTML con este campo.
    • Hidden: podrás añadir información oculta para el usuario, pero que se visualice entre los datos recogidos en el formulario (Ej.: el título de la landing page donde está alojado el formulario).
    • reCaptcha: opción para chequear que el que cubre el form es un ser humano (o al menos que lo parezca) y no un robot.
    • HoneyPot: campo «invisible» que sirve para bloquear a los robots de spam.
  2. Submit button: configura aquí tu botón para enviar el formulario.
  3. Actions after submit: existen una serie de acciones que pueden ocurrir una vez el usuario envía el formulario.

    ¿Quieres que el formulario te llegue vía email? ¿o deseas integrarlo con Mailchimp? ¿y con Sendinblue? ¿ActiveCampaign?…

    Pues con estas acciones puedes automatizar tus formularios de contacto un montón:

    • Email: puedes configurar el email en el que recibirás los formularios enviados por tus usuarios.
    • Email 2: ¿quieres enviar una respuesta predeterminada al usuario tras enviarte el formulario? ¡Podrás hacerlo desde aquí!
    • Redirect: si deseas redirigir a tus usuarios a, por ejemplo, una página de ‘Gracias’ o a una de ‘Confirmación’, con esta opción puedes añadir un link que saltará después de pulsar el botón de ‘Enviar’.
    • Webhook: si necesitas realizar una integración entre el formulario y otras herramietas como Zapier y otras plataformas (de email marketing por ejemplo), podrás hacerlo añadiendo aquí la URL de un webhook.
    • Herramientas de Email/Automatización: Elementor tiene pre-desarrolladas integraciones con varias de las herramientas de email marketing y automatización más conocidas: Mailchimp, ActiveCampaign, Drip, GetResponse…
    • Slack: integra tus formularios fácilmente con tu perfil de Slack.
    • Discord: herramienta de comunicación para jugadores de videojuegos. Podrás integrar tu formulario con ella.
    • Popup: haz saltar un popup de Elementor cuando alguien envíe un formulario, por ejemplo, un popup de ‘Gracias’.

      Cada una de estas acciones te «creará», al seleccionarla, una pestañita nueva en este apartado de ‘Contenido’ para poder configurar una a una.

       

  4. Opciones adicionales: añade aquí un ID único a tu formulario y configura tus mensajes personalizados (Formulario enviado, Error, Campo obligatorio, etc.)

Integrar un formulario de contacto de Elementor con una herramienta de email marketing

Como ya te he comentado aquí arriba, aunque hay pre-desarrolladas algunas integraciones en los formularios de contacto de Elementor con varias de las herramientas de email marketing y automatización más importantes, puede darse el caso (de hecho, es más que probable) que tu herramienta no esté en esa lista.

Si deseas integrar tu herramienta de email marketing con Elementor, existe una forma de hacerlo a través de Zapier, una conocida plataforma con la que crear integraciones de todo tipo entre cientos de herramientas del mercado.

Yo utilizo la herramienta de email marketing Sendinblue y he tenido que crear integraciones para que recogiese los datos de mis formularios de contacto de Elementor.

Aquí te dejo un vídeo en el que explico paso a paso cómo hacerlo y, aunque la integración la realicé con Sendinblue, el proceso es prácticamente el mismo para otras herramientas de email marketing.

Cómo crear un formulario de contacto COJONUDO con Elementor… ¡paso a paso!

Arriba, en las funcionalidades más importantes del widget ‘Formulario’ de Elementor, ya te he explicado para qué sirve cada opción de todas las que aparecen en la pestaña ‘Contenido’.

Ahora te voy a enumerar los pasos que sigo yo para crear un formulario de contacto COJONUDO:

  1. Crear el formulario: si no añades un formulario, ¡a ver cómo lo configuras…!
  2. Nombrar el formulario: ponle un nombre a tu formulario.

  3. Añadir los campos: en el formulario de mi propia web tengo estos campos y me llegan de sobra; si tú quieres más, arriba te he explicado las opciones existentes:

    • Nombre: tipo de campo ‘Texto’.
    • Email: tipo de campo ‘Email’.
    • Mensaje: tipo de campo ‘Textarea’.
    • Texto legal: tipo de campo ‘HTML’.
    • Aceptar Política Privacidad: tipo de campo ‘Acceptance’. El texto que yo añado en la cajita de ‘Acceptance text’ es un HTML con link:

      Aceptar <a href="/politica-de-privacidad/">Política de Privacidad</a>

  4. Configurar el botón de envío (Submit button): como mínimo ponle el texto en el idioma que necesites (por defecto aparece ‘SEND’).

  5. Actions After Submit: aquí viene lo bueno… La configuración de lo que quieres que suceda una vez el usuario hace clic en el botón de ‘Enviar formulario’

    En mi caso, yo utilizo las siguientes opciones (arriba te he puesto para qué utilizar cada una:

    • Email: aquí yo añado mis datos para recibir en mi correo el mensaje, pero puedes configurar lo que tú desees. Los campos que debes customizar son:
      • To: aquí pon la dirección de email donde quieres recibir las solicitudes de contacto.
      • Subject: el asunto del email que recibirás.
      • Mensaje: aquí yo siempre dejo el shortcode [all-fields] para que me añada en el email todos los datos de los campos que cubrirá el usuario. Cada campo del formulario tiene un shortcode propio, así que si en el cuerpo del mensaje solo quieres recibir algunos de los datos, añade aquí los shortcodes uno detrás de otro.
      • From Email: añade aquí la dirección de email del remitente (el tuyo).
      • From Name: aquí incluye el nombre del remitente (yo pongo «Refrescando Negocios»).
      • CC/BCC: añade aquí emails en copia (CC) o copia oculta (BCC).
      • Meta Data: si deseas añadir metadatos del envío en el pie del email, aquí podrás decidir cuáles: fecha, hora, URL de origen y otros datos…
      • Send As: con esta opción puedes decidir si enviar el email como HTML o como texto plano.
    • Email 2: este campo es prácticamente igual que el anterior, salvo por un par de campos que yo personalizo de la siguiente manera, pues lo utilizo para enviar un email automático al usuario que se acaba de registrar:
      • To: aquí pongo el shortcode [field id="email"] para que el email del receptor sea el mismo que inserta el usuario en el campo ‘Email’.
      • Mensaje: en este campo configuro un mensaje de respuesta automática al usuario, del tipo «Gracias por contactar, antes de 48h te responderé, bla, bla, bla…»
      • From Email y Reply To: aquí introduzco mi email en ambos.
      • From Name: aqui pongo mi nombre.
      • El resto de campos los dejo vacíos…

         

    • Webhook: aquí incluyo la URL del webhook de Zapier que tengo integrado con mi herramienta de email marketing y automatización, Sendinblue.
  6. Opciones adicionales: aquí cambio los textos originales en inglés por unos personalizados.

¡¡¡Y hasta aquí la parrafada!!! ¡¡¡Te habrás quedado a gusto!!! 

Buffff, creí que no llegaba al final…

Como ves, parece que no, pero crear un formulario de contacto COJONUDO tiene su miga…

¡¡¡Pero aquí está papá Edu para mostrarte el camino hacia la gloria!!! 😛

Las 9 fases cruciales para diseñar una web atractiva y efectiva

Aprende todos los pasos para diseñar una web profesional con la que conseguir resultados reales .

¡Hey! ¿Te apetecería recibir CONTENIDOS FRESQUITOS en tu correo?

Si buscas info sobre Diseño Web, Elementor, WordPress, Marketing Digital, Redes Sociales y otros temillas refrescantes... ¡apúntate ahora y TE REGALO UN CHECKLIST de comprobaciones que deberías hacer antes de publicar tu web!

Conclusión

Espero que te haya molado y le saques mucho partido a una de las partes más importantes de nuestra web, aunque a veces parezca una pijada: el formulario de contacto.

No escatimes tiempo en configurar bien tu formulario de contacto, porque es el primer puente entre un posible cliente y tú. Personalízalo y automatízalo si puedes. ¡Te ahorrará trabajo!

 

¿Y ahora qué? ¿Te animas a dejarme un comentario, 5 simpáticas estrellitas y/o/a/u compartir el post en tus Redes Sociales????

¿NO? ¡¡¡Voy a lloraaaaaaarrrrrr!!!!! ¡¡¡Guaaaaaaaaaa!!! 🙁

Bueno, haz lo que salga de lo más profundo, pero piensa que si no lo haces, otra serpiente de cascabel se comerá a un inocente e incauto ratoncito.

Ciaoooo, pescaooooo!!!!!

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (6 votos, promedio: 4,83 de 5)
Cargando…

Edu Rubianes

Soy Diseñador Freelance de Páginas Web con WordPress. Mi misión es ayudar a EMPRENDEDORES y PEQUEÑAS EMPRESAS a tener una web moderna y fresca para mejorar su imagen y sus ventas.

Esta entrada tiene 10 comentarios

  1. Hola Edu!

    Cómo siempre, un estilo refrescante, buen contenido y muy bien explicado.

    Sigue así, compañero, me mooola tu estilo y me aporta muchos conocimientos.

    1. Ese Jesús!!!

      Muchas gracias por tus palabras… Me alegra que te guste mi estilo, creo que hay que tener algo más de cachondeo en los Posts… hay que divertirse mientras se aprenden cosas; me alegra ver que mis artículos son entretenidos a la vez que útiles!

      Un abrazo, amigo! 😀

  2. Hola Edu,

    Muy buen artículo, no obstante estoy intentando hacer que se envíe vía formulario un archivo adjunto y que el asunto del mail sea dinámico. Me explico mejor, por ejemplo quiero que un usuario me envíe a mi correo de manera anónima un archivo con una encuesta de satisfacción dentro. Lo que pasa es que quiero que en el asunto se refleje un campo concreto del usuario, es decir el nombre de su empresa y yo no sepa de qué trabajador de esa empresa viene dicho formulario. Podrías comentarme cómo hacerlo con elementor ?

    muchas gracias de antemano

    1. Hola Antonio,

      Gracias por tu comentario y por tus palabras 😉

      Para conseguir eso, lo que debes hacer es crear un campo llamado «EMPRESA» o «COMPANY» y después, en el apartado ‘EMAIL/SUBJECT’ tienes que insertar el shordcode de ese campo EMPRESA/COMPANY, que puedes encontrar en su pestaña ‘Avanzado’. Te quedaría algo como Subject = [field id="company"].

      Espero haberte ayudado 🙂

  3. Muchas gracias por tu ayuda. Decirte que al final he optado por Gravity Forms, ya que con Elementor me estaba dando muchos problemas a la hora de enviar el formulario al email que especificaba.

    Un abrazo

    1. No hay de qué, Antonio. Espero que con Gravity te vaya fino, que es un plugin muy bueno también 😉

  4. Hola Edu,
    Enhorabuena por el post, me ha solucionado definitivamente el problema que tenía a la hora de configurar correctamente mi formulario de contacto con Elementor Pro

  5. Hola Edu. lo acabo de ver y esta genial como siempre. Cuando en su momento lo tenga que incluir en mi web. que es increíble como hasta ahora no lo he hecho, lo volveré a mirar, solo una pregunta por ahora. Si mi cuenta de email es propia de mi dominio, en que momento la integras en el proceso. Porque tu mencionas que has ingresado tu mail de la cuenta de bluemail. Muchas gracias !!!

    1. Qué tal Mónica!!!

      En la pestaña «Actions After Submit» debes seleccionar la opción «Email» y se te creará más abajo un apartado específico para configurar esta opción. Ahí podrás introducir la dirección de email donde quieras recibir los formularios de contacto.

      Gracias por pasarte por mi blog 😉

      Saludos!!!

Deja un comentario

Información básica sobre protección de datos

  • Responsable Eduardo Rubianes .
  • Finalidad Moderar los comentarios.
  • Legitimación Tu consentimiento.
  • Destinatarios RAIOLA NETWORKS, S.L..
  • Derechos Acceder, rectificar y suprimir los datos.
  • Información Adicional Puedes consultar la información detallada en el Aviso Legal.

Cerrar menú

Las 9 fases cruciales para diseñar una web atractiva y efectiva

Responsable del fichero: Refrescando Negocios. Finalidad: envío de contenidos e información comercial. Legitimación: gracias a tu consentimiento. Tus datos se encuentran alojados en la plataforma de email marketing Sendinblue, cuyo titular es SendinBlue, Sociedad por Acciones Simplificada, alojada en Francia. Podrás acceder, rectificar, limitar y suprimir tus datos a través del email info@refrescandonegocios.com, así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar mi Política de Privacidad en https://refrescandonegocios.com/aviso-legal.

Guía GRATUITA por entregas con la que aprenderás a diseñar una web profesional y a conseguir resultados reales para vivir de ella.