Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

12 mejores prácticas para el diseño de páginas de formularios de contacto (con ejemplos)

Un formulario de contacto bien diseñado es algo más que unos cuantos campos que los visitantes pueden rellenar. Es un puente entre usted y sus usuarios, que anima a más de ellos a ponerse en contacto.

En todas nuestras marcas, creamos y mostramos formularios de contacto para diversos fines. Con años de experiencia en diseño web y experiencia de usuario, sabemos lo importantes que son unos formularios bien diseñados para aumentar las conversiones y mantener la participación de los usuarios.

En este artículo, compartiremos algunas de las mejores prácticas para diseñar formularios de contacto. Aprenderás qué hace que estos diseños sean tan eficaces.

Contact form page design

¿Por qué es tan importante una buena página de formulario de contacto?

Una página de formulario de contacto es imprescindible en cualquier sitio web. Tanto si se trata de un blog personal como de un sitio web empresarial, una página de formulario de contacto ayuda a los usuarios a ponerse en contacto con usted en cualquier momento mientras visitan su sitio web.

A diferencia de los medios sociales, un formulario de contacto permite a los usuarios comunicarse con usted en privado, lo que genera confianza y puede cerrar ventas.

Muchos propietarios de sitios web no suelen prestar mucha atención a su página de contacto. La mayoría se limita a añadir un formulario de contacto y luego se olvida de él.

Si no obtiene suficientes clientes potenciales de la página de contacto de su sitio web, siga leyendo. Le mostraremos cómo optimizar su página de contacto para obtener conversiones.

Cómo crear una página de formulario de contacto en WordPress

WordPress no incluye una página de formulario de contacto. Necesitarás un plugin de formulario de contacto para crear un formulario y añadirlo a tu página de contacto.

Recomendamos usar WPForms. Nuestro equipo lo ha creado para que sea el plugin de formularios de contacto para WordPress más fácil de usar para principiantes. Además, la versión gratuita de WPForms está disponible en el directorio oficial de plugins de WordPress.org.

Para obtener instrucciones completas paso a paso, consulte nuestra guía sobre cómo crear un formulario de contacto en WordPress.

¿No tiene tiempo para diseñar su propia página de formulario de contacto? ¡Deje que WPBeginner le ayude! Nuestros servicios de diseño de sitios web en WordPress ofrecen soluciones rápidas y profesionales adaptadas a sus necesidades. Omitir la molestia y obtener una página de formulario de contacto bellamente diseñado que involucra y convierte. ¡ Haga clic aquí para obtener más información y empezar hoy mismo!

Ahora que ya ha creado un formulario de contacto, le presentamos algunas de las mejores prácticas de diseño de páginas de formularios de contacto que pueden ayudarle a aumentar sus conversiones:

¿Preparados? Vamos allá.

1. Asegúrese de que su formulario de contacto funciona

Los proveedoresde alojamiento de WordPress suelen tener una función de correo mal configurada que impide que los correos electrónicos de los formularios de contacto lleguen a la bandeja de entrada. En su lugar, suelen acabar en la carpeta de Spam o no llegan.

Si usa la versión pro de WPForms, podrá ver las entradas / registros del formulario en su área de administrador / administración de WordPress. Pero con un plugin gratuito, es posible que ni siquiera sepas que tu formulario no está funcionando.

Después de añadir un formulario de contacto a su sitio WordPress, es importante probarlo enviando un formulario.

Si no recibes avisos por correo electrónico, quizás quieras seguir nuestra guía para corregir el problema de que WordPress no envía correos electrónicos.

Además, es posible que desee familiarizarse con los errores de formulario para saber cuál es el mejor método para diagnosticarlos.

A veces, los formularios no envían correos electrónicos de aviso debido a problemas con el plugin o los ajustes SMTP. Los errores de validación pueden ocurrir cuando los campos del formulario están mal configurados, y también puede que tengas que lidiar con Spam incluso con las medidas anti-spam implementadas.

Para más detalles, puede consultar nuestra guía sobre qué hacer cuando su formulario de WordPress no funciona.

2. Evite campos innecesarios en el formulario de contacto

Puede añadir muchos campos a su formulario de contacto, pero cada campo adicional tardará más en completarse.

Por eso recomendamos reducir al mínimo los campos del formulario de contacto y solo añadir aquellos que ayuden a comprender la pregunta del usuario.

Neil Patel's contact page

(Fuente: Neil Patel)

Si necesita un formulario más largo, puede comprobar el consejo adicional que aparece al final de este artículo para reducir el abandono de formularios.

3. Explique por qué los usuarios deben ponerse en contacto con usted

La página del formulario de contacto debe ser atractiva. Puedes empezar con un saludo y un mensaje de bienvenida para que sea cortés y útil.

A continuación, también puede indicar a los usuarios en qué tipo de preguntas puede ayudar, como en el ejemplo siguiente:

Contact form welcome message

(Fuente: Michael Hyatt)

Si tiene diferentes páginas para diferentes departamentos, dirigir a los usuarios a la página correcta es muy útil.

Por ejemplo, puede enviar a los clientes existentes a soporte y a los blogueros invitados a un formulario de escritura.

OptinMonster's contact page

(Fuente: OptinMonster)

4. Proporcionar formas alternativas de ponerse en contacto con usted

Añadir un formulario a su página de contacto facilita a los usuarios el envío de mensajes. Sin embargo, ofrecer otras opciones de contacto puede ayudar a los usuarios a elegir lo que más les convenga.

El chat en directo y los chatbots son excelentes opciones para ofrecer respuestas instantáneas a las consultas de los usuarios, aumentando la participación y la satisfacción. Estas características pueden gestionar preguntas comunes de forma eficiente y derivar incidencias más complejas a un representante humano.

Si quieres añadir un chat en vivo o un chatbot a tu sitio WordPress, entonces puedes consultar nuestra guía sobre cómo añadir LiveChat a tu tienda WooCommerce (y aumentar las ofertas).

Además del formulario y el chat en directo, puede incluir la dirección de correo electrónico de su empresa, WhatsApp o el número de teléfono como métodos de contacto alternativos.

Por ejemplo, la página de contacto de Accenture ofrece a los usuarios varias formas de ponerse en contacto. Dispone de números de teléfono para responder rápidamente a preguntas urgentes.

Providing other ways to contact

Además, el menú desplegable te permite encontrar formularios de contacto y direcciones de correo electrónico para diferentes necesidades.

Por ejemplo, si despliega el menú “Medios de comunicación/analistas del sector”, encontrará las direcciones de correo electrónico de los representantes. Esta configuración facilita la elección de la mejor manera de llegar al departamento o servicio adecuado.

Adding email addresses

(Fuente: Accenture)

5. Añadir perfiles en medios sociales

Aunque la mayoría de los usuarios querrán ponerse en contacto con usted en privado, algunos preferirán hacerlo a través de Facebook o Twitter.

Por lo tanto, puede añadir botones de medios sociales a su página de formulario de contacto como una forma alternativa para que los usuarios se pongan en contacto con usted.

Add links to your social media profiles

(Fuente: Retro Portfolio)

6. Facilite la dirección y el mapa

Añadir una dirección y una ubicación física de su empresa, junto con un mapa, ayuda a aumentar la confianza de los usuarios. Demuestra que tienes una presencia física, lo que puede hacer que tu negocio parezca más fiable.

Aunque no tenga una tienda u oficina física, a los usuarios les reconforta saber dónde se encuentra.

Add map and location on your contact form page

(Fuente: LEDbow)

Si tiene varias sedes en diferentes ciudades o países, añadirlas todas hace que su página de formulario de contacto sea mucho más útil.

Providing multiple addresses

(Fuente: The Chase)

Al cabo de un tiempo, se dará cuenta de que muchos de sus usuarios hacen preguntas similares.

Puede ayudarles a ahorrar tiempo y responder a esas preguntas directamente en su página de contacto añadiendo una sección de FAQ.

Adding FAQs

(Fuente: Smart Passive Income)

8. Optimizar la página de confirmación del formulario

La mayoría de los plugins de formularios de contacto permiten mostrar a los usuarios un mensaje de confirmación tras el envío o redirigirlos a una página diferente.

Redirigir a los usuarios te da la oportunidad de mostrarles tus recursos más útiles, como tus contenidos más populares u ofrecerles un código de descuento.

Otra forma de optimizar su página de confirmación de formularios es dar seguimiento con posibles pasos siguientes. Por ejemplo, puede pedir a los visitantes que se suscriban a su boletín o que sigan sus cuentas en los medios sociales.

Adding follow up instructions for users while waiting for answer

(Fuente: Orbit Media)

9. Pida a los usuarios que se unan a su lista de correo electrónico

Al crear un formulario de contacto, puedes pedir a los usuarios sus direcciones de correo electrónico. Si lo hace, le recomendamos que añada una casilla de verificación para invitarles a unirse a su lista de correo electrónico.

Y si aún no está creando una lista de correo electrónico, quizá le interese consultar nuestra guía sobre por qué es tan importante crear una lista de correo electrónico.

Subscribing to newsletter checkbox

(Fuente: WPBeginner)

Para más detalles sobre cómo hacerlo, puede consultar nuestro tutorial sobre cómo generar clientes potenciales en WordPress como un profesional.

10. Utilice fotos de su equipo

Añadir fotos de los miembros de su equipo a la página de contacto la hace más personal y acogedora. Los visitantes sabrán que detrás de la página de contacto hay personas reales dispuestas a responder a sus preguntas.

Adding a photograph

(Fuente: Goldelucks)

11. Haga que su página de formulario de contacto sea atractiva

Su página de formulario de contacto no tiene por qué ser sencilla. Añadir fotos de tu oficina, tienda, productos o equipo puede reflejar la personalidad de tu empresa.

También puede hacerlo divertido añadiendo elementos de diseño, como iconos, ilustraciones o animaciones, y utilizando los colores de su marca.

Para más detalles sobre cómo hacerlo, consulte nuestro tutorial sobre cómo crear una página personalizada en WordPress.

Adding personality to contact form

(Fuente: Omsom)

12. Sea creativo con el diseño de su página de contacto

Es posible que haya advertido que muchas páginas de contacto de distintos sitios web siguen una estructura / disposición / diseño / plantilla sencilla y muy predecible. Aunque cumple su función, puedes utilizar tu página como una oportunidad para destacar.

Muchos temas premium de WordPress vienen con estilos incorporados para los formularios. Puedes personalizar esos estilos añadiendo CSS personalizado o usando un plugin como CSS Hero.

También puedes utilizar un plugin maquetador de arrastrar y soltar como SeedProd para crear la disposición de la página del formulario de contacto. Esto te permitirá ser más creativo sin tener que escribir ningún código.

Dispone de plantillas de inicio que pueden ayudarle a establecer un sitio web en unos pocos clics, y no en una sola página. Como estas plantillas incluyen una página de contacto ya preparada, lo único que tienes que hacer es ajustar el contenido para adaptarlo a tu marca o negocio.

Using starter templates to create contact page

(Fuente: SeedProd)

Consejo adicional: Cómo reducir el abandono de formularios

Cuando se crea un formulario de varias páginas o un formulario con muchos campos, se corre el riesgo de reducir la tasa / tarifa de conversión. A menudo, los usuarios se cansan del formulario y lo abandonan antes de completarlo.

A menudo llamamos a esto abandono de formulario, y puede ocurrir con cualquier formulario, incluyendo la suscripción al boletín de correo electrónico, finalizar compra / pago en WooCommerce, o formulario de contacto.

Para combatir la fatiga de los formularios, muchos maquetadores avanzados como WPForms vienen con extensiones para el abandono de formularios. Esto le ayuda a capturar entradas / registros parciales de sus formularios.

Abandoned form in WPForms

Mediante el seguimiento del abandono de formularios, puede identificar qué formularios suelen quedar incompletos. Esto le permite realizar las mejoras necesarias para fomentar más envíos y reducir las tasas de abandono.

Para obtener información más detallada, puede consultar nuestra guía sobre cómo realizar un seguimiento y reducir el abandono de formularios en WordPress.

Guías de expertos en formularios de contacto y páginas de WordPress

Ahora que conoce las mejores prácticas para crear una página de contacto, puede que le interese ver otras guías relacionadas con formularios y páginas de contacto en WordPress:

Esperamos que este artículo te haya ayudado a conocer las mejores prácticas de diseño de páginas de formularios de contacto. A continuación, es posible que también desee ver nuestras guías paso a paso sobre cómo añadir autocompletar para los campos de dirección y cómo establecer el seguimiento de formularios de WordPress en Google Analytics.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

8 comentariosDeja una respuesta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. magnaa

    Excellent article – some great tips about contact form pages that I’ll be implementing! I think sounding more human is key. Gives everything a more authentic and enjoyable experience.

  3. natalie

    Thanks for the article, I would like to do your point number 9, see my attachment; Can you explain how to add that tick box please.

    thanks
    natalie

  4. Graham

    Great article guys, and I appreciate the example you have shared as well. Having created plenty of contact pages over the past 10 years, some fresh inspiration and good ideas are always welcomed!

  5. Sven Kox

    Nice article, thanks. I added a few new ones to my knowledge.
    One more tip: keep the field for the message big enough.
    It is not inviting if you have to write your message in a tiny window.

  6. Keely Worth

    Excellent article – some great tips about contact form pages that I’ll be implementing! I think sounding more human is key. Gives everything a more authentic and enjoyable experience.

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.