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.
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.
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!
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.
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.
Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Estas cookies son:
Sesión de usuario
Aceptación de cookies
Comentarios
Seguridad
Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.
Cookies de terceros
Esta web utiliza Google Analytics, Pixel de Facebook y HubSpot para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.
Dejar esta cookie activa nos permite mejorar nuestra web.
¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!