Dos formas de crear un formulario de login en un modal box en Oxygen Builder

12/01/2022- Bohdan Shila

En este tutorial vemos dos formas de crear un formulario de acceso a la web en una ventana modal que se abrirá al hacer click en un botón.

¿Por qué vemos dos formas de hacerlo? Porque una tiene ciertas ventajas sobre otra, porque quiero que conozcas todas las opciones y para que trabajes un poco con el código, que no da tanto miedo 🙂

Los pasos que seguimos son:

  1. Creamos una template que abarque todas las páginas (Catch All), si no tenemos una así ya
  2. Creamos un botón (o los botones) que abrirán el modal box
  3. Añadimos un modal box donde irá el formulario
  4. Conectamos el modal box con el botón que lo abrirá
  5. Añadimos el formulario.

Ahora, para abrir el formulario tenemos dos métodos:

Formulario de login como componente de Oxygen Builder

En este método simplemente utilizamos el componente que ya trae Oxygen por defecto:

Este componente realmente utiliza una función PHP de WordPress para mostrar el formulario, pero ya nos da el trabajo hecho.

Sin embargo tiene ciertas limitaciones. Las únicas opciones que tenemos para personalizarlo son las siguientes:

Pero la función de WordPress nos ofrece mucho más. Y por eso tenemos el segundo método.

Formulario de login utilizando la función de WordPress

Este método consiste en utilizar la función nativa de WordPress para mostrar ese formulario. Por cierto, esa función es wp_login_form(). ¿Por qué usarla? Porque de esta forma podemos utilizar los argumentos que acepta esa función y añadir algunas funciones a nuestro formulario de acceso.

Por ejemplo la típica sería redirigir al usuario a una página concreta después de loguearse. No lo podemos hacer con el componente de Oxygen pero sí con la función.

Así que simplemente creamos un code block

E insertamos la siguiente función en la pestaña de PHP & HTML:

<?php
	wp_login_form(array(
		'redirect' => 'https://google.com'
	));
?>

Me he adelantado y ya he puesto el argumento de la redirección, que es el más utilizado. En la documentación oficial tienes más argumentos que puedes utilizar: wp_login_form().

Corrección de estilos

Al insertar el form con el componente de Oxygen ese form lleva incluida una clase de CSS que corrige algunos estilos. Si lo hacemos a través del Code Block, no tendremos esta correción.

Con el componente de Oxygen Builder
Usando el Code Block

Pero podemos corregirlo muy fácilmente añadiendo la clase oxy-login-form al Code Block y aplicar así los mismos estilos:

Estilizar el interior del formulario

Como el contenido del formulario (inputs, botón, labels..) se imprime por el WordPress y no por Oxygen, no podemos acceder a su contenido desde el panel de estructura.

Deberemos utilizar el Selector Detector para seleccionar los selectores dentro del form y así poder aplicarles los estilos con Oxygen:

Activar el Selector Detector en Oxygen Builder
Abrir el Selector Detector
Elección del selector en el Selector Detector

A partir de aquí nos vamos a la pestaña Advanced y hacemos las modificaciones que necesitemos.

¡Esto es todo! Espero que te haya servido 🙂

Evoluciona por fin tu forma de maquetar webs en WordPress
Aprende a usar Oxygen Builder a nivel profesional y dispara tu productividad en el desarrollo web
Saber más