Cómo crear un formulario de registro personalizado en Elementor

La mayoría de las pequeñas empresas cometen un error crucial: utilizan formularios de registro bastante estándar que se parecen a cualquier otro formulario de registro en la web.

Vemos este patrón repetidamente cada vez que tenemos la oportunidad de revisar los formularios de nuestros clientes mientras atendemos sus consultas.

Así que queríamos crear una guía rápida para ayudar a nuestros lectores a crear formularios de registro impresionantes para construir su lista de correo.

En esta guía, te guiaremos a través de los pasos para crear tu propio formulario de registro personalizado utilizando la herramienta de creación de páginas más popular para WordPress: Elementor.

Crear formularios de registro personalizados en Elementor

Creación de un formulario de registro personalizado en Elementor

Utiliza los enlaces rápidos a continuación para saltar inmediatamente a cualquier sección del tutorial:

Empecemos.

Paso 1: Instalar Elementor y WPForms

Dado que la mayoría de las personas utilizan Elementor para publicar sus páginas, te mostraremos cómo crear formularios de registro personalizados usando Elementor.

Si aún no lo tienes, procede a instalar Elementor en tu sitio.

No necesitarás una licencia premium de Elementor para este tutorial. ¡En su lugar, puedes usar Elementor junto con WPForms para crear formularios de registro de forma gratuita! 😎

Si no sabes cómo instalar plugins, consulta esta guía para principiantes sobre instalación de plugins.

Si bien puedes crear formularios de registro personalizados de aspecto atractivo utilizando una combinación de Elementor y WPForms de forma completamente gratuita, recomendamos probar la licencia WPForms Pro para acceder a herramientas avanzadas y lograr mejores resultados.

¡Después de haber instalado ambos plugins, es hora de empezar a crear tu formulario de registro completamente personalizado!

Paso 2: Crear o editar una página con Elementor

Puedes añadir un formulario de registro a una página existente o a una página completamente nueva. Normalmente, un formulario de suscripción se incrusta como una de las varias secciones en una página de destino más grande. Pero crearemos una nueva página que contenga solo un formulario de registro por simplicidad.

Para empezar, abre tu panel de WordPress y haz clic en Páginas » Añadir Nueva Página.

Una vez que estés dentro del editor de bloques de WordPress, haz clic en el botón Editar con Elementor en la parte superior.

Después de hacer clic en el botón, el editor de Elementor se cargará en unos segundos. Puedes crear una página de destino completa utilizando el editor de arrastrar y soltar.

En el siguiente paso, utilizaremos el widget WPForms para crear un formulario de registro personalizado.

Paso 3: Crear un nuevo formulario de registro

Dado que solo necesitamos añadir un formulario de registro personalizado aquí, busquemos el widget WPForms y arrástralo al área del lado derecho.

Cuando hayas insertado el widget WPForms en tu página, puedes seleccionar cualquier formulario guardado que hayas creado con WPForms o crear uno nuevo.

Crearemos un nuevo formulario de registro haciendo clic en el botón + Nuevo Formulario en el panel izquierdo.

En este punto, el constructor de formularios de WPForms comenzará a cargarse como una superposición. Aquí puedes crear el formulario de registro que necesitas incrustar en tu página.

Empieza por nombrar tu formulario. Esto es útil para que puedas referenciarlo y encontrarlo más tarde en tu panel de WordPress.

A continuación, desplázate hacia abajo y utiliza la barra de búsqueda debajo del panel de selección de plantillas para encontrar una plantilla adecuada. Utilizaremos la plantilla Formulario de suscripción al boletín para este tutorial.

Después de seleccionar la plantilla, el creador de formularios se cargará en tu pantalla. Notarás que esta plantilla ya incluye los campos Nombre y Correo electrónico, que es básicamente todo lo que necesitas para la suscripción al boletín.

¡Pero la diversión no termina ahí! Podemos llevar este formulario al siguiente nivel y darle un verdadero cambio de imagen.

Una de las formas en que podemos hacer esto es agregando un encabezado divertido que invite a más personas a suscribirse.

Puedes hacer esto usando el campo Contenido disponible en WPForms Pro. Insertaremos el campo Contenido en la parte superior del formulario.

Después de agregar el campo, haz clic en él para abrir sus Opciones de campo asociadas en el panel izquierdo.

El editor de texto en el panel izquierdo te permite agregar cualquier fragmento de texto sin ningún código. Agregaremos algo de texto y lo formatearemos como Encabezado 4. ¡También agregaremos un emoji para que el texto destaque más! 🕺

Asegúrate de presionar el botón Actualizar vista previa debajo del editor para ver los cambios que se reflejan en tu formulario a la derecha.

Y ya que estamos en ello, también cambiemos el texto del botón de envío y hagámoslo más relevante a la naturaleza del formulario.

Desde la barra lateral en el creador de formularios, haz clic en Ajustes » General. Desplázate hacia abajo hasta que encuentres el campo Texto del botón de envío. Puedes reemplazar el texto predeterminado simplemente escribiendo aquí.

¡Genial! El formulario ya está tomando buena forma. Este es un buen momento para guardar el formulario presionando Guardar en la parte superior.

Pero un formulario de suscripción al boletín no tendría sentido sin estar integrado con tu herramienta de marketing por correo electrónico.

En el siguiente paso, te mostraremos cómo integrar tu formulario con tu aplicación de marketing para que los nuevos suscriptores se copien automáticamente en tu lista de suscriptores.

Paso 4: Conectar el formulario de registro con una plataforma de marketing

WPForms admite varias integraciones de marketing a partir de los planes Plus y superiores. Si estás utilizando WPForms Lite, aún puedes acceder a la integración de Constant Contact de forma gratuita.

Para este ejemplo, te mostraremos rápidamente cómo conectar tu formulario de suscripción con Brevo.

Simplemente ve a la pestaña Marketing en la barra lateral.

Luego, selecciona el servicio con el que deseas conectar tu formulario. Con la excepción de Constant Contact, todas las integraciones de marketing admitidas requieren que instales el complemento correspondiente primero.

Si aún no tienes el complemento, WPForms lo instalará por ti cuando hagas clic en él.

En este caso, estamos usando Brevo. Al hacer clic en Brevo dentro de la pestaña Marketing, nos apareció un aviso para instalarlo. Después de presionar Sí, instalar y activar, solo tomó unos 5 segundos para que el complemento de Brevo se instalara y estuviera listo.

A continuación, con Brevo seleccionado en el panel izquierdo, haz clic en Añadir nueva cuenta en la parte superior derecha.

Ahora, simplemente introduzca su clave API de Brevo y un apodo para su cuenta. Si necesita más ayuda para encontrar su clave API de Brevo, consulte la documentación del complemento Brevo para obtener más detalles.

Después de introducir la información requerida, haga clic en Añadir.

Una vez que se conecte con su cuenta de Brevo, aparecerá una nueva lista de ajustes en el panel derecho.

Utilice los campos desplegables para configurar cómo debe funcionar su formulario con su cuenta de Brevo. Puede establecer acciones como la que se realizará en Brevo cuando se envíe el formulario, la lista donde se deben añadir o eliminar nuevos suscriptores, la correspondencia de los campos de correo electrónico y mucho más.

Cuando haya terminado, asegúrese de pulsar Guardar en la parte superior.

La integración de marketing ha finalizado. Ha sido fácil, ¿verdad?

Paso 5: Estilizar tu formulario de registro y publicarlo

En este punto, hemos terminado de configurar las funcionalidades requeridas para el formulario de registro. Pero como enfatizamos al principio de este tutorial, un formulario impactante necesita ser más que funcional: también debe ser visualmente impresionante.

Si bien ya hemos hecho que nuestro formulario sea mucho más interesante añadiendo texto y emojis con el campo Contenido, podemos ir aún más lejos con el poder combinado de WPForms y Elementor.

Una vez que su formulario esté listo, simplemente salga de WPForms pulsando el botón de la cruz. Ahora debería tener el editor de Elementor con su formulario recién creado incrustado como un widget.

Haga clic en el formulario y luego seleccione la pestaña Estilos ubicada en el panel izquierdo.

 

Debajo de esta pestaña, encontrará opciones para personalizar los estilos de diferentes componentes del formulario. Por ejemplo, puede personalizar los estilos de sus campos, etiquetas y botones sin necesidad de código.

En nuestro formulario, los bordes de los campos son rectangulares con esquinas rectas por defecto. Pero si necesita bordes de campo más redondeados, puede hacerlo simplemente aumentando el valor del radio del borde en Estilos de campo.

Del mismo modo, puede cambiar el color de sus campos, etiquetas y botones con un solo clic. Usaremos los colores predeterminados porque combinan perfectamente con nuestro tema. Pero siéntase libre de experimentar con diferentes colores en su formulario.

En Elementor, también puede cambiar los estilos del contenedor de su formulario. Para ello, haga clic en la pestaña Avanzado.

Encontrará una gran cantidad de configuraciones fascinantes aquí, incluyendo ajustes de diseño, efectos de animación, personalizaciones de fondo y más.

Añadamos un color de fondo al contenedor del formulario para darle un aspecto más animado. Haga clic en la opción Fondo para expandir el menú con configuraciones adicionales.

Añadiremos un color sólido haciendo clic en el icono de selección de color de la derecha.

La herramienta de selección de color le permite seleccionar cómodamente cualquier color con un clic.

¡Después de seleccionar el color, el formulario se ve inmediatamente mucho más atractivo visualmente!

Sin embargo, los elementos dentro del formulario están tocando los bordes del contenedor, lo que no se ve muy bien.

¡Esto es una solución fácil!

Haz clic en la opción Diseño en el menú Avanzado del panel izquierdo para acceder a la configuración de márgenes y relleno. Simplemente añadimos algo de relleno y ¡los resultados se ven geniales!

En este punto, estamos listos para publicar tu formulario. Pero si deseas probar personalizaciones adicionales, siéntete libre de pasar más tiempo aquí y explorar diferentes opciones.

Cuando estés listo, pulsa el botón Publicar en la parte inferior.

Verás inmediatamente un mensaje emergente preguntándote si deseas ver tu página publicada ahora.

Adelante y ve tu página después de publicarla.

¡Y eso es todo!

Acabas de añadir un formulario de registro personalizado usando Elementor y WPForms.

Con esto, puedes asegurarte de que tu formulario se vea único para tu sitio web y esté equipado con integraciones que ahorran tiempo para ayudarte a aumentar tus suscriptores de correo electrónico sin ningún problema.

Preguntas frecuentes sobre formularios de registro en Elementor

¿Todavía tienes preguntas sobre la creación de formularios de registro en Elementor? Aquí hay algunas preguntas que nuestros clientes nos han hecho antes.

¿Necesito Elementor Pro para crear un formulario de registro?

No, no necesitas Elementor Pro para crear un formulario de registro siempre que tengas WPForms instalado. Puedes acceder al widget de WPForms en Elementor sin necesidad de actualizar a la versión Pro. Sin embargo, Elementor también tiene su propio creador de formularios independiente. Si deseas crear formularios de registro solo con Elementor, necesitarás una licencia Pro.

Si bien Elementor es una fantástica herramienta de creación de páginas, el creador de formularios de Elementor es más básico y tiene varias limitaciones en comparación con creadores de formularios avanzados como WPForms.

¿Cómo puedo estilizar mi formulario de registro para que coincida con la marca de mi sitio web?

La forma más fácil de hacer que tus formularios de registro coincidan con la marca de tu sitio web es usar los colores del tema de tu sitio para diferentes aspectos de tu formulario. WPForms elige automáticamente los colores primarios y secundarios de tu tema, por lo que puedes usar fácilmente estos colores para diferentes componentes de tu formulario, como bordes, etiquetas y botones.

Puedes acceder a estas configuraciones de personalización de estilo en el widget WPForms de Elementor haciendo clic en la pestaña Estilo. Allí, encontrarás la opción para cambiar el color de diferentes partes de tu formulario eligiendo entre los colores de tema disponibles para que coincidan con tu marca. ¡No se necesita codificación!

¿Puedo usar CSS personalizado para estilizar mi formulario de registro?

Sí, puedes añadir clases CSS personalizadas a tu formulario de registro si estás usando WPForms. Para hacer esto, haz clic en Estilo después de seleccionar el widget WPForms en Elementor, luego haz clic en Avanzado. Luego puedes insertar CSS personalizado para estilizar tu formulario de registro.

¿Cómo puedo crear un formulario de registro de varios pasos?

WPForms te ofrece varias formas de crear un formulario de registro de varios pasos. Puedes añadir saltos de página para dividir tu formulario en varias páginas, o puedes usar el complemento Lead Forms, que convierte automáticamente un formulario normal en un formulario de registro de varios pasos con saltos de página entre ellos.

A continuación, crea un formulario personalizado de ConvertKit

WPForms se integra con varias plataformas de marketing, incluido ConvertKit. Tenemos una guía dedicada que te muestra cómo crear un formulario personalizado de ConvertKit. ¡Asegúrate de consultarla!

También puedes comparar opciones gratuitas de formularios de pedido si vendes algún producto en línea.

Crear formularios de registro personalizados en Elementor

¿Listo para crear tu formulario de registro personalizado? Empieza hoy mismo con el plugin de creación de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.