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

¿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.

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:

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 🙂