Puede ser frustrante cuando la gente visita tu sitio web de WordPress pero nunca se pone en contacto. Quizás navegan por tus páginas, incluso pasan unos minutos leyendo, pero tu formulario de contacto no recibe ninguna solicitud.
A menudo, no es que los visitantes no quieran conectar. Simplemente no ven una forma fácil o atractiva de hacerlo.
Ahí es donde un formulario de contacto deslizante puede marcar una gran diferencia. Aparece suavemente desde un lado, ofreciendo ayuda justo cuando los visitantes la necesitan, sin interrumpir su experiencia.
En esta guía, te mostraremos cómo agregar un formulario de contacto deslizante a tu sitio de WordPress paso a paso, utilizando un método confiable y probado. 🧑💻
¿Por qué agregar un formulario de contacto deslizante en WordPress? 💭
Un formulario de contacto deslizante facilita que los visitantes se pongan en contacto sin abandonar la página en la que se encuentran. Se desliza suavemente desde un lado, capta la atención y permite a los usuarios enviar un mensaje rápido justo cuando necesitan ayuda.
Muchos propietarios de pequeñas empresas agregan una página de contacto, esperando que los visitantes la utilicen y que esto ayude a hacer crecer su negocio.
Pero en realidad, la mayoría de las personas se van sin ponerse en contacto. Es por eso que verás sitios web populares usando popups de contacto, deslizadores o botones flotantes para facilitar la comunicación.
Estas opciones animadas e interactivas atraen la atención hacia el formulario de contacto, haciendo que tu sitio se sienta más interactivo y accesible. Así, puedes convertir a los visitantes casuales en clientes potenciales o clientes reales con más facilidad.
Dicho esto, te mostraremos cómo crear un formulario de contacto deslizable en WordPress. Aquí tienes un resumen rápido de todo lo que cubriremos en esta guía:
- Agregar un formulario de contacto deslizable en WordPress
- Paso 1: Crear un formulario de contacto en WordPress
- Paso 2: Creación de una campaña deslizante en OptinMonster
- Paso 3: Mostrar el formulario de contacto deslizable en WordPress
- Preguntas frecuentes: Agregar un formulario de contacto deslizable en WordPress
- Recursos adicionales para usar formularios de WordPress
Empecemos.
Agregar un formulario de contacto deslizable en WordPress
Para este tutorial, necesitarás WPForms. Es el mejor plugin de formularios de contacto para WordPress del mercado porque es fácil y potente.
ℹ️ Nota: WPForms potencia todos nuestros formularios en WPBeginner, incluido nuestro formulario de contacto. Es fácil de usar, altamente personalizable y las nuevas herramientas de IA hacen que la creación de formularios sea más rápida que nunca.
¿Curioso sobre cómo funciona? Consulta nuestra reseña completa de WPForms para explorar todo lo que puede hacer.
Para seguir este tutorial, puedes usar la versión gratuita del plugin de formulario de contacto WPForms si no necesitas ninguna de sus funciones premium (lógica condicional, integraciones avanzadas y más).
Luego, conectarás tu formulario con OptinMonster. Es el software de optimización de conversiones más potente y te ayuda a convertir visitantes abandonados del sitio web en clientes.
Paso 1: Crear un formulario de contacto en WordPress
Primero, necesitas instalar y activar el plugin WPForms. Desde tu área de administración de WordPress, ve a Plugins » Agregar Nuevo Plugin para comenzar.
En la siguiente pantalla, puedes usar la barra de búsqueda para encontrar rápidamente el plugin de WPForms.
En el resultado de la búsqueda, simplemente haz clic en 'Instalar ahora' y luego en 'Activar' para completar el proceso.
Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress
Al activarlo, debes visitar la página WPForms » Agregar Nuevo para crear un nuevo formulario de contacto. Esto iniciará la interfaz del constructor de WPForms.
Ingresa un nombre para tu formulario de contacto en la parte superior de la página.
Después de eso, debes pasar el mouse sobre la plantilla 'Formulario de Contacto Sencillo' y hacer clic en el botón 'Usar Plantilla'.
🧑💻 Consejo interno: ¡Puedes usar IA para generar tus formularios al instante con facilidad! Simplemente proporciona una indicación y WPForms AI creará el formulario perfecto para ti en poco tiempo.
WPForms creará un nuevo formulario basado en la plantilla Formulario de Contacto Sencillo.
Verás la vista previa del formulario en el panel derecho del creador de formularios. Puedes hacer clic en cualquier campo para editarlo o agregar nuevos campos de formulario desde la columna izquierda.
Para obtener instrucciones paso a paso, consulta nuestra guía sobre cómo crear un formulario de contacto en WordPress.
Una vez que hayas terminado de editar el formulario, simplemente haz clic en el botón 'Guardar' para almacenar tus cambios.
A continuación, deberás hacer clic en el botón 'Incrustar' en la parte superior para obtener el código de incrustación de tu formulario.
Esto abrirá una ventana emergente que muestra varias formas de incrustar tu formulario. Simplemente haz clic en el enlace 'usar un shortcode' y luego copia el shortcode. Lo necesitarás en el siguiente paso.
Paso 2: Creación de una campaña deslizante en OptinMonster
Ahora, crearemos una campaña de deslizamiento que mostrará el formulario de contacto que creaste en el primer paso.
Necesitas instalar y activar el plugin gratuito OptinMonster. Este plugin actúa como un conector entre tu sitio web y tu cuenta de OptinMonster.
ℹ️ Nota: Usamos OptinMonster en WPBeginner para promocionar ofertas exclusivas a través de ventanas emergentes, deslizables y banners. Es una herramienta versátil que impulsa la participación y hace crecer nuestra lista de correo electrónico sin esfuerzo.
¿Quieres saber más? Consulta nuestra reseña completa de OptinMonster para explorar sus funciones.
Para empezar, obtengamos tu cuenta de OptinMonster. En su sitio web, haz clic en el botón 'Obtener OptinMonster Ahora', selecciona un plan y completa el proceso de registro.
Una vez hecho esto, serás redirigido a tu panel de OptinMonster.
Ahora, ve a Plugins » Añadir Nuevo Plugin en tu panel de WordPress para instalar el plugin de OptinMonster.
A continuación, simplemente usa la función de búsqueda para encontrar rápidamente el plugin de OptinMonster.
Una vez que lo hayas encontrado, haz clic en el botón 'Instalar ahora' y luego en 'Activar'.
Para obtener detalles, puedes consultar nuestra guía sobre cómo instalar un plugin de WordPress.
Al activarse, el asistente de configuración de OptinMonster se iniciará automáticamente. Esto te permitirá crear una nueva cuenta o conectar una cuenta existente.
Después de crear o conectar tu cuenta de OptinMonster, puedes crear una nueva campaña de suscripción.
Simplemente navega a la página OptinMonster » Campañas y haz clic en el botón ‘Agregar Nuevo’. Si aún no tienes ninguna campaña, también puedes hacer clic en el botón ‘Crear tu primera campaña’.
OptinMonster ofrece diferentes tipos de campañas dinámicas.
Para este tutorial, utilizaremos la campaña ‘Slide-in’ (deslizamiento).
Haz clic para seleccionar ‘Slide-in’ como tu tipo de campaña.
A continuación, necesitas seleccionar la plantilla. OptinMonster ofrece varias plantillas listas para usar.
Para este tutorial, debes elegir ‘Canvas’.
Puedes encontrar esto fácilmente usando la función de búsqueda, y luego haz clic en el botón ‘Usar Plantilla’ que aparece cuando pasas el mouse sobre él.
Tan pronto como selecciones la plantilla, se te pedirá que proporciones un nombre para tu campaña. Esto te ayudará a localizar fácilmente la campaña en tu panel de OptinMonster.
A continuación, haz clic en el botón ‘Comenzar a Construir’.
Ahora, OptinMonster cargará su interfaz de constructor de campañas.
Verás una vista previa en vivo de tu campaña a la derecha y los diferentes bloques en el menú a tu izquierda.
Simplemente busca el bloque WPForms, luego arrástralo y suéltalo en el área de vista previa.
Ahora, el bloque WPForms aparecerá en la plantilla y verás su configuración a la izquierda.
Deberás hacer clic en el menú desplegable ‘Selección de Formulario’ en la configuración del bloque en el menú de la izquierda y seleccionar la opción ‘Agregar Shortcode Manualmente’.
Esto te permitirá pegar el shortcode de tu formulario de contacto de WPForms en el bloque. Lo copiaste anteriormente en el tutorial.
Ahora, puedes eliminar o personalizar los otros bloques del formulario.
Por ejemplo, puedes cambiar la imagen haciendo clic en ella y usando la configuración de la izquierda.
O puedes eliminarlo simplemente pasando el cursor del ratón sobre el bloque y haciendo clic en el icono de ‘Papelera’.
Para este tutorial, eliminaremos los otros bloques de la opción, dejando solo el bloque WPForms.
Si lo deseas, también puedes hacer clic en el fondo y elegir un color, degradado o imagen para la opción desde el panel de configuración de la izquierda.
A continuación, deberás hacer clic en la pestaña ‘Reglas de visualización’ en la parte superior de la página para configurar cuándo y cómo se mostrará la opción.
Deberías estar viendo la pestaña ‘Condiciones’ en la parte inferior de la pantalla. Aquí, la configuración predeterminada mostrará la opción en cualquier página después de 5 segundos. Esto debería funcionar para la mayoría de los sitios web.
A continuación, deberías hacer clic en la pestaña ‘Acciones’ en la parte inferior de la página.
Por defecto, no hay animación ni sonido cuando se muestra la opción. Si lo deseas, puedes seleccionar una opción del menú desplegable ‘Animar con MonsterEffects’, como ‘Deslizar (Izquierda)’.
Cuando hayas terminado de configurar las Reglas de visualización, deberás hacer clic en el botón ‘Guardar’ en la parte superior para almacenar tu configuración y luego hacer clic en el botón ‘Publicar’.
En la siguiente pantalla, deberás cambiar el Estado de publicación a ‘Publicar’. Esto hará que la opción esté disponible en tu blog de WordPress o sitio web.
Paso 3: Mostrar el formulario de contacto deslizable en WordPress
Ahora que has creado tanto el formulario de contacto como la campaña de deslizamiento, estás listo para mostrarlos en tu sitio web.
Puedes cerrar la página de Estado de publicación haciendo clic en el icono ‘X’ en la esquina superior derecha. Ahora deberías ver una página que te permite configurar los ‘Ajustes de salida de WordPress’ y la ‘Visibilidad y estado’ de la opción.
Al desplazarte hacia abajo en la sección ‘Visibilidad y estado’, normalmente querrás que ‘Todos los visitantes y usuarios conectados’ vean la campaña. Sin embargo, existen opciones para ‘Solo visitantes’ y ‘Solo usuarios conectados‘.
Una vez que hayas hecho eso, deberías hacer clic en el botón ‘Guardar cambios’ para almacenar tu configuración.
Ahora puedes visitar tu sitio web para ver el formulario de contacto deslizante en acción:
Preguntas frecuentes: Agregar un formulario de contacto deslizable en WordPress
Ahora que sabes cómo agregar un formulario de contacto deslizante en WordPress, repasemos algunas preguntas comunes que los usuarios suelen hacer.
¿Cuál es el tamaño ideal para un cuadro deslizante?
Generalmente, un ancho de 400-600 px y una altura de 300-400 px funcionan bien. Debe destacar sin cubrir demasiado de la página.
¿Cuál es la diferencia entre un deslizamiento, una ventana emergente y una superposición?
Un deslizamiento entra desde el costado, una ventana emergente aparece en el centro y una superposición cubre toda la pantalla. Los deslizamientos suelen ser menos intrusivos, pero cada opción puede ayudarte a aumentar la participación; simplemente elige lo que mejor se adapte al estilo de tu sitio.
¿Cuáles son algunas de las mejores alternativas a los formularios emergentes?
Puedes usar formularios en línea, barras flotantes o formularios deslizantes para una experiencia de usuario más fluida y menos disruptiva.
Recursos adicionales para usar formularios de WordPress
Esperamos que este artículo te haya ayudado a aprender cómo agregar un formulario de contacto deslizante en WordPress.
También te pueden interesar algunas de nuestras otras guías sobre formularios de WordPress:
- Cómo mostrar un formulario de contacto flotante en WordPress
- Cómo Agregar un Popup de Formulario de Contacto en WordPress
- Mejores prácticas para el diseño de páginas de formularios de contacto (con ejemplos)
- Cómo usar formularios de contacto para hacer crecer tu lista de correo electrónico en WordPress
- Cómo bloquear spam de formularios de contacto en WordPress
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.
Jiří Vaněk
Tengo un formulario de contacto deslizante en mi sitio web principal. Lo creé usando WP Forms y Elementor. Básicamente funciona con un principio similar a Optin Monster, pero la ventana emergente se crea en Elementor con efectos de aparición y desaparición. Entonces, si alguien tiene Elementor, también se puede hacer convenientemente allí; solo un consejo para otros.
Soumik Sadman Anwar
¿Optinmonster también tiene una versión lite gratuita? ¡¡¡Sería genial si la hubiera!!!
Soporte de WPBeginner
Hola Soumik,
OptinMonster no tiene una versión lite gratuita ni una prueba gratuita.
Administrador