8 hermosos ejemplos de formularios de contacto + cómo agregarlos a su sitio web

Cinco consejos para perfeccionar el diseño de su formulario de contacto

Antes de entrar en los ejemplos de formularios de contacto reales, tomemos un desvío rápido y hablemos sobre lo que hace que un formulario de contacto sea excelente. Este desvío preparará el escenario a medida que analicemos lo que hace bien cada ejemplo de formulario de contacto en la siguiente sección.

Lo más probable es que tenga un formulario de contacto porque desea que la gente lo complete. Entonces, ¿cómo consigues que más gente lo utilice? Estas son algunas de las mejores prácticas ...

1. Comunique claramente para qué sirve su formulario

Si tiene un negocio o un sitio web ocupado, es posible que tenga varios formularios de contacto para diferentes usos. Por ejemplo, puede ser:

• Formulario de consultas de ventas

• Formulario de atención al cliente

• Formulario de pedido en línea

• Formulario de solicitud de devolución de llamada

• Etc.

Hay dos enfoques básicos para manejar esto y verá ambos en los ejemplos de formularios de contacto de la vida real a continuación:

1. Formas separadas. Cree formularios separados para cada caso de uso y agregue texto que aclare exactamente lo que hace cada formulario.

2. Un campo desplegable. Agregue un campo desplegable en la parte superior de su formulario que enumera los diferentes casos de uso y enruta automáticamente su formulario de contacto al lugar correcto.

De cualquier manera, use las etiquetas de su formulario y el texto circundante para que el propósito de cada formulario de contacto sea absolutamente claro para sus visitantes.

2. Limite la longitud del formulario para obtener más conversiones (pero no se olvide de la calidad)

En igualdad de condiciones, los datos parecen sugerir que los formularios de contacto más largos significan menos presentaciones.

Por ejemplo, HubSpot analizó más de 40.000 páginas de destino y notó una clara correlación entre las tasas de conversión y la cantidad de campos de formulario.

La tasa de conversión máxima es de alrededor de tres campos. La tasa de conversión cae constantemente hasta ocho campos de formulario, antes de aplanarse:

Fuente

En una nota más anecdótica, Marketo probó tres formularios con resultados similares a HubSpot:

• 5 campos: tasa de conversión del 13,4%

• 7 campos: tasa de conversión del 12,0%

• 9 campos: tasa de conversión del 10%

Por supuesto, el simple hecho de obtener más envíos de formularios de contacto podría no ser su objetivo real, por lo que no es tan simple como reducir el número de campos en sus formularios al mínimo.

Por ejemplo, si bien puede obtener más presentaciones al reducir los campos, es posible que esas presentaciones no sean de tan alta calidad porque la barrera de entrada es muy baja.

En general, una buena regla general es eliminar todos los campos innecesarios , pero no elimine los campos que recopilan información importante solo para acortar su formulario, especialmente si esa información sirve para calificar sus clientes potenciales.

3. Utilice microcopia inteligente para explicar los campos.

Si su formulario de contacto tiene más que los campos estándar de "nombre, correo electrónico, mensaje", corre el riesgo de confundir a los visitantes.

Por ejemplo, si tiene un campo de "presupuesto", es posible que no esté claro para qué es ese presupuesto. ¿Es para todo el proyecto? ¿Es solo para una parte específica?

Para evitar tal confusión, puede agregar "microcopia" a su formulario de contacto.

La microcopia es básicamente un pequeño texto explicativo que acompaña a los campos del formulario para hacerlos más claros. Por ejemplo, mire el campo Volumen de pagos a continuación (también verá este ejemplo más adelante):

4. Experimente con diferentes formatos

Cuando la mayoría de la gente piensa en un formulario de contacto, imagina el mismo formulario incrustado básico que ves en la mayoría de los sitios web. Pero si desea facilitar que las personas se pongan en contacto con usted, a veces vale la pena experimentar con diferentes métodos de visualización, como una ventana emergente o una barra de notificaciones.

Por ejemplo, tener un botón de contacto flotante en el costado de su sitio puede ser excelente para un formulario de contacto de soporte. Hace que sea muy fácil para los usuarios comunicarse con usted tan pronto como encuentran un problema, sin que tengan que buscar su página de contacto:

5. Dígale a la gente los próximos pasos y establezca expectativas

El diseño de su formulario de contacto no está terminado una vez que las personas presionan Enviar.

Para ofrecer una mejor experiencia de usuario, desea decirle a la gente exactamente lo que sucederá a continuación y cuánto tiempo llevará. Por ejemplo…

• ¿Responde a todas las consultas o solo a algunas?

• ¿Cuánto tiempo tardarás en responder?

• ¿Responderás por correo electrónico u otro método?

Si establece expectativas claras, sus visitantes no se preguntarán qué está pasando y si su formulario está funcionando.

Ocho excelentes ejemplos de formularios de contacto de sitios web reales

Ahora que conoce las mejores prácticas, veamos algunos diseños de formularios de contacto del mundo real para inspirar los suyos y mostrarle estas mejores prácticas en acción.

1. Rayas

El formulario de contacto de ventas de Stripe es un gran ejemplo de cómo, a veces, recopilar un poco de información adicional puede hacer que sus formularios de contacto generen clientes potenciales más calificados (incluso si podría reducir un poco la tasa de conversión de referencia).

Además de los campos de información estándar, Stripe agrega un campo de volumen de pagos para que puedan comprender mejor la calidad potencial de cada cliente potencial.

Más allá de eso, hay otras buenas opciones de diseño que incluyen:

• Prueba social : esos logotipos en el lateral agregan prueba social al mostrar todas las empresas exitosas que usan Stripe.

• Microcopia : el término "volumen de pagos" puede resultar un poco confuso, por lo que Stripe añade una microcopia útil que explica cómo completar el campo.

• Propósito : Stripe deja muy claro que este formulario es solo para consultas de ventas. Esto asegura que no haya personas que intenten usarlo para soporte u otros usos que no sean de venta.

2. Getsitecontrol

Aquí en Getsitecontrol, manejamos el diseño de nuestro formulario de contacto de manera un poco diferente.

En lugar de crear una página dedicada "Contáctenos" a la que los visitantes tienen que navegar, simplemente incluimos un enlace Contáctenos que abre una ventana emergente allí mismo, sin necesidad de recargar la página.

Esto es realmente conveniente para las personas porque pueden ...

• acceder a nuestro formulario de contacto desde cualquier página del sitio,

• enviar un mensaje sin interrumpir cualquier otra cosa que estuvieran haciendo (¡como leer esta publicación de blog!).

El formulario de contacto de Getsitecontrol es simple y fácil de completar. Además, comunica claramente los próximos pasos después de que las personas envíen el formulario, junto con una llamada a la acción para consultar el blog de Getsitecontrol.

3. Kinsta

Kinsta tiene una sola página de "Contáctenos" que guía automáticamente a los usuarios hacia el formulario de contacto adecuado sin necesidad de volver a cargar la página.

Kinsta enumera las cinco solicitudes de contacto más populares:

1. Precios o planes

2. Características o información técnica

3. Solicite una migración o cualquier pregunta relacionada

4. Publicación de invitado, publicación patrocinada o solicitud de vínculo de retroceso

5. Algo más

Cuando los usuarios seleccionan su objetivo, Kinsta muestra un formulario de contacto personalizado o un mensaje.

Esto permite a Kinsta recopilar exactamente la información que necesitan, sin sobrecargar a los visitantes con campos extraños.

Por ejemplo, en el formulario de contacto de Precios o planes , Kinsta agrega campos adicionales para comprender cuántos sitios web y visitantes busca alojar la persona, pero esos campos no aparecen en el formulario "Cualquier otra cosa".

Kinsta también establece expectativas claras en la parte superior: "Estaremos en contacto dentro de un día hábil".

4. Selección de selección

Choice Screening tiene un formulario de contacto extenso . A primera vista, podría pensar que eso acabará con las tasas de conversión del formulario. Y que es una especie de verdad - Elección de cribado, sin duda, recibir menos envíos de formularios que lo harían con una forma más corta.

Pero hablemos de por qué a veces eso está bien y por qué este es un excelente ejemplo de formulario de contacto.

Choice Screening opera en un espacio de empresa a empresa muy especializado. Están tratando de obtener clientes potenciales calificados que se convertirán en clientes de larga data, no solo en envíos de formularios de contacto.

Con su lista de servicios detallada y muchas casillas de verificación, el formulario descartará a las personas que aún no están seguras de lo que quieren y solo permitirá el paso de clientes potenciales calificados que tienen una gran posibilidad de convertirse en clientes.

¡Podría decir que Choice Screening está evaluando a sus clientes potenciales con este formulario de contacto!

5. Joel Klettke / Redacción publicitaria informal de negocios

Joel es un redactor publicitario profesional, por lo que puede apostar que el diseño y la copia de su formulario de contacto estarán a la altura.

El formulario de Joel en sí es simple, con los campos estándar más algunos campos de calificación adicionales para el presupuesto de una persona. Sin embargo, todo lo que sucede junto al formulario hace que este sea un buen ejemplo de formulario de contacto.

En ese texto, Joel hace un gran trabajo al establecer expectativas y calificar a sus clientes potenciales. También aleja deliberadamente a los clientes de bajo presupuesto al discutir sus tarifas mínimas. Si bien Joel podría eliminar estas menciones para obtener una tasa de conversión inicial más alta, hacerlo en realidad conduciría a un porcentaje más bajo de clientes potenciales calificados y simplemente terminaría perdiendo el tiempo de Joel.

6. Neil Patel

Neil Patel dirige uno de los sitios web de marketing digital más populares del mundo, por lo que puede estar bastante seguro de que recibe muchos formularios de contacto.

Para ayudar a enrutar esos envíos al lugar correcto, Neil incluye un menú desplegable "Me gustaría conversar sobre" donde las personas pueden elegir entre un rango preestablecido de opciones. También usa una microcopia en el cuadro de marcador de posición para implorar a las personas que mantengan sus mensajes breves y al grano.

Este es simple, pero a veces simple es todo lo que necesita en el diseño de su formulario de contacto.

7. Laboratorio de enfoque

Ok, este es divertido, caprichoso y definitivamente no funcionará para todos los negocios. Pero si estás en un espacio creativo (como lo es Focus Lab), crear un diseño de formulario de contacto caprichoso como este puede demostrar que eres capaz de pensar fuera de la caja.

En lugar de crear una forma tradicional, Focus Lab utiliza más un enfoque al estilo Mad Libs donde los visitantes ingresan su información en un párrafo existente. Al utilizar este enfoque, Focus Lab también puede recopilar más información (como objetivos y presupuesto) sin el aspecto imponente que podría tener un diseño de formulario de contacto más tradicional.

8. CAMICB

CAMICB, abreviatura de Community Association Managers International Certification Board, ofrece certificación para asociaciones comunitarias en los EE. UU.

Lo notable del formulario de contacto de CAMICB es que utiliza un enfoque híbrido de página emergente / "Contáctenos". Cuando los usuarios llegan a la página Contáctenos , el sitio web de CAMICB abre instantáneamente un formulario de contacto emergente simple donde los visitantes pueden enviar sus mensajes.

Con solo tres campos, CAMICB mantiene su forma breve y al grano. Luego, el enfoque emergente crea una interfaz agradable sin distracciones donde el enfoque está completamente en el formulario.

Esto hace que enviar una consulta sea lo más sencillo posible.

Y para facilitar aún más las cosas, CAMICB también muestra un formulario de contacto deslizable al que los usuarios pueden acceder en su pie de página:

Cómo crear su propio diseño de formulario de contacto personalizable

Después de examinar esos ocho ejemplos de formularios de contacto, probablemente tenga un montón de ideas sobre cómo puede aplicar estos principios a sus propios diseños de formularios de contacto.

Si desea comenzar, [Getsitecontrol] (/ feedback-popup / puede ponerlo en funcionamiento en poco tiempo.

A diferencia de la mayoría de las soluciones de formularios de contacto, Getsitecontrol le permite elegir entre cuatro posiciones flexibles y docenas de plantillas para su formulario. Puede crear una ventana emergente tradicional como la que vio con CAMICB y el sitio web de Getsitecontrol. O puede cambiar las cosas con diapositivas, barras de notificación, botones y más.

Podrá agregar tantos (o tan pocos) campos como necesite para obtener envíos calificados, y también puede insertar una microcopia para ayudar a los visitantes a completar su formulario.

Regístrese con Getsitecontrol hoy y podrá tener un formulario de contacto funcional en solo unos minutos.