¿Quieres personalizar la página de inicio de sesión en tu sitio web WordPress? Con WPForms, tiene muchas maneras de dar estilo a sus formularios de inicio de sesión, ¡sin necesidad de codificación!

En este post, te mostraremos 7 ejemplos diferentes de páginas de inicio de sesión de sitios populares, y cómo recrearlas. Te guiaremos a través del proceso de construcción de cada formulario en el mismo estilo de los ejemplos que presentamos aquí, con sólo unos pocos clics de tu ratón.

Sumerjámonos.

Cree su página de inicio de sesión ahora

¿Qué se escribe en una página de inicio de sesión?

Es probable que su página de inicio de sesión contenga algunos campos en los que los usuarios introducen su nombre de usuario, dirección de correo electrónico, contraseña, etc.

La página de inicio de sesión de su sitio web es un lugar donde los usuarios del sitio web introducen sus credenciales para acceder a su sitio. Estos visitantes pueden tener una cuenta en su sitio, o alguna otra razón para necesitar iniciar sesión en su sitio web.

Es probable que también quiera incluir algún tipo de texto en su página de inicio de sesión, para informar o guiar a los usuarios de su sitio web sobre cómo entrar en él. También puede añadir imágenes como logotipos e ilustraciones en su página de inicio de sesión, y puede optar por funciones de seguridad adicionales para evitar que el spam no deseado obstruya su página de inicio de sesión.

7 Ejemplos de páginas de inicio de sesión

1. Formulario de acceso sencillo

Esta página de inicio de sesión en el sitio web de HubSpot es bastante básica y sin muchos detalles incluidos en el formulario. El formulario consta simplemente de una entrada de correo electrónico, una contraseña, una casilla de verificación y un botón de inicio de sesión.

Lo que pasa con un formulario como este, es que es un poco como la base de todos los demás ejemplos de formularios de inicio de sesión. Tiene los elementos más básicos necesarios para una página de inicio de sesión.

Y, si lo prefieres, tu propia página de inicio de sesión también se puede simplificar así. WPForms es el mejor plugin constructor de formularios para WordPress, y te lo pone súper fácil para añadir una página de inicio de sesión personalizada a tu sitio web.

En primer lugar, tendrá que instalar WPForms y suscribirse al Plan Pro para acceder al addon de Registro de Usuarios.

Luego de ingresar su clave de licencia en la configuración de WPForms, vaya a WPForms " Complementos en su panel de control. Desplácese por los complementos disponibles hasta encontrar el complemento Registro de usuarios, que también instalará. Asegúrese de activar el complemento una vez que lo haya instalado.

Ahora está listo para construir su formulario de inicio de sesión. Vaya a WPForms " Agregar Nuevo y encuentre la plantilla Formulario de Inicio de Sesión de Usuario de sus Plantillas de Complementos disponibles. Haga click en el botón Usar Plantilla para seleccionar esta plantilla y abrir el constructor de formularios.

El creador de formularios WPForms le facilita la edición de esta plantilla prediseñada para adaptarla a sus necesidades. Encontrará una amplia selección de campos de formulario que cubren prácticamente cualquier elemento que desee en su formulario en línea. Todo lo que necesita hacer es simplemente arrastrar y soltar cada campo en su lugar.

Verá que el formulario de inicio de sesión de usuario ya ha cargado los campos necesarios.

Pero, como todas las plantillas WPForms, este formulario es altamente personalizable, por lo que puede agregar y editar campos en su formulario de varias maneras.

Para este formulario, vamos a editar el botón Enviar en la parte inferior del formulario para que diga "Iniciar sesión" como en el ejemplo de la página de inicio de sesión de HubSpot.

Basta con hacer clic en el botón para ampliar su configuración.

A continuación, para cambiar el texto del botón, abra la pestaña General y desplácese hasta el cuadro Texto del botón Enviar.

Ahora, escriba lo que le gustaría que dijera el botón, como por ejemplo "Iniciar sesión".

Mirando de nuevo el formulario, el botón de la parte inferior del formulario se ajusta mejor a la naturaleza de inicio de sesión de esta página.

Y eso es todo lo que necesitas hacer para crear un formulario de inicio de sesión básico como el que se utiliza en la página de inicio de sesión de HubSpot.

A partir de aquí, siga adelante y guarde este formulario.

Una vez guardado, este formulario estará disponible para su uso en la página Todos los formularios de WPForms en el panel de control de WordPress.

Ahora tiene un sencillo formulario de inicio de sesión que puede publicar rápidamente en su sitio, o que puede utilizar como base para crear páginas de inicio de sesión más detalladas. Estos son los pasos básicos requeridos para todos los ejemplos de páginas de inicio de sesión cubiertos aquí.

2. Formulario de inicio de sesión con texto de instrucciones

Eche un vistazo a la página de inicio de sesión de WordPress.org. Al igual que el primer ejemplo que vimos, este es bastante básico.

Pero tiene un fragmento de texto instructivo en la parte superior, y su formulario también puede tenerlo.

Como mencionamos, cada formulario hecho aquí requiere primero la plantilla User Login Form, incluyendo este. Siga adelante y seleccione la plantilla de nuevo.

A continuación, en el constructor de formularios, arrastre el campo Contenido a la parte superior del formulario y suéltelo allí.

Como dijimos antes, puedes arrastrar y soltar este campo en tu formulario donde quieras.

Pero para que se parezca al texto de instrucciones de la página de inicio de sesión anterior, pongamos el campo en la parte superior.

Haga clic en el campo para abrir sus opciones personalizables, que se encuentran en la parte izquierda de la pantalla. A continuación, utilice el editor de texto para escribir el texto de instrucción que desea que aparezca en este campo.

Como en el ejemplo anterior, podría indicar a los usuarios que introduzcan sus datos para iniciar sesión en su sitio web.

El editor de texto pone a tu disposición un montón de opciones, con estilos de fuente personalizables, colores y mucho más.

Por ejemplo, mire de nuevo la página de inicio de sesión de HubSpot del ejemplo 1. Observe que hay un fragmento muy corto de texto instructivo. El texto instructivo dice: "¿No tiene una cuenta? Regístrate" y proporciona un enlace a una página donde los usuarios pueden crear una cuenta.

Esto también es posible con el editor de texto del campo Contenido de su formulario.

En primer lugar, escriba el texto de las instrucciones y resalte la parte que desea enlazar. A continuación, haga clic en el icono de enlace de la barra de herramientas del editor de texto.

Ahora insertarás la URL de la página a la que quieres que lleguen los usuarios. Haz clic en OK cuando hayas terminado.

Y ya está. Ahora tiene texto instructivo, y un enlace, en su formulario.

Como siempre, guarda tu formulario para más tarde o incrústalo en una página. Al final de este artículo, te explicaremos cómo publicar la página de inicio de sesión en tu sitio web.

3. Formulario de inicio de sesión con imagen de cabecera

Otra forma de personalizar el Formulario de Acceso de Usuario para su página de acceso es añadiendo una imagen de cabecera de su elección. El uso de una imagen en la parte superior de su formulario es una buena manera de personalizar su formulario, o complementar el estilo de su sitio web.

Para añadir una imagen de cabecera, utilizarás una vez más el campo Contenido y la plantilla Formulario de inicio de sesión de usuario. Sigue adelante y arrastra y suelta este campo en la parte superior de tu formulario como antes.

Pero esta vez, haz clic en el botón Añadir medio situado encima del editor de texto.

Ahora, subirás una imagen de tu elección, que aparecerá encima del texto en el editor de texto.

Si lo deseas, también puedes eliminar el texto esta vez y trabajar sólo con la imagen.

Haga clic en la imagen para acceder a su configuración de visualización y coloque la imagen como desee.

Para que la imagen de nuestro ejemplo actúe como una verdadera imagen de cabecera, centraremos la alineación y seleccionaremos la versión a tamaño completo. Puede ajustar estas opciones varias veces hasta encontrar la que prefiera.

Asegúrese de hacer clic en el botón azul Actualizar para aplicar los cambios.

También puede explorar las otras pestañas de configuración para obtener más opciones, como cambiar el Tamaño de campo en la pestaña Avanzado.

Pruebe el tamaño de campo Grande para ver la imagen aún más grande en la parte superior del formulario, como si se tratara de una imagen de cabecera.

Una vez más, asegúrese de guardar su formulario para más tarde. Y para más consejos relacionados con este ejemplo, echa un vistazo a este post completo sobre cómo añadir una imagen de cabecera a tus formularios.

4. Formulario de inicio de sesión con el logotipo de la empresa

Echemos un vistazo a la página de inicio de sesión de SendLayer. En la parte superior del formulario, encima del texto de instrucciones que hemos visto anteriormente, aparece el logotipo del sitio web.

También puede añadir un logotipo a su formulario, utilizando una vez más el campo Contenido de su formulario de inicio de sesión de usuario.

¿Recuerdas cómo utilizaste el campo Contenido para subir una imagen de cabecera? ¿Por qué no utilizar un proceso similar para mostrar un logotipo? Gracias al constructor de formularios, tienes múltiples opciones para colocar logotipos en tu formulario.

Sólo tiene que arrastrar el campo Contenido al lugar del formulario que desee.

Para asemejarnos al ejemplo anterior, coloquemos el logotipo en la parte superior del formulario. Y puesto que esto es un poco como una imagen de cabecera, un logotipo de estilo horizontal podría verse mejor aquí.

Recuerde que sólo tiene que hacer clic en el botón Añadir medios del campo Contenido para cargar su logotipo.

Y no te olvides de los ajustes adicionales. Puede que desee centrar el logotipo, hacerlo a tamaño completo o cambiar el tamaño del campo en la configuración avanzada.

También puede editar el texto debajo del logotipo, como hicimos en el ejemplo del texto de instrucciones, lo que haría que su formulario se pareciera mucho al del ejemplo.

Su página de inicio de sesión tiene ahora su logotipo claramente visible en su formulario. ¡Siéntase libre de añadir otro logotipo en la parte inferior, o en cualquier otro lugar que le gustaría arrastrar el campo Contenido, también!

5. Formulario de inicio de sesión con ilustración

Veamos ahora la página de inicio de sesión de TrustPulse. Este formulario de inicio de sesión tiene las credenciales introducidas en un lado de la pantalla con un pequeño logotipo encima, y una gran ilustración mostrada en el otro lado.

Usted también puede crear un formulario con este aspecto utilizando conjuntamente el campo Diseño y el campo Contenido.

En primer lugar, arrastre el campo Diseño a su formulario de inicio de sesión de usuario.

En realidad no importa dónde arrastres y sueltes el campo Diseño ahora, porque eventualmente arrastrarás los campos precargados del formulario al propio campo Diseño.

Por ahora, vamos a arrastrarlo a la parte superior del formulario para mantenernos organizados. También seleccionarás la orientación de las columnas dentro del diseño, lo que determinará el tamaño y la ubicación del contenido en este campo.

Ahora, arrastre el campo Contenido a la primera columna del campo Diseño de su formulario, para poder mostrar aquí un logotipo como en el ejemplo de TrustPulse.

Utilice el botón Añadir medios para cargar de nuevo su logotipo y, a continuación, asegúrese de que la imagen está orientada y tiene el tamaño que desea.

A continuación, arrastre y suelte los demás campos del formulario en ese lado del campo Diseño.

Simplemente coja cada campo con el ratón, arrástrelo a la columna Diseño y suéltelo. El campo Correo electrónico, el campo Contraseña y la casilla de verificación estarán ahora en la columna izquierda de su formulario.

Ahora, añadirás contenido a la otra columna en el campo Diseño.

Seleccione de nuevo el campo Contenido y arrástrelo a la columna más grande de la derecha de su formulario.

Ahora puede añadir una ilustración de su elección para que se muestre en gran medida en este lado de su formulario.

Haz clic en el botón Añadir medios como hiciste en el otro lado para subir una ilustración.

Y, una vez más, asegúrate de ajustar la configuración de campo para personalizar el tamaño y la colocación de tu ilustración.

Para una ilustración grande como la del ejemplo, puede que desee eliminar cualquier texto adicional del campo Contenido.

Y ahora su formulario tiene el logotipo pequeño y las entradas de credenciales en una cara, y una ilustración grande en la otra.

Como siempre, tendrá que guardar este formulario para mantenerlo en WPForms en su tablero de instrumentos, y luego incrustarlo en una página de WordPress cuando esté listo para usarlo.

6. Formulario de inicio de sesión con CTA

A continuación, veremos la página de inicio de sesión de ExactMetrics, que es algo similar al inicio de sesión anterior, pero con un botón de llamada a la acción en un lado del formulario en lugar de una ilustración.

Un lado tiene un pequeño logotipo, una entrada de correo electrónico, una entrada de contraseña y un botón de inicio de sesión, y el otro lado tiene bastante texto, seguido de una CTA en la que se puede hacer clic.

Para crear una apariencia similar con su propio formulario, simplemente necesita seguir los pasos que cubrimos en el ejemplo anterior: primero añadir el campo Diseño a su Formulario de Inicio de Sesión de Usuario, y arrastrar los campos a un lado o columna del diseño.

Recuerde que sólo tiene que arrastrar el campo Contenido al Diseño para cargar el logotipo y, a continuación, arrastrar el resto de campos del formulario también a ese lado del Diseño.

Pero entonces, para el otro lado del campo Diseño, en la segunda columna, no te preocupes por subir nada. Sólo editarás el texto que ya está aquí.

Observe cómo parte del texto precargado es más grande y más grueso que lo que hay debajo, similar al estilo de texto del ejemplo.

Esto hace que sea fácil modelar tu texto como el del ejemplo, pero no te olvides de todas las demás formas de utilizar el editor de texto en tu beneficio. Puedes cambiar el tamaño, la orientación y el color del texto, entre otras cosas.

Y dentro del editor de texto del campo Contenido, puede incluso insertar un fragmento de código para crear un botón CTA.

Haga clic en la pestaña Texto del cuadro del editor de texto para copiar y pegar el código que desea utilizar para crear un botón.

Puede editar el fragmento de código para dar al botón CTA el aspecto que desee.

Ya tiene un botón CTA en su formulario.

Una vez más, tendrás que guardar este formulario y luego incrustarlo en una página de WordPress cuando estés listo para usarlo.

7. Formulario de inicio de sesión con un reCAPTCHA

Ahora que hemos trabajado en las formas más complejas de dar estilo a un formulario de inicio de sesión, veamos uno de los elementos de seguridad más fáciles de añadir a tu formulario, donde quieras.

La verificación reCAPTCHA ayuda a proteger su sitio web WordPress de bots y spam que intentarían utilizar sus formularios para entrar en su sitio.

Como puede ver, lo usamos en nuestra propia página de inicio de sesión aquí en WPForms.

También puede añadir fácilmente un campo reCAPTCHA a cualquiera de sus formularios de inicio de sesión. Pero primero, tendrás que configurarlo en los ajustes de WPForms.

Desde su panel de WordPress, vaya a WPForms y luego a Configuración. A continuación, asegúrese de que está en la pantalla CAPTCHA.

Seleccione la opción reCAPTCHA en el centro de la pantalla.

A continuación, elija el tipo de verificación reCAPTCHA que desea utilizar.

Seleccionemos el Checkbox reCAPTCHA v2.

A continuación, deberá introducir una clave del sitio y una clave secreta en esta página de configuración, proporcionadas por Google. Para recibir estas claves, debe seguir el proceso de configuración en la consola de administración de reCAPTCHA de Google.

Para obtener más información, junto con un tutorial detallado sobre cómo hacerlo, consulte nuestro artículo sobre la configuración y el uso de reCAPTCHA con sus formularios de WordPress.

No olvide hacer clic en Guardar en la parte inferior de esta pantalla para aplicar esta configuración a su campo reCAPTCHA.

Ahora está listo para añadir la verificación reCAPTCHA a su formulario.

De vuelta en la página de creación de formularios, sólo tiene que hacer clic en el campo reCAPTCHA para habilitarlo en su formulario de inicio de sesión de usuario.

Y ya está. Su formulario de acceso está ahora protegido contra los robots y el spam que de otro modo podrían infiltrarse en su sitio.

Además, el icono reCAPTCHA se muestra en el formulario, lo que indica a los usuarios que su información está segura.

Cómo añadir una página de inicio de sesión personalizada a WordPress

Lo útil del constructor de formularios de WPForms es que todas las opciones personalizables y opciones de estilo inspiradas en estos ejemplos se pueden crear en el propio formulario.

Sin embargo, algunos de los estilos logrados en estos ejemplos pueden ser el resultado de una edición adicional en la página de inicio de sesión.

Por lo tanto, para obtener consejos adicionales en profundidad sobre cómo lograr aún más el estilo con WPForms en su página de WordPress, echa un vistazo a este artículo completo sobre cómo el estilo de las formas con CSS.

Además, ten en cuenta que con todos los formularios creados y los ejemplos que hemos cubierto aquí, tendrás que guardar el formulario cuando hayas terminado de editarlo. Entonces, tal vez más tarde si es necesario, puede incrustar el formulario en una página y publicarlo cuando esté listo.

O, desde el constructor de formularios, puedes seguir adelante e incrustar tu formulario en una página ahora.

Al hacer clic en Incrustar, puede incrustar su formulario de inicio de sesión en una página que ya haya creado para su sitio web, o puede crear una nueva página ahora para este formulario de inicio de sesión.

Si decide crear una nueva página, tendrá que nombrar la página, al igual que las otras páginas a través de su sitio web se nombran para que pueda encontrar fácilmente en el panel de WordPress.

Haga clic en ¡Vamos! para continuar. WPForms agregará automáticamente su formulario de inicio de sesión a su nueva página.

Después de incrustar su formulario, siempre puede editar algunas cosas más en la propia página de WordPress accediendo a la configuración del bloque WPForms y editando otros elementos de estilo de la página.

Consulte este artículo para obtener más ideas sobre cómo editar y personalizar su página de inicio de sesión de WordPress.

Y recuerde que, como todas sus páginas de WordPress, tendrá que publicar la página con el formulario incrustado para que aparezca en su sitio web.

También puedes previsualizar la página antes de publicarla o guardar el borrador para más tarde.

Para más información sobre este tema, consulte este tutorial sobre cómo mostrar formularios de inicio de sesión y registro.

Cree su página de inicio de sesión ahora

A continuación, cree un formulario de inscripción con PayPal

Ahora que ya sabe cómo crear formularios de inicio de sesión para su sitio Web de WordPress, ¿por qué no prueba a crear un formulario de registro de WordPress con PayPal? De esta forma, podrá registrar a los usuarios de su sitio web y comenzar a cobrar los pagos.

Si desea imprimir las entradas de su formulario, le recomendamos que consulte nuestra guía sobre cómo imprimir formularios de WordPress en PDF.

¿Listo para crear tu formulario? Empieza hoy mismo con el plugin más sencillo para crear formularios en WordPress. WPForms Pro incluye un montón de plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Si este artículo te ha ayudado, síguenos en Facebook y Twitter para más tutoriales y guías gratuitas sobre WordPress.