Ready to build a website that does it all? 🏆 Get the free Webflow x Typeform ebook

here
Signup

Cómo hacer un formulario de contacto para una página web

Typeform puede ayudarte a crear un formulario de contacto con un diseño espectacular para tu página web. Es una forma muy sencilla de darles a tus usuarios, lectores o clientes la posibilidad de ponerse en contacto contigo. Y, además, tú podrás recabar datos de contacto, comentarios y opiniones con el mínimo esfuerzo.

En este tutorial te explicaremos cómo crear un formulario de contacto personalizado con Typeform (pero si prefieres ponerte manos a la obra enseguida y partir de un formulario que ya esté listo para usar, solo tienes que descargarte nuestra plantilla de formulario de contacto gratuita aquí).

En este formulario de contacto en concreto, vamos a preguntar a los usuarios cuál es su nombre y su dirección de correo electrónico y también reservaremos un espacio al final para que nos dejen un mensaje.

1. Abre tu área de trabajo, pulsa en el botón "+ Crear formulario" y, después, selecciona la opción "Empezar de cero" (o bien la plantilla de formulario de contacto que te acabas de descargar, si prefieres utilizar nuestro formulario prediseñado).

Screenshot 2024-06-07 at 11.39.27.png

2. Ahora, selecciona una de las opciones que aparecerán en pantalla para empezar a crear contenido. En nuestro caso, elegiremos la opción "Empezar de cero" (pero también puedes utilizar la plantilla de formulario de contacto que te acabas de descargar, si prefieres utilizar nuestro formulario prediseñado).

Screenshot 2024-06-07 at 11.40.35.png

3. Para diseñar nuestro formulario de contacto, empezaremos por añadir una pantalla de bienvenida. Es lo primero que verán los usuarios, tanto si se lo encuentran incrustado en tu página web como si acceden a él mediante un enlace directo. Haz clic en la pregunta de tipo "pantalla de bienvenida" y escribe un par de frases para animar a los usuarios a que dejen un comentario. En nuestro caso, utilizaremos un tono distendido y amigable. Puedes añadir algo más de contexto completando el campo opcional "Descripción".

Screenshot 2024-06-07 at 16.28.49.png

4. Puedes añadir una imagen a tu pantalla de bienvenida. Para ello, pulsa el botón "Añadir" que encontrarás al lado de "Imagen y vídeo" en el menú lateral de la derecha. Nosotros hemos elegido un GIF animado muy sencillito.

Screenshot 2024-06-10 at 10.29.14.png

5. A continuación, pediremos a los usuarios que nos digan cómo se llaman. Para ello, haz clic en la pregunta de tipo "respuesta corta" (o bien arrástrala directamente al editor) y escribe el enunciado que quieras. Como en la pregunta anterior, nosotros hemos añadido una descripción y un GIF animado para darle un toque más informal.

Screenshot 2024-06-10 at 10.29.56.png

6. Si saber el nombre de los usuarios es importante para ti, conviene que marques esta pregunta como "obligatoria" en el apartado "Opciones" de la pestaña "Pregunta" (que encontrarás en el menú lateral de la derecha).

Screenshot 2024-06-07 at 17.34.55.png

7. Ahora, selecciona una pregunta de tipo "email" para pedirles que te faciliten sus datos de contacto. Como queremos que nuestro formulario de contacto resulte cercano, podemos insertar el nombre del usuario dentro del enunciado de la pregunta para darle un toque más personal. Para ello, pulsa la tecla de la arroba (@) y aparecerá en pantalla el menú correspondiente a la función "recordar información". 

Screenshot 2024-06-10 at 10.30.34.png

8. Puedes preguntarles cuál es el motivo por el que quieren ponerse en contacto contigo con una pregunta de tipo "elección múltiple".

Screenshot 2024-06-10 at 10.31.11.png

9. En nuestro caso, vamos a insertar la respuesta que los usuarios seleccionen aquí en el "asunto" de un correo de seguimiento para poder ver fácilmente qué es lo que nos está pidiendo cada uno. Les daremos cuatro posibles opciones o motivos de contacto.

Ahora, haz clic en el menú de configuración (el icono del engranaje) y entra en la opción "Seguimientos" para crear un nuevo mensaje de seguimiento. Puedes recordar información de cualquiera de las preguntas de tu formulario e insertarla en el "asunto" del mensaje. Para ello, solo tienes que pulsar la tecla de la arroba (@) y elegir, en la lista desplegable que aparecerá en pantalla, la respuesta del usuario que quieras añadir.

Screenshot 2024-06-07 at 17.37.11.png

10. Por último, reservaremos un espacio para que los usuarios nos escriban un mensaje. Para ello, añadiremos una pregunta de tipo "respuesta larga" y, como en el caso anterior, completaremos también el campo de la descripción. Nosotros hemos optado aquí por pedirles a los usuarios que no se extiendan demasiado, pero también puedes fijar un límite de caracteres en el menú lateral de la derecha si quieres asegurarte de ello.

Screenshot 2024-06-10 at 10.31.50.png

11. Ahora que tu formulario de contacto está listo, puedes ponerlo a prueba, aunque te recomendamos que dediques un poco de tiempo a  personalizar el diseño para elegir los colores y tipos de letra que mejor encajen con tu empresa o página web.

Screenshot 2024-06-10 at 10.32.44.png

12. Es muy fácil incrustar tus typeforms donde tú quieras. Para ello, dirígete al panel "Compartir" y lee este artículo si quieres obtener más información al respecto.

Screenshot 2024-06-10 at 10.33.37.png

Qué hacer con la información de contacto que recibas

Puedes integrar tu formulario con la herramienta de generación de leads, CRM (gestión de las relaciones con los clientes) o atención al cliente que utilice tu empresa. De esta forma, podrás añadir nuevos contactos a tu base de datos de manera automática. Por ejemplo, puedes conectar tu typeform a HubSpot o MailChimp con nuestras integraciones nativas o bien a Zendesk a través de la integración con Zapier.

Consulta con nuestra comunidad