Cómo agregar un formulario de contacto deslizante en WordPress

¿Quieres agregar un formulario de contacto deslizante en WordPress? Si su negocio depende de obtener nuevos clientes potenciales desde el formulario de contacto de su sitio web, una de las mejores formas de hacer crecer su fuente de clientes potenciales es hacer que su formulario de contacto sea más visible. En este artículo, le mostraremos cómo agregar un formulario de contacto deslizante en WordPress sin molestar a sus usuarios.

¿Por qué agregar un formulario de contacto deslizante en WordPress?

Muchos propietarios de pequeñas empresas inician sus sitios web con la esperanza de que les ayude a hacer crecer su negocio. Es por eso que agrega una página de formulario de contacto, para que los usuarios puedan contactarlo. Sin embargo, el problema es que la mayoría de los usuarios que puedan hacer preguntas abandonarán su sitio web sin comunicarse con usted. Es por eso que puede notar que muchos sitios web populares agregan ventanas emergentes de formularios de contacto, formularios de contacto deslizantes o botones de llamada a la acción que abren formularios de contacto. Estas opciones animadas e interactivas desvían la atención del usuario hacia el formulario de contacto y le permiten completar rápidamente el formulario sin visitar otra página. Estos formularios aumentan drásticamente sus conversiones, por lo que los ve en todas partes. Veamos cómo crear un formulario de contacto deslizante en WordPress.

Agregar un formulario de contacto deslizante en WordPress

Para este tutorial, necesitará WPForms. Es el mejor plugin de formulario de contacto de WordPress del mercado. Puede usar la versión gratuita del plugin de formulario de contacto de WPForms si no necesita todas las funciones premium. También necesitará OptinMonster. Es el software de optimización de conversión más poderoso. Le ayuda a convertir a los visitantes del sitio web que abandonan en clientes. Necesitará su plan profesional que le da acceso a la funcionalidad del lienzo que usaremos en este tutorial.

Paso 1. Creando un formulario de contacto en WordPress

Primero debe instalar y activar el plugin WPForms. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress. Tras la activación, debe visitar WPForms »Agregar nuevo página para crear su formulario de contacto. Esto lanzará la interfaz del generador de WPForms. Ingrese un nombre para su formulario de contacto, luego seleccione la plantilla "Seleccionar un formulario de contacto".

WPForms cargará un formulario de contacto simple. Verá la vista previa del formulario en el panel derecho. Puede hacer clic en cualquier campo para editarlo o agregar nuevos campos de la columna de la izquierda.

Una vez que haya terminado de editar el formulario, haga clic en el botón Guardar para guardar sus cambios. Luego, debe hacer clic en el botón para insertar en la parte superior para obtener el código de inserción para su formulario. Esto abrirá una ventana emergente que muestra el código corto de su formulario. Continúe y copie este código corto, ya que lo necesitará en el siguiente paso.

Paso 2. Creación de una opción deslizante en OptinMonster

Ahora vamos a crear una campaña deslizante que mostrará el formulario de contacto que creó en el primer paso. En primer lugar, debe instalar y activar el plugin OptinMonster. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress. Este plugin actúa como un conector entre su sitio web y su cuenta de OptinMonster. Tras la activación, haga clic en el menú OptinMonster en su barra de administración de WordPress e ingrese su clave API. Puede obtener esta información de su cuenta en el sitio web de OptinMonster.

Después de ingresar su clave de licencia, haga clic en el botón "Crear nueva opción" en la esquina superior derecha de su pantalla.

Esto lo llevará al sitio web de OptinMonster. OptinMonster ofrece diferentes tipos de campañas dinámicas. Para este tutorial, usaremos la campaña "Slide in". Continúe y haga clic para seleccionar "Diapositiva" como el tipo de campaña.

Entonces necesitas seleccionar el modelo. OptinMonster tiene varias plantillas listas para usar, pero debemos seleccionar "Lienzo" para este tutorial.

Tan pronto como seleccione la plantilla, se le pedirá que proporcione un nombre para su campaña. Esto le ayudará a localizar fácilmente la campaña en su panel de control de OptinMonster. A partir de ahora, OptinMonster cargará su interfaz de creación de campañas.

Verá una vista previa en vivo de su campaña a la derecha. Dado que estamos usando la plantilla de lienzo, estará totalmente vacía por ahora. En la mano izquierda notarás diferentes pestañas. En la sección "Configuración de aceptación general", debe ingresar la URL de su sitio web en la opción "Optin Campaign Website". Luego debe cambiar a la pestaña "Optin". Aquí puede seleccionar los colores, la altura y el ancho de su opción.

Continúe y seleccione los colores que le gusten y ajuste el ancho y el alto, para que pueda mostrar bien toda su forma. Después de eso, debe desplazarse hacia abajo hasta la sección `` Lienzo HTML personalizado '' e ingresar el código corto de WPForms que copió anteriormente.

Ingresar el código corto no mostrará inmediatamente su formulario en la campaña de diapositivas. De hecho, el código abreviado solo funciona en su propio sitio de WordPress. Ahora puede hacer clic en el botón "Guardar" en la parte superior para almacenar su configuración y luego hacer clic en el botón "Publicar".

En la siguiente pantalla, debe cambiar el estado de la suscripción a publicado. Esto hará que la opción de suscripción esté disponible en su sitio de WordPress.

Paso 3. Visualización del formulario de contacto deslizante en WordPress

Ahora que ha creado el formulario de contacto y la campaña deslizante, está listo para mostrarlo en su sitio web. Adelante y visita OptinMonster página en su área de administración de WordPress. Allí verá su campaña deslizante creada recientemente.

Debe hacer clic en el enlace "Cambiar la configuración de salida" para decidir cómo desea que se muestre en su sitio web. En la siguiente pantalla, asegúrese de marcar la casilla junto a "¿Habilitar optin en el sitio?" opción. OptinMonster le permite elegir quién puede ver el optin. También puede seleccionar un área específica de su sitio web para mostrar el opttin.

Recuerde hacer clic en el botón Guardar configuración para guardar sus cambios. Ahora puede visitar su sitio web para ver el formulario de contacto deslizante en acción. Asegúrese de usar el modo icognito en su navegador o cierre sesión en WordPress, para que pueda ver exactamente lo que verán sus usuarios.

De forma predeterminada, la campaña deslizante aparecerá 5 segundos después de que la página se haya cargado por completo. Sin embargo, OptinMonster también le permite cambiar esto. Puede crear innumerables reglas para mostrar la campaña siempre que se cumplan determinadas condiciones. Por ejemplo, puede mostrar el formulario deslizable cuando un usuario se ha desplazado el 50% de la página, cuando un usuario está a punto de salir de una página y muchos más.

Esperamos que este artículo le haya ayudado a aprender cómo agregar un formulario de contacto deslizante en WordPress. También puede consultar nuestra lista de consejos prácticos para dirigir tráfico a su sitio de WordPress. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.