Tutorial

🛎️¡Elaborar un formulario con Elementor, Google Sheets y Google Cloud!

Elaborar un formulario con Elementor. Aprenderás a crear un proyecto en Google Cloud. Con vídeo paso a paso.

 

FORMULARIO

ELEMENTOR

Mar 25, 2024

Montoya A.

20min de lectura

Hola amigos de Marieú Technology Corporation, ¡formulario con Elementor, Google Sheets, ElementsKit y Google Cloud! En efecto, en esta guía, paso a paso, aprenderás cómo integrar un formulario en WordPress y almacenar datos del formulario con Elementor.

Elementor es un maquetador de páginas  web o «page builde». Permite crear y diseñar páginas web mediante plantillas, widgets o bloques predefinidos. La instalación del plugin de Elementor se realiza por medio de WordPress. Donde, encontrarás una versión gratuita y otra de pago, para este último, con mayor cantidad de widgets y plantillas.

¿Cómo integrar un formulario con Elementor y Google Sheets?

Entonces, aquí tenemos el diagrama arquitectura de Elementor, Google Cloud y Google Sheets. Nuestro objetivo final ¿cuál es?, va a ser que el usuario ingrese, mediante el formulario de elementor, dentro de nuestra página web, ingresa sus datos sea un nombre, de repente algún correo, alguna dirección y, esos datos almacenados, se van a enviar directamente a Google Sheets, que nosotros tenemos en la nube.

Una vez que tengamos los datos almacenados en Google Sheets, nuestro administrador de base datos o «database» lo va a poder validar. Entonces, dentro de WordPress tenemos lo que es el plugin de Elementor. Entonces, Elementor, como maquetador, vamos a tener lo siguiente. Se va a requerir del plugin de ElementsKit, dentro de la familia de Elementor. Además, se va a trabajar con el widgets de formulario o «form».

Respecto, a lo que es Google Cloud vamos a crear un nuevo proyecto. De hecho, nosotros inicialmente tenemos que registrarnos dentro de la plataforma de Google Cloud. Nos registramos con el dominio, vamos a verlo, y cuando ya tenemos nuestra cuenta, con nuestra credenciales, vamos a crear un nuevo proyecto. Punto número 2, vamos a registrar una aplicación en el proyecto, ¿cuál sería esa aplicación?, va a ser directamente de Google Sheets.

Punto número 3, crear las credenciales de la aplicación. Cuando nosotros creamos esas credenciales lo hacemos con el ID cliente. Entonces, también con el plugin de ElementsKit, donde nosotros vamos a tener esa URI de redireccionamiento y vamos a poder crear las credenciales de la aplicación. Finalmente, dentro de Google Cloud vamos a habilitar la API de Google Sheets y vamos a integrar, internamente, dentro de Google Cloud. Y, al mismo tiempo, vamos a verificar que las credenciales de la aplicación sean las mismas que nos ofrece ElementsKit.

Finalmente, en Google Sheets, para concluir toda la integración. Vamos a exportar y vamos a validar los datos del formulario. El cliente ingresa sus datos, inicialmente, dentro del landing page o nuestra página web, y nosotros vamos a validar que esté llegando a toda la Data al Google Sheets.

Diagrama de Arquitectura Elementor Mailing Google Cloud Google Sheet Marieu scaled

Diagrama de Arquitectura Elementor Mailing - Google Cloud - Google Sheet.
Fuente: Propia, mediante software Miro.

Entonces, ahora estamos en WordPress, recuerden que, inicialmente, tenemos que instalar el plugin de ElementsKit. Entonces, ponemos «añadir nuevo» y vamos a colocar ElementsKit. ElementsKit Elementor Addons o complementos. En nuestro caso ya está activo. Ustedes también recuerden activarlo, después que lo instalan recuerden activarlo. Después de haber instalado el plugin de ElementsKit nos vamos a ir a habilitar una pequeña opción. Ya en ElementsKit, nos vamos a ir a módulos y vamos a habilitar «Google Sheets for Elementor». Una vez que lo habilitan, recuerden guardar cambios y ¡listo!

Entonces amigos, vamos a entrar una plantilla e internamente vamos a crear un formulario. Inicialmente, ponemos «añadir nuevo» y vamos a añadir sección. Vamos a abrir aquí sección o «section». ¿Nombre de plantilla? vamos a colocar formulario. Ponemos crear, una vez que lo tenemos creado, tenemos aquí el formulario y vamos a poner «editar con elementor».

Aquí estamos en la sección de editar el formulario. Vamos a ir a los widgets y vamos a colocar «form». Agregamos formulario, seleccionamos y arrastramos, ¡ahí está!. Entonces, ya tenemos nuestro formulario de Elementor. Por defecto, te viene nombre, email y algún mensaje pequeño, para que el cliente lo pueda enviar. Nos vamos a quedar con todos los campos que nos ofrecen y nos vamos a ir aquí, en la parte final, donde dice Google Sheets. En Google Sheets, nosotros lo vamos a habilitar y vamos a colocar un nombre, en este caso, de la hoja de cálculo. Si nosotros nos vamos a Google Sheet Setting, seleccionamos, tenemos varias integraciones. Una de ellas, en la parte final, ustedes van a ver Google Sheets for Elementor Pro Form, lo desplegamos y ¡ahí está! Entonces, tienen lo que es el Google Cliente ID y tienen el Google Cliente Secret, y algunos pasos para que te puedan ayudar en integración, ¡listo!

Entonces, ahora no vamos a pasar a la plataforma de Google Cloud. Para que nosotros ingresemos a esa plataforma, también podemos hacer lo siguiente. Vamos al navegador y ponemos Google Cloud y ponemos la primera opción y ¡ahí está! Ingresan sus credenciales y, con su dominio, ya tendrían la cuenta de Google Cloud. Entonces, una vez que hayan creado ya tu cuenta de Google Cloud, vamos a seleccionar aquí y ponemos «proyecto nuevo». Ya en el proyecto nuevo, ustedes colocan el nombre del proyecto, pueden colocar, de repente, Marieú DB Google Sheets. Organización, seleccionan su organización. En este caso, va a ser su dominio y la ubicación lo dejamos por defecto. Ponemos ahora crear. Esperamos a que se termine de crear.

Una vez que terminó de crear, abrimos, desplegamos la pestaña y ¡ahí tenemos! Seleccionamos el proyecto y ¡ahí está! Ahora lo que vamos a hacer es registrar una aplicación en el proyecto. Nos vamos al menú de navegación y, en el menú de navegación, vamos a ir a lo que es «descripción general», abrimos el panel y ahí tenemos todo el panel, dentro del proyecto que hemos creado. Dentro del proyecto, nos vamos a ir a las APIs, dentro de las APIs nos vamos a colocar «ir a la descripción general de las APIs». Entonces, seleccionamos aquí: la pantalla de consentimiento de «OAuth» y vamos a seleccionar «externos», dado que, solamente en interno se centra en tu organización. Entonces, como lo tenemos habilitado dentro de Elementor, nosotros vamos a colocar externo. Además, implica que nosotros vamos a usar el formulario para el cliente, por ende, nosotros necesitamos que sea del tipo de uso externo. Vamos a colocar crear.

Entonces, aquí ya tenemos completado la información, por ejemplo, nos hemos trasladado ya el proyecto, que nosotros ya tenemos, que ya está listo, completado con toda la data. Tenemos lo que es «información de la aplicación», este es el nombre de la aplicación que inicialmente habíamos colocado. El correo electrónico de asistencia al usuario, ustedes pueden colocar cualquiera, conforme a sus correos de sus dominios. Tienen también para colocar un logotipo de la aplicación, en este caso, el logo de la empresa. Y si, de repente, quieren editarlo con Photoshop, tienen algunas medidas exactas es de 120 píxeles por 120.

«Dominio de la app», te van a solicitar la página principal de la aplicación, colocan su dominio principal. También, una página de políticas de privacidad, que lo van a tener dentro de su página. Simplemente, lo colocan la ruta slash política de privacidad. Además, te van a solicitar el «vínculo de condiciones del servicio de la aplicación», es los términos y condiciones de su empresa, dentro de la página we, entonces, colocan también la dirección. Te solicitan además lo que son «dominios autorizados», dominio autorizado uno, colocan el dominio principal. Y, finalmente, «la información del contacto al desarrollador» en este caso, me asigné.

Cuando ustedes guardan y continúen, porque son un total de cuatro pasos, el segundo paso sería respecto a los permisos. Permisos que ustedes van a solicitar a algunos usuarios, que autoricen para el desarrollo de la aplicación. Entonces, no hemos agregado de momento algunos permisos, entonces, vamos a continuar con el siguiente paso. El punto 2 es acerca de los permisos, entonces, esos permisos representan, lo que solicitas, que los usuarios autoricen para la APP y permiten que tu proyecto tenga acceso a tipos específicos de datos privados, del usuario de su cuenta de Google. Algunos permisos lo tenemos aquí, ¡ahí está! De momento, nosotros no hemos colocado a un permiso, vamos al siguiente paso.

El siguiente paso sería, usuarios de prueba. Dentro de los usuarios de prueba, es muy importante este paso, dado que nos permite agregar un usuario, a un segundo o tercer usuario, para que pueda editar dicha plataforma de Google Cloud. Una vez que agregamos los usuarios, dentro de tu organización, ponemos guardar y continuar. Te brinda lo que es un resumen, ¡ahí está!, de todo lo que hemos ido llenando. Una vez que ya tenemos listo la pantalla de consentimiento del OAuth, nosotros vamos a pasar a los credenciales. Dentro de los credenciales, nosotros vamos a crear nuevos credenciales. De las cuatro opciones, nosotros vamos a seleccionar la segunda: «ID de cliente OAuth», en el cual, se va a solicitar el consentimiento del usuario, para que tu aplicación, dentro de Elementor, pueda acceder a sus datos.

Entonces, por ejemplo, aquí ya que tenemos todo los credenciales completos, toda la información de credenciales completa, que, actualmente, ya está en funcionamiento. Tenemos el nombre, también te va a solicitar algunos «orígenes autorizados del JavaScript», si es que no lo tenemos, lo podemos dejar en blanco, no es obligatorio en este caso. Entonces, además del JavaScript, te va a solicitar la URI, que es el «identificador de recursos uniforme». Ahora, de repente la consulta es, ¿por donde tienen esa URL?, lo obtienen de ElementsKit. ElementsKit lo tenemos aquí, el paso número 2, ¡aquí está! Este es en ambiente de STG y este es en ambiente de producción. Si tienen solamente un ambiente, entonces solamente colocan una URI.

Otro dato importante, que te va a solicitar dentro de Google Cloud, tenemos la «información adicional». El «ID cliente», en este caso, el id cliente lo tenemos en ElementsKit, esto está aquí, ¡ahí está el ID Client! y también el «Client Secret». Una vez que terminamos con los credenciales, nosotros nos vamos a ir a biblioteca. Ahora lo que vamos a hacer, dentro de la biblioteca de API, es habilitar la API de Google Sheets. Para eso, nosotros vamos a poner en el Search, Google Sheets, ahí tenemos Google Sheets, seleccionamos.

Inicialmente les va a aparecer para habilitar. Como nosotros ya lo hemos habilitado, nos aparece como administrar, pero inicialmente ustedes van a tener que habilitarlo. Ahora lo que vamos a hacer es verificar con las credenciales de la aplicación. ¿Cómo nosotros lo verificamos?, nos vamos a ElementsKit, ¡aquí! y vamos a poner «generar nuevo access». Te va a abrir una nueva ventana, para que autorices, en Google Workspace, acepta esa integración que ElementsKit, del formulario de Elementor, y Google Cloud.

Activar Google Sheets con Elementor Marieu scaled

Activar Google Sheets con Elementor.
Fuente: Propia, mediante software ElementsKit.

Resultados Finales

Entonces chicos, aquí recuerden también que, en el editor de formulario, el nombre tiene que ser el mismo que el nombre del proyecto que hemos creado en Google Cloud. Una vez que está así y que también haya generado, recuerden aquí, el acceso al token. Ponemos actualizar, actualizamos y ahora ponemos vista previa. Ya en vista previa, nosotros vamos a hacer una prueba final. Vamos a poner Marieú, email vamos a poner «tester» y el mensaje «tester 2» porque ya habíamos hecho «tester 1», enviamos y ¡ahí está!. «Your submission was successful», su envío fue exitoso.

Vamos a revisarlo, vamos a validarlo dentro de Drive, ¡ahí está! En Drive, actualizamos, abrimos aquí y ¡ahí está!, «tester 2». Entonces, cada vez que el usuario ingrese en el formulario, estás en su página web, ya vamos a tener otro video para integrarlo dentro de la página web, cuando selecciona «Send», siempre que selecciona «Send», sus datos en nuestra base de datos se va a ir almacenando. ¡Listo, gracias amigos de Marieú Technology Corporation!

Montoya Godenzi Daniel Alejandro escala 20

EL AUTOR

Daniel Alejandro Montoya Godenzi

Alejandro, con el grado de magíster en Administración y Dirección de Proyectos e Ingeniero Mecatrónico, dispone de experiencia en proyectos de entorno tecnológico digital. Forma parte del equipo de Marieú Technology Corporation. En su tiempo libre, le gusta crear nuevos proyectos, leer un libro o ver una serie.

SIGUE LEYENDO

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Marieú Technology Corporation ofrece servicios de creación de páginas web, marketing digital, producción audiovisual y catering, que facilita los negocios en las empresas.

Boletín informativo

Al ingresar acepta nuestros T&C y las Políticas de privacidad.

Marieú Technology Corporation
©Todos los derechos reservados