Cómo mostrar un formulario de contacto flotante en WordPress (3 métodos)

¿Alguna vez te preocupa que los visitantes quieran contactarte pero no sepan cómo?

Un formulario de contacto oculto en una página de WordPress es fácil de pasar por alto. Los clientes potenciales podrían irse sin hacer una pregunta, compartir comentarios o realizar una compra. Esto puede generar oportunidades perdidas y una experiencia de usuario menos amigable.

La buena noticia es que hay una solución simple: agregar un formulario de contacto flotante que siga a tus visitantes mientras navegan. De esa manera, pueden ponerse en contacto en cualquier momento sin tener que buscarlo.

Es una forma fácil de aumentar la interacción y generar confianza, sin ser intrusivo. Aún mejor, no necesitas ninguna habilidad de codificación. Con los plugins adecuados, puedes configurar uno en solo unos pocos clics.

En esta guía, te mostraremos tres métodos rápidos para agregar un formulario de contacto flotante a tu sitio de WordPress.

¿Qué es un formulario de contacto flotante y por qué usarlo?

Un formulario de contacto flotante permanece en la pantalla, como en la esquina inferior o el panel lateral, mientras los visitantes navegan por un sitio web de WordPress. Típicamente aparece como un pequeño botón o icono que se expande a un formulario completo al hacer clic o pasar el cursor sobre él.

Aquí hay algunos beneficios de usar un formulario de contacto flotante en tu sitio de WordPress:

• Accesibilidad. Dado que el formulario flota y permanece fijo, los visitantes del sitio pueden acceder a él desde cualquier página web en cualquier momento.
• Intrusión mínima. A diferencia de los pop-ups que pueden interrumpir la experiencia del usuario, los formularios flotantes suelen ser menos disruptivos y, aun así, son notables.
• Llamada a la acción. La presencia constante de un formulario flotante recuerda amablemente a los usuarios que interactúen, lo que ayuda a aumentar las conversiones.

Como propietario de un sitio web, puedes usar un formulario de contacto flotante para soporte al cliente, consultas de ventas y recopilación de comentarios.

Al permitir que los visitantes obtengan ayuda al instante mientras navegan, hagan preguntas sin salir de la página y compartan sugerencias en cualquier momento, creas una experiencia de usuario más fluida y agradable.

Afortunadamente, WordPress facilita la adición de un formulario de contacto flotante de diversas maneras. En las siguientes secciones, te mostraremos tres métodos sencillos para configurar uno:

• Método 1: Crear un formulario de contacto flotante en WordPress usando UserFeedback (Fácil)
• Método 2: Crear un formulario de contacto flotante en WordPress usando WPForms y OptinMonster (Máxima personalización)
• Método 3: Crear un formulario de contacto flotante en WordPress usando un plugin gratuito (Gratis + Fácil)
• Método alternativo: Usa un chatbot en tu sitio web
• Preguntas frecuentes sobre formularios de contacto flotantes en WordPress
• Recursos adicionales sobre formularios de WordPress

¡Empecemos!

Método 1: Crear un formulario de contacto flotante en WordPress usando UserFeedback

Si deseas crear un formulario de contacto flotante simple con opciones de personalización sencillas, este método es para ti.

UserFeedback es el mejor plugin de retroalimentación para WordPress que puede ayudarte a crear formularios de retroalimentación personalizables, formularios de contacto flotantes y encuestas emergentes. Viene con plantillas y preguntas integradas, incluidas para formularios de encuestas sobre la experiencia del sitio web y tiendas de comercio electrónico.

Al usar UserFeedback, puedes mejorar tu sitio web basándote en la entrada real de los usuarios, aumentar la satisfacción del cliente y abordar cualquier problema de manera oportuna.

En WPBeginner, hemos utilizado UserFeedback en nuestros propios sitios web y hemos tenido una gran experiencia con él. Para obtener más información sobre el plugin, no dudes en consultar nuestra reseña completa de UserFeedback.

Primero, instalemos y activemos el plugin UserFeedback. Si no sabes cómo instalar un plugin, puedes seguir nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez que tengas UserFeedback activado en tu sitio web, puedes empezar a crear tu primer formulario de encuesta.

Desde tu panel de WordPress, navega a UserFeedback » Encuestas » Crear Nueva.

Una vez que hagas esto, llegarás a la sección de ‘Configuración’.

Con UserFeedback, puedes empezar con una página en blanco con la opción ‘Empezar desde cero’ o usar una plantilla predefinida. En esta guía, usaremos la plantilla ‘Comentarios del sitio web’. 

Para elegir la plantilla, simplemente haz clic en ella.

A continuación, editemos el texto. En este ejemplo, cambiaremos la etiqueta ‘Comentarios del sitio web’ por ‘¿Tienes algún comentario?’.

Luego, es posible que desees hacer clic en el menú desplegable ‘Tipo de pregunta’ para elegir cómo los visitantes pueden responder a esta pregunta. En este ejemplo, elegiremos ‘Campo de texto único’.

Después de eso, puedes cambiar la pregunta a ‘Nombre’.

Ahora, necesitarás otro campo de pregunta para la dirección de correo electrónico del usuario.

Puedes desplazarte un poco hacia abajo y hacer clic en el botón ‘Añadir pregunta’.

Una vez que hagas eso, procede a configurar tu tipo de pregunta y título como lo hiciste en el paso anterior.

El siguiente paso es configurar los ajustes del formulario.

En la pestaña ‘Ajustes’, puedes activar el seguimiento de las vistas y respuestas de tu formulario utilizando Google Analytics y MonsterInsights.

Simplemente activa ‘Activar seguimiento de Google Analytics’ para usar la función.

Después de eso, es posible que desees desplazarte hacia abajo en la pestaña para configurar la segmentación y el comportamiento.

En la sección ‘Segmentación’, puedes elegir el tipo de dispositivo y la página web donde se mostrará tu formulario de encuesta.

Las opciones de tipo de dispositivo incluyen escritorio, tableta y móvil. Si deseas que el formulario se muestre en todos esos dispositivos, puedes seleccionar los tres.

Luego, puedes elegir todas las páginas donde deseas mostrar el formulario flotante. Recomendamos elegir la opción ‘Todas las páginas’ para que los visitantes puedan acceder a tu formulario en cualquier lugar de tu sitio web.

Una vez hecho esto, desplacémonos hacia abajo y configuremos el comportamiento del formulario. Aquí, establecerás:

• Tiempo de visualización. Elige cuándo aparecerá tu formulario en tus páginas.
• Duración de la visualización. Define con qué frecuencia se mostrará tu formulario a los visitantes.
• Tiempo de ejecución de la encuesta. Especifica cuánto tiempo aparecerá tu formulario en las páginas designadas.

Aquí está nuestra configuración para su referencia: ‘Tiempo de visualización: Inmediatamente’, ‘Duración de visualización: Siempre, hasta que se complete la encuesta de UserFeedback’ y ‘Tiempo de ejecución de la encuesta: Indefinidamente’.

Ahora, está listo para pasar al siguiente paso.

En la pestaña ‘Notificaciones’, ingresará la dirección de correo electrónico que recibirá las notificaciones de envío de formularios. Puede agregar varios destinatarios, pero deberá asegurarse de usar una coma para separarlos.

Finalmente, es posible que desee dedicar un tiempo a revisar su formulario una última vez antes de finalizarlo.

En la parte superior de la pestaña ‘Publicar’, verá ‘Resumen de comentarios del sitio web’. Puede revisar los puntos uno por uno para ver si las configuraciones de su formulario son correctas.

Si todo se ve bien, puedes desplazarte hacia abajo hasta la sección ‘Publicar’.

Ahí, puedes cambiar el estado de ‘Borrador’ a ‘Publicar’.

Alternativamente, puedes programar un lanzamiento activando la opción ‘Programar para más tarde’ y definiendo la fecha y hora.

Una vez hecho, simplemente haz clic en ‘Guardar y Publicar’ para mostrar tu formulario.

¡Y eso es todo!

Has mostrado exitosamente un formulario de contacto flotante en tu sitio web de WordPress usando UserFeedback.

Método 2: Crear un formulario de contacto flotante en WordPress usando WPForms y OptinMonster

Si deseas un mayor control de diseño sobre tu formulario de contacto flotante, este es el método para ti. Usaremos WPForms para crear el formulario y OptinMonster para hacerlo flotar en tu sitio de WordPress.

WPForms es el mejor constructor de formularios de contacto para WordPress con una interfaz sencilla de arrastrar y soltar. Con más de 2,000 plantillas y herramientas impulsadas por IA, puedes crear un formulario de WordPress en solo unos clics.

En WPBeginner, usamos WPForms para recopilar contactos, comentarios y solicitudes de migración de los usuarios. Descubre por qué amamos este plugin en nuestra reseña detallada de WPForms.

Para crear formularios con WPForms, lo primero que necesitarás hacer es instalar y activar el plugin en tu sitio web. Si necesitas más ayuda, puedes leer nuestra guía sobre cómo instalar un plugin de WordPress.

Al activarlo, puedes navegar a WPForms » Agregar Nuevo desde tu panel de WordPress.

Esto te redirigirá a la interfaz del constructor de formularios.

Allí, todo lo que necesitas hacer es escribir el nombre de tu formulario y seleccionar una plantilla. En este ejemplo, creemos un formulario de contacto y llamémoslo 'Formulario de Contacto'.

Después de nombrar tu formulario, puedes desplazarte hacia abajo en el panel para construir tu formulario con IA o seleccionar una plantilla.

WPForms AI te ayuda a crear formularios rápidamente. Todo lo que tienes que hacer es describir lo que necesitas. En lugar de agregar campos manualmente, la IA lo hace por ti en segundos.

Ya sea que necesites un simple formulario de registro de usuarios, un formulario de solicitud de empleo interactivo, o una encuesta detallada, WPForms AI hace que el proceso sea rápido.

En esta guía, sin embargo, vamos a usar la plantilla 'Formulario de Contacto Simple'.

Para empezar a construir, puedes pasar el cursor sobre el cuadro de la plantilla y hacer clic en 'Usar Plantilla'.

Esto te redirigirá al panel de 'Campos' del constructor de formularios.

Desde aquí, es posible que desees revisar tu formulario de contacto y ajustar el contenido predefinido. Si todo se ve bien, puedes hacer clic en el botón 'Guardar'.

Para obtener instrucciones detalladas, consulta nuestra guía paso a paso sobre cómo crear un formulario de contacto.

Una vez que hayas terminado de crear tu formulario, es hora de ajustar su configuración para que se muestre como un formulario flotante.

Para esto, necesitarás instalar OptinMonster, el mejor plugin de generación de leads para WordPress.

La herramienta puede ayudarte a crear y administrar campañas para convertir visitantes en suscriptores y clientes de pago. Puedes consultar nuestra guía detallada sobre cómo crear una lista de correo con OptinMonster.

En WPBeginner, usamos OptinMonster para promocionar ofertas especiales a través de ventanas emergentes y banners en la cabecera. Consulta nuestra reseña completa de OptinMonster para obtener más información sobre este software.

Al activarlo, puedes hacer clic en el elemento del menú 'OptinMonster' desde tu panel de WordPress.

Verás la pantalla de bienvenida, donde puedes hacer clic en 'Conectar tu cuenta existente' para empezar con el plugin.

Se abrirá una nueva ventana, y aquí puedes hacer clic en 'Conectar a WordPress'.

OptinMonster te pedirá entonces los detalles de tu cuenta para completar el proceso.

Una vez verificado, ya estás listo para crear tu primera campaña.

Para empezar, simplemente navega a OptinMonster » Campañas desde tu área de administración de WordPress.

Una vez dentro de 'Campañas', estás listo para crear y configurar tu formulario flotante.

Para empezar, simplemente haz clic en el botón 'Crear tu primera campaña'.

Ahora, es hora de seleccionar un tipo de campaña.

OptinMonster tiene varios tipos de campañas, incluida una barra flotante. Si bien puede sonar como el tipo de campaña perfecto, una barra flotante tiene espacio limitado. Por lo tanto, querrás usarla para otros casos como anunciar promociones de ventas o compartir códigos de cupón.

Si deseas obtener más información sobre el uso de una barra flotante, te recomendamos que consultes nuestra guía sobre cómo crear una barra de pie de página flotante "pegajosa" en WordPress.

Para mantener tu diseño ordenado, puedes optar por 'Slide-in' como tu tipo de campaña para agregar tu formulario de contacto de WPForms.

Un 'slide-in' flotante permanecerá en la esquina inferior derecha de la pantalla del usuario. Por lo tanto, puede ayudar a mantener tu contenido legible, el diseño web organizado y la experiencia del usuario excelente.

Simplemente puedes hacer clic en el tipo de campaña para usarlo.

Luego, desplazaremos el panel hacia abajo y seleccionaremos una plantilla.

Para usar una plantilla, simplemente pasa el cursor sobre el bloque de la plantilla y haz clic en ‘Usar plantilla’. Aquí, elegiremos ‘Suscribirse al boletín (Ligero)’.

Una vez que hayas elegido tu tipo de campaña y plantilla, aparecerá una ventana emergente.

Solo necesitarás darle un nombre a tu campaña. En este ejemplo, nombraremos nuestra campaña ‘Formulario de contacto flotante’.

Después de decidir el nombre, puedes hacer clic en ‘Empezar a construir’.

OptinMonster te redirigirá al constructor de campañas.

La interfaz de construcción de campañas tiene dos secciones. El lado izquierdo contiene todas las funciones que puedes agregar a tu campaña, y el lado derecho es la vista previa en vivo.

Para más información, puedes ver nuestro tutorial sobre cómo agregar un formulario de contacto deslizable en WordPress.

Para agregar tu formulario de contacto de WPForms, puedes desplazarte hacia abajo en el panel izquierdo para localizar el bloque de WPForms.

Una vez que lo hayas encontrado, simplemente arrastra y suelta el bloque de WPForms en la vista previa en vivo en el panel derecho.

Luego, verás un menú desplegable de ‘Selección de formulario’. Puedes hacer clic en él y luego elegir ‘Formulario de contacto’. El bloque en la vista previa en vivo cargará entonces el shortcode del formulario.

Después de eso, es posible que desees pasar a la pestaña ‘Reglas de visualización’. Esta pestaña es donde puedes configurar el tiempo de visualización y las páginas del formulario de contacto flotante.

Para asegurar que tu formulario flote y permanezca fijo desde el primer segundo, recomendamos configurar los dos primeros menús desplegables en ‘tiempo en página’ y ‘es inmediato’.

Luego, para mostrar el formulario en todas las páginas, puedes configurar los siguientes menús desplegables como ‘ruta de URL actual’ y ‘cualquier página’.

Una vez hecho esto, puedes ir a la pestaña ‘Publicar’.

En esta pestaña, lo primero que debes hacer es cambiar el estado de publicación de tu campaña a ‘Publicar’ o ‘Programar’.

El siguiente paso es usar la función ‘Inspector del sitio en vivo’ para probar cómo se ve tu campaña en tu página web. Para hacer esto, simplemente escribe la URL de tu sitio en el cuadro de texto y haz clic en ‘Probar’.

Esto te redirigirá a una nueva pestaña.

Si todo se ve como quieres, puedes volver al creador de campañas de OptinMonster y guardar tu campaña.

¡Listo! Has creado con éxito un formulario de contacto flotante usando WPForms y OptinMonster.

Método 3: Crear un formulario de contacto flotante en WordPress usando un plugin gratuito de formularios flotantes

Nuestro último método te permitirá mostrar un icono flotante que redirige a tu página de formulario de contacto. Este enfoque es ligeramente diferente, pero puede ser efectivo.

Varios plugins gratuitos te permiten agregar iconos de contacto flotantes a tu sitio de WordPress. Algunas opciones populares incluyen Simple Floating Menu y Float Menu. Estos plugins generalmente requieren que incrustes una URL en su configuración.

En este tutorial, te mostraremos cómo hacerlo usando Simple Floating Menu. Si necesitas ayuda para instalar el plugin, puedes leer nuestra guía sobre cómo instalar un plugin de WordPress.

Antes de acceder al área de configuración del plugin Simple Floating Menu, copiemos la URL de la página donde muestras tu formulario de contacto.

Para hacer esto, navega a la página en cuestión y copia la URL de la barra de direcciones.

Ahora, puedes abrir Simple Floating Menu desde tu panel de WordPress.

Una vez que estés en el área de configuración del plugin, querrás habilitar el ícono flotante del formulario. Puedes hacer esto activando el control deslizante 'Habilitar menú flotante'. Luego, cambiará de gris a verde o de desactivado a activado.

Luego, procede a encontrar el campo 'URL del botón' para pegar la URL.

Una vez que hayas ingresado la URL del botón, deberías ver una notificación si tu configuración se guardó correctamente.

Para entonces, tu ícono flotante debería estar activo en tu sitio web de WordPress. Sin embargo, puedes personalizar aún más la posición y apariencia del botón.

Encima del campo 'URL del botón', puedes cambiar el ícono predeterminado por algo más relevante. Este plugin ofrece docenas de opciones de íconos, así que si alguna vez te sientes atascado, es una buena idea usar la función de filtro.

El texto 'Texto de Tooltip' aparecerá cuando los visitantes del sitio pasen el cursor sobre el ícono flotante. Recomendamos completar este campo para dar a los visitantes contexto sobre a dónde los llevará el ícono.

Luego, si deseas redirigir a los visitantes a una nueva página después de hacer clic en el ícono, simplemente marca la casilla en el campo 'Abrir en una nueva pestaña'.

Puedes editar los colores del ícono flotante desplazándote hacia abajo en la pantalla. Siéntete libre de ser creativo con los colores de fondo, ícono y efecto de desplazamiento siempre que coincidan con tu marca o la personalidad de tu sitio web.

Cuando hayas terminado, haz clic en 'Guardar configuración'.

A continuación, puedes pasar a la pestaña 'Configuración' para obtener más funciones de personalización.

En esta pestaña, puedes elegir dónde quieres que aparezca el formulario en tu sitio, como en la parte superior izquierda, media derecha o inferior derecha.

También hay configuraciones de orientación de botones. Puedes elegir vertical u horizontal.

Quizás también quieras cambiar el estilo del botón. La forma predeterminada es un rectángulo, pero puedes optar por una redonda, un triángulo o incluso una estrella.

Puedes encontrar más configuraciones de personalización en el panel. Siéntete libre de ajustar el tamaño de tu icono flotante, los estilos de sombra, la tipografía y más para hacerlo más único.

Una vez que termines, todo lo que queda por hacer es guardar para no perder tu progreso.

Ahora, puedes continuar y ver cómo se ve el icono flotante en tu sitio web.

Aquí tienes cómo se ve nuestro icono flotante como referencia:

Método alternativo: Usa un chatbot en tu sitio web

Un formulario de contacto flotante es una excelente manera de permitir que los visitantes se comuniquen contigo. Pero si deseas brindar respuestas inmediatas a tus usuarios, entonces podría valer la pena instalar un chatbot en su lugar.

Un chatbot puede ser impulsado por IA o manejado directamente por tu equipo de soporte. Por ejemplo, una herramienta como ChatBot puede obtener información de tu sitio web y centro de ayuda para brindar respuestas impulsadas por IA de inmediato a tus visitantes.

Para obtener detalles sobre cómo configurar esto, puedes ver nuestro tutorial sobre cómo agregar un chatbot en WordPress. Y para obtener más información sobre el software, consulta nuestra reseña completa de ChatBot.

Preguntas frecuentes sobre formularios de contacto flotantes en WordPress

Aquí tienes respuestas a las preguntas más comunes sobre la configuración y personalización de formularios de contacto flotantes.

¿Cuál es el mejor plugin para crear un formulario de contacto flotante?

Si buscas una solución integral y sencilla, UserFeedback es una excelente opción. Está diseñado para una configuración y personalización fáciles, lo que lo hace ideal para formularios flotantes simples sin necesidad de codificación.

Para tener un mayor control sobre la apariencia y el comportamiento de tu formulario, considera combinar WPForms con OptinMonster.

WPForms ofrece un constructor fácil de usar de arrastrar y soltar con más de 2,000 plantillas y muchas herramientas de IA. OptinMonster agrega opciones avanzadas de segmentación y flexibilidad de diseño, lo que te permite mostrar tu formulario exactamente cuándo y dónde quieras.

¿Puedo personalizar el diseño de mi formulario de contacto flotante?

Absolutamente. Los tres métodos permiten la personalización. Puedes personalizar los colores, el texto y la posición para que coincidan con la marca de tu sitio.

OptinMonster lleva la personalización un paso más allá, ofreciendo opciones de diseño avanzadas y reglas de segmentación. Esto significa que puedes ajustar cada detalle de tu campaña de formulario flotante para que se adapte a tus necesidades específicas.

¿Un formulario de contacto flotante ralentizará mi sitio web?

En absoluto. Los plugins que se presentan en esta guía están bien codificados y optimizados para el rendimiento. Se cargan de forma asíncrona, asegurando que no bloqueen la carga del contenido principal de tu página. Esto ayuda a mantener una experiencia de usuario rápida y fluida en tu sitio.

Recursos adicionales sobre formularios de WordPress

Esperamos que esta guía te haya ayudado a agregar un formulario de contacto flotante a tu sitio. Ahora que está configurado, es posible que desees consultar estos otros artículos útiles para sacar aún más provecho de tus formularios:

• Cómo incrustar formularios en WordPress
• Cómo personalizar y dar estilo a tus formularios de WordPress
• Cómo crear formularios multilingües en WordPress
• Cómo crear formularios más interactivos en WordPress
• La guía definitiva para usar formularios de WordPress
• Los mejores creadores de formularios en línea (selecciones de expertos)

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.