Cómo enviar datos de formulario de Elementor a Google Sheets

Los formularios web son una herramienta muy poderosa para interactuar con los usuarios, por ejemplo, pueden suscribirse al boletín de su empresa ingresando su dirección de correo electrónico y cualquier otro dato que desee recopilar. O tal vez usted es una empresa de comercio electrónico que desea incluir un formulario de pedido de ventas en su sitio web para comodidad de sus clientes. Otro tipo de formulario que puede ser útil para su negocio es incluir un formulario de comentarios de los clientes para que pueda obtener un mejor conocimiento de lo que funciona y lo que no funciona en su negocio.

Elementor Pro viene con muchos widgets nativos, uno de los widgets para crear un formulario fácilmente en su sitio web es el widget de formulario. Con el widget Formulario, puede crear una amplia gama de tipos de formularios en su sitio web de WordPress. Para obtener más información sobre el widget, puede consultar nuestro artículo anterior sobre Elementor Form Builder.

Si bien Elementor tiene una función integrada para administrar los envíos de formularios (datos), es posible que desee enviar los datos a Hojas de cálculo de Google para organizar y categorizar los datos en un formato lógico.

En este artículo, le mostraremos cómo obtener datos de Elementor Form en Google Sheet, que es un editor de hojas de cálculo en la nube que facilita el acceso y el uso de los usuarios.

Iniciar una nueva hoja de cálculo en Hojas de cálculo de Google

Puede acceder a las hojas de Google desde sheets.google.com usando una cuenta gratuita de Google (para uso personal) o una cuenta de Google Workspace (para uso comercial). Cree una nueva hoja de cálculo en blanco para comenzar.

Abra el editor de secuencias de comandos de aplicaciones

Anteriormente colocado en el menú Herramientas por el nombre de editor de secuencias de comandos, hoy en día se llama Apps Script en el menú Extensión .

Obtenga los códigos para habilitar la transferencia de datos

Para poder transferir los datos del formulario Elementor a Hojas de cálculo de Google, primero debe conectarlos con el siguiente código.

 // Cambiar a verdadero para habilitar las notificaciones por correo electrónico
var notificación de correo electrónico = falso;
var emailAddress = "Change_to_your_Email";

// NO EDITAR ESTOS PRÓXIMOS PARÁMETROS
var esHojaNueva = false;
var datos recibidos = [];
/**
 * esta es una función que se activa cuando la aplicación web recibe una solicitud GET
 * No se usa pero se requiere.
 */
función doGet( e ) {
	return HtmlService.createHtmlOutput("Sí, esta es la URL del webhook, solicitud recibida");
}
// Receptor de webhook: se activa con un webhook de formulario para enviar la URL de la aplicación.
función doPost( e ) {
	var params = JSON.stringify(e.parameter);
	parámetros = JSON.parse(parámetros);
	insertToSheet(parámetros);
	// Respuesta HTTP
	return HtmlService.createHtmlOutput("solicitud posterior recibida");
}
// Aplana un objeto anidado para facilitar su uso con una hoja de cálculo
function aplanarObjeto( ob ) {
	var a Retorno = {};
	para ( var i en ob ) {
		if ( ! ob.hasOwnProperty( i ) ) continuar;
		if ( ( tipo de ob[ i ] ) == 'objeto' ) {
			var flatObject = flattenObject(ob[i]);
			para (var x en objeto plano) {
				if ( ! flatObject.hasOwnProperty( x ) ) continuar;
				paraRegresar[ i + '.' + x ] = objetoplano[ x ];
			}
		} demás {
			paraRegresar[ i ] = ob[ i ];
		}
	}
	volver aRegresar;
}
// normalizar encabezados
función getHeaders(formSheet, claves) {
	var encabezados = [];
  
	// recuperar encabezados existentes
    if ( ! esNuevaHoja ) {
	  encabezados = formSheet.getRange( 1, 1, 1, formSheet.getLastColumn() ).getValues()[0];
    }
	// agregar encabezados adicionales
	var encabezados nuevos = [];
	nuevosEncabezados = teclas.filtro( función( k ) {
		devolver encabezados.indexOf ( k ) > -1 ? falso : k;
	});
	newHeaders.forEach( function( h ) {
		encabezados.push( h );
	});
	encabezados de retorno;
}
// normalizar valores
función getValues ​​(encabezados, plano) {
	var valores = [];
	// empujar valores basados ​​en encabezados
	encabezados.forEach( función( h ){
		valores.push( plano[ h ] );
	});
	valores de retorno;
}
// Insertar encabezados
función setHeaders (hoja, valores) {
	var headerRow = hoja.getRange( 1, 1, 1, valores.longitud )
	headerRow.setValues([valores]);
	headerRow.setFontWeight( "negrita").setHorizontalAlignment( "centro" );
}
// Insertar datos en la hoja
función setValues( hoja, valores ) {
	var lastRow = Math.max( hoja.getLastRow(),1 );
	hoja.insertarFilaDespués(últimaFila);
	sheet.getRange( lastRow + 1, 1, 1, valores.longitud ).setValues( [ valores ] ).setFontWeight( "normal" ).setHorizontalAlignment( "center" );
}
// Encuentra o crea una hoja para el formulario
función getFormSheet (formName) {
	var formularioHoja;
	var activeSheet = SpreadsheetApp.getActiveSpreadsheet();
	// crea una hoja si es necesario
	if (hojaactiva.getSheetByName(formName) == null) {
      formSheet = activeSheet.insertSheet();
      hojaformulario.setName(formularioNombre);
      esNuevaHoja = true;
	}
	return activeSheet.getSheetByName( formName );
}

// función mágica donde todo sucede
función insertToSheet (datos) {
	var flat = flattenObject(datos);
	var claves = Object.keys( plano );
	var formName = data["form_name"];
	var formSheet = getFormSheet( formName );
	var encabezados = getHeaders(formSheet, claves);
	var valores = getValues(cabeceras, plano);
	setHeaders(formSheet, encabezados);
	setValues( hojaformulario, valores );
	
    si (notificación de correo electrónico) {
		enviarNotificación(datos, getSeetURL());
	}
}
función getSeetURL() {
  var hoja de cálculo = SpreadsheetApp.getActiveSpreadsheet();
  var hoja = hoja de cálculo.getActiveSheet();
  volver hoja de cálculo.getUrl();
}
function enviarNotificación(datos, url) {
	var subject = "Se ha insertado un nuevo envío de Elementor Pro Froms en su hoja";
  var message = "Se ha recibido un nuevo envío a través del formulario " + data['form_name'] + " y se ha insertado en su hoja de Google en: " + url;
	MailApp.sendEmail(dirección de correo electrónico, asunto, mensaje, {
		nombre: 'Guión de correo electrónico automático'
	});
}

Crédito por el código a bainternet.

Borrar todo el código y pegar el código

Después de obtener el código, péguelo en el editor de Apps Script, primero borre todo el código existente para que funcione.

Cambiar el nombre del proyecto y guardar los cambios

Una vez que el código esté listo, puede cambiar el nombre del título del script y luego hacer clic en el botón Guardar .

Implementar el script y copiar la URL de la aplicación web

Después de guardar el cambio, implementemos el script haciendo clic en el botón Implementar y seleccionando Nueva implementación de las opciones.

En la ventana que aparece, haga clic en el icono de engranaje y elija la opción Aplicación web .

En el formulario que acaba de aparecer, cambie el acceso a Cualquiera y haga clic en el botón Implementar .

Si de alguna manera la implementación de la secuencia de comandos solicita permiso para acceder a su hoja de cálculo, autorice su acceso para que la secuencia de comandos pueda escribir los datos en su hoja de cálculo.

Después de que la implementación de la secuencia de comandos sea exitosa, copie la URL de la aplicación web .

Pegue la URL de la aplicación web en la configuración de webhook de formulario de Elementor

En el editor de Elementor, haga clic en el formulario que desea conectar con la hoja de Google, se abrirá la configuración del formulario en el panel izquierdo del editor, luego desplácese hacia abajo y haga clic en el bloque Acción después de enviar - Agregar acción de Webhook - luego abre una nueva Bloque de webhook a continuación, al hacer clic en él, obtendrá un campo de URL para colocar el enlace de la aplicación web copiado.

Bien, eso es todo, puede probar el formulario completando el campo de texto y haciendo clic en el botón enviar.

Probamos el formulario que creamos al completar el formulario y hacer clic en el botón Enviar 3 veces.

En la hoja de Google, el código creará una nueva hoja con el nombre del formulario en Elementor. Nombramos el formulario como hoja de google , y el nuevo nombre de la hoja es el mismo.

En la hoja recién creada, los datos que enviamos desde el formulario de Elementor están todos allí, sin perder ningún dato.

En resumen

Los formularios web son una herramienta útil para rastrear cierta información de los visitantes de su sitio web. Y son probablemente uno de los elementos más importantes de su sitio web cuando se trata de lograr sus objetivos. Al conectar el formulario a nuestra hoja de Google, podemos organizar y clasificar los datos en un formato lógico. Una vez que estos datos se ingresan en la hoja de cálculo, podemos usarlos para ayudar a organizar y hacer crecer nuestro negocio.