Formulario Widget para Elementor

Guardar Datos en Google Sheets con Elementor “Form Widget”

Califica este artículo
5/5

Cuando trabajamos con Elementor nos sentimos muy cómodos por la versatilidad para configurar y darle estilo a sus widgets, pero muchas veces nos hemos preguntado ¿por qué el formulario de la versión pro de Elementor no permite almacenar los datos que rellenan los usuarios?, en el directorio de plugins de WordPress encontramos 2 plugins que solucionan esta carencia del formulario, pero en este artículo queremos explicar como realizar lograr almacenar los datos sin la utilización de esos plugins, pero utilizando Zapier.

WEBHOOKS: Un Webhook es una manera de ser notificado cuando un evento ha ocurrido en tu aplicacion o la de un tercero. Es básicamente una solicitud POST que se envía a una URL específica. Esa URL está configurada para recibir el cuerpo de la solicitud POST y procesarla de alguna manera. Por lo tanto, si alguna vez has creado un formulario y lo has enviado en código, sabes cómo crear una solicitud POST.  Leer más

Zapier nos permite comunicarnos con sus servicios por medio de Webhooks, y es lo que utilizaremos para poder enviar los datos desde el formulario de Elementor a una Google Sheets específica de nuestro Google Drive.

Sigue estos pasos para almacenar la información de tu formulario en una Google Sheets:

  • Debe seleccionar las aplicaciones que se van a integrar, en este caso del lado izquierdo “Webhooks” y del lado derecho “Google Sheets”.
  • En tu cuenta de Zapier selecciona del lado izquierdo Webhooks.
  • Del lado derecho selecciona Google Sheets
  • Selecciona la opción “Add info to Google Sheet from new webhooks POSTs”.

Al seleccionar la app Google Sheets, Zapier por defecto tiene definida la zap “Add info to Google Sheet from new webhooks POSTs”

  • En la siguiente pantalla damos click en “CONTINUAR”

Al ser un Zap predefinido, solo nos muestra la opción  Catch Hook, que es la que permite a Zapier recibir los datos enviados desde otra página web.

  • En la siguiente pantalla damos click en “CONTINUAR”

Como requerimos los datos dinámicos, debemos recibirlos y no escribirlos en esta pantalla, damos click en “CONTINUAR”

  • En esta pantalla obtenemos la URL que nos va a permitir comunicar el formulario de Elementor con Zapier

Copiamos la URL para llevarla a la configuración del formulario de Elementor.

  • En el formulario de Elementor, debemos activar la acción de Webhooks, y este nos habilitará el campo para agregar la URL obtenida en el paso anterior.

En la pestaña contenido de la edición del formulario, luego de “Submit Button”, encuentras “Actions After Submit”, ahí se selecciona de la lista “Webhook”, y se habilitará la pestaña “Webhook” en la cual podrás ingresas la URL Webhooks de Zapier.

  • En la siguiente imagen verás donde colocar la URL de Zapier.

Luego de ingresar la URL, debes dar actualizar a Elementor.

  • Ahora debemos crear en Google Sheets, el libro donde almacenaremos la información enviada por el formulario.

Para este ejemplo vamos a utilizar los títulos país y población, realizamos un envío del formulario, para que Zapier pueda confirmar que ya está recibiendo los datos.

  • Continuamos configurando nuestro Zapier

En este paso le decimos a Zapier que verifique la conexión con el envío de datos desde el formulario.

Si todo está bien, Zapier deberá mostrar una pantalla como esta donde está recibiendo el “Hook A” .

En la siguiente pantalla, empezaremos a configurar la siguiente aplicación del ZAP, le damos click al botón “Continuar”.

Debemos conectar nuestra cuenta de Gmail con Zapier, al dar click en “Connec Account” Zapier va a solicitar la cuenta de Gmail y la contraseña para conectarse.

Como sabemos, los usuarios de los email de Gmail tiene la opción de usar las aplicaciones de G-Suit.

Damos click en el botón “Test” y Zapier nos indicará con un botón de color verde que la conexión con la cuenta de Gmail fue exitosa y damos click en “Continuar”.

En este paso, debemos buscar la Google Sheet que vamos a utilizar para almacenar los datos recibidos por el formulario.

Como también la hoja del libro, lo que nos desplegará la lista de los campos encontrados por Zapier en la hoja seleccionada.

Los campos encontrados, al final del campo tienen un símbolo “+” que nos permitirá relacionar el campo de la Google Sheets, con el campo del formulario de Elementor.

Así se verá los campos de la Google Sheets y los campos del formulario de Elementor ya relacionados en Zapier y damos click en “Continuar”.

Zapier nos va a mostrar los valores que va a recibir la Google Sheets, provenientes de la prueba de envío que se realizó desde el formulario de Elementor, y damos clic en “Send Test To Google Sheets”

Así recibirá los datos la Google Sheet.

Vemos que la Google Shteet recibe los datos enviados por Zapier y damos click en “Finish”.

Se activa el Zapier para que desde este momento se sigan recibiendo datos del formulario web a nuestra Google Sheets

No Comment.