jueves, marzo 28, 2024
No menu items!
InicioBlogsCómo crear un formulario de registro emergente en WordPress

Cómo crear un formulario de registro emergente en WordPress

¿Desea crear un formulario de registro emergente en su sitio web de WordPress?

Un formulario de registro emergente es una de las mejores formas de atraer a sus visitantes para que se registren en su sitio. De esa manera, puede pedirles que completen el registro desde la misma página en la que están sin tener que navegar a otra página.

Pero, ¿cómo se crea un formulario de registro emergente sin habilidades de codificación o diseño?

Hoy, le mostraremos cómo crear fácilmente un formulario de registro emergente con dos herramientas poderosas:

  1. WPForms
  2. OptinMonster

Primero, echemos un vistazo a qué es un formulario de registro emergente y por qué necesita uno en su sitio de WordPress.

Cree un formulario de registro emergente ahora

¿Qué es un formulario de registro emergente?

Un formulario de registro requiere que los visitantes de su sitio creen un perfil con su nombre de usuario, correo electrónico y contraseña para acceder a ciertas partes de su sitio.

Ahora, hay algunas razones por las que es posible que deba agregar un formulario de registro a su sitio de WordPress.

Permitir que las personas:

  • Crea perfiles para una tienda de comercio electrónico
  • Regístrese para un curso en línea
  • Únase a un sitio de membresía

Desafortunadamente, en la mayoría de los sitios web, el proceso de registro no siempre es fácil.

Quizás sea lento o confuso. Y si las personas se atascan, abandonarán su sitio. Sin mencionar que un proceso de registro mal diseñado le costará ingresos.

Por otro lado, una experiencia de usuario positiva distingue a su empresa.

Ahí es donde entra un formulario de registro emergente.

Un formulario de registro emergente permite a los visitantes de su sitio registrarse rápidamente en su sitio sin interrumpir su patrón de navegación.

Es la forma más fácil para que los visitantes de su sitio se registren o inicien sesión en su sitio de WordPress.

Hoy, crearemos este formulario de registro emergente:

🔥 Leer:  ¿Cómo obtener ADN en Borderlands 3?

Cómo crear un formulario de registro emergente en WordPress

En el tutorial de hoy, crearemos un formulario de registro emergente en WordPress usando WPForms y OptinMonster.

  • WPForms es el mejor complemento de formulario para WordPress. Con WPForms, puede agregar formularios completamente funcionales a su sitio sin escribir ningún código. Y puedes elegir entre alrededor de 100 plantillas.
  • OptinMonster es el mejor creador de ventanas emergentes para WordPress. La función de arrastrar y construir de OptinMonster hace que sea fácil para usted incrustar el formulario de registro dentro de la ventana emergente.

A continuación, analizaremos cada uno de los pasos que necesita para configurar su formulario de registro emergente.

Crear un formulario de registro usando WPForms

Antes de comenzar, deberá instalar y activar el complemento WPForms.

Consulte este artículo para obtener instrucciones paso a paso sobre la instalación de un complemento de WordPress.

Una vez que haya activado el complemento, haga clic en WPForms »Complementos.

Menú del complemento WPForms

En la siguiente pantalla, verá los complementos disponibles.

Buscar Formulario de registro de usuario.

Hacer clic Instalar complemento.

Instalación del complemento de registro de usuario de WPForms

La plantilla de registro de usuario viene con todos los campos que necesita para un formulario de registro emergente:

  • Nombre de usuario
  • Correo electrónico
  • Contraseña
  • Biografía corta

A continuación, haga clic en WPForms »Agregar nuevo.

Agregar nuevo WPForm

Ahora estará en el generador de formularios.

Busque y seleccione el Formulario de registro de usuario plantilla.

Selección de registro de usuario de WPForms Builder

Ahora, puede personalizar su formulario agregando campos desde el lado izquierdo de la pantalla.

WPForms editar formulario de registro de usuario

A continuación, haga clic en el Contraseña campo en el formulario. Nuevamente, verá las opciones de campo en el lado izquierdo.

Agregue el código a continuación en el cuadro de descripción del Contraseña campo:

Ahora, puede mostrar opciones como olvidar la contraseña o el inicio de sesión del usuario si el visitante ya tiene una cuenta.

Código emergente de WordPress en WPForms

Después de eso, haga clic en Ahorrar en la parte superior del editor.

Luego, seleccione Empotrar.

WPForms Guardar formulario de registro de usuario WordPress

Copie el código. Necesitaremos este código cuando configuremos nuestra ventana emergente en el siguiente paso.

Formulario de registro de código de inserción de WPForms WordPress

A continuación, es hora de dirigirse a OptinMonster para crear y mostrar su formulario de registro emergente.

Cree su formulario de registro emergente

Ahora, crearemos nuestro formulario de registro emergente en OptinMonster.

Paso 1: crear una campaña emergente

🔥 Leer:  ¿Cómo se desactiva el cortafuegos de Mcafee?

Primero, diríjase a su panel de OptinMonster.

Hacer clic Crear nueva campaña.

Crear un nuevo botón de campaña de OptinMonster

Escoger Surgir.

Elija el tipo de campaña de OptinMonster

OptinMonster tiene más de 50 plantillas para elegir.

Las plantillas le permiten crear muchos tipos diferentes de campañas, como ofrecer:

  • Actualizaciones de contenido para los usuarios en función de los artículos que están leyendo.
  • Descuentos para compradores en línea por los productos que buscan

Todas las campañas prediseñadas de OptinMonster funcionan a la perfección en computadoras de escritorio, dispositivos móviles y tabletas.

Descripción general de las plantillas de campaña de OptinMonster

Hoy, iremos con Lienzo.

Canvas te permite crear tu propia campaña desde cero.

Elija la plantilla Canvas_

Ponle un nombre a tu campaña y asígnala a tu sitio de WordPress.

Campaña de nombre OptinMonster

Hacer clic Empezar a construir para editar su ventana emergente.

Paso 2: Diseñe su formulario de registro emergente

Ahora estarás en el editor de campañas.

Personalizar su ventana emergente en OptinMonster es fácil.

Verá todas las herramientas y bloques de edición a la izquierda.

Lienzo en constructor

Para eliminar un elemento, simplemente haga clic en él y seleccione eliminar.

Eliminar bloque de imagen de Canvas

Eliminemos también el resto del texto de nuestro formulario.

Eliminar el texto del lienzo

En esta etapa, tendrá un lienzo completamente en blanco.

Lienzo en blanco

Ahora, agregaremos nuestro código de inserción de WPForms.

Escoger Bloques.

Ahora, arrastre el HTML bloquee a su formulario.

Agregar bloque HTML al lienzo emergente de WordPress

En el menú del lado izquierdo, inserte su código corto.

Cuadro HTML para ventana emergente de WordPress

El editor de OptinMonster ahora mostrará este código corto, pero una vez que su campaña se active, aparecerá el formulario.

Código de Canvas WPForms en popup-min

A continuación, agregaremos un encabezado a nuestro formulario.

Hacer clic Agregar bloques desde la parte superior de su editor.

Agregar bloques

Simplemente arrastre y suelte el bloque de texto en su formulario.

OptinMonster Blocks Texto

Ahora, podrá agregar una copia a su formulario. Simplemente haga clic en su texto para editar la copia desde el constructor.

Formulario de registro del editor de texto en línea en WordPress

A continuación, haga clic en el código corto. Esto tirará del Editar elemento HTML herramientas a la izquierda.

Seleccione Cuadra.

elija html block_

Establezca el relleno en los valores siguientes. Esto centrará los campos de su formulario.

Relleno de ventanas emergentes de WordPress en OptinMonster

A continuación, diseñaremos nuestro formulario de registro emergente.

Paso 3: agregar CSS a su formulario de inicio de sesión

Ahora, vamos a agregar CSS personalizado a su formulario de registro.

Si es nuevo en CSS, no se preocupe. Todo lo que necesita hacer es copiar y pegar algunas líneas de código en el editor de su campaña.

Dirígete al Hogar panel y haga clic en Configuración de pantalla.

🔥 Leer:  ¿Cómo bloquear la carpeta en el Firewall de Windows?

Configuración de pantalla de inicio

Copie el siguiente CSS:

Péguelo en el cuadro de campo.

Campo CSS en el editor

Paso 4: Muestre su formulario de registro emergente

Hoy, usaremos uno de los activadores de campaña más poderosos de OptinMonster, Monsterlinks ™.

Lead Guru convirtió el 81% de los visitantes de su sitio usando MonsterLinks.

Dirigirse a Reglas de visualización.

reglas de visualización

Buscar y seleccionar Monsterlinks â„¢ (al hacer clic).

Regla de visualización OptinMonster Monsterlinks

A continuación, haga clic en Copiar el código de Monsterlinks. Podrá colocar este código en cualquier lugar de su sitio de WordPress para agregar un enlace de registro en el que se puede hacer clic.

Botón Copiar Monsterlinks

Finalmente, es el momento de publicar su campaña.

Seleccione Publicar desde la parte superior de su editor.

En la pantalla de publicación, asegúrese de que el estado de la campaña sea Vivir.

Cinta de publicación de OptinMonster

En la siguiente pantalla, asegúrese de que el estado de su campaña sea Vivir.

Pantalla de publicación de OptinMonster

Ahora, todo lo que queda es agregar su formulario emergente a su sitio de WordPress.

Paso 3: agregue el formulario de registro de usuario a WordPress

Dirígete a tu panel de WordPress.

Hacer clic OptinMonster de WordPress.

OptinMonster en WordPress-min

Es posible que deba actualizar sus campañas si no ve su campaña aquí.

Actualizar la campaña de OptinMonster en WordPress-min

Una vez que vea su campaña, haga clic en Editar configuración de salida.

Editar la configuración del formulario de registro emergente WordPress

En Quién debería ver esta campaña, haga clic en Muestre la campaña a todos los visitantes y usuarios.

Editar la configuración de salida para la ventana emergente de registro de WordPress

Finalmente, agregue su enlace Monsterlinks a su sitio.

Ahora creará un enlace de registro en el que se puede hacer clic que puede colocar en cualquier lugar de su sitio.

Ahora, los visitantes de su sitio verán esta ventana emergente cuando hagan clic en el enlace de registro:

Registro emergente de WordPress

Eso es todo.

Ahora, ha configurado un proceso de registro súper simple en su sitio de WordPress.

Cree un formulario de registro emergente ahora

Ahora que sabe cómo utilizar las ventanas emergentes para facilitar el registro de usuarios, es posible que también desee ver cómo pueden aumentar sus suscriptores de correo electrónico.

Consulte estos artículos para conocer las técnicas que agregarán más suscriptores a su lista de correo:

¿Está listo para usar ventanas emergentes para hacer crecer su negocio? Obtenga OptinMonster hoy.

Recomendamos

Populares