Como enviar dados do formulário Elementor para o Planilhas Google

Os formulários da Web são uma ferramenta muito poderosa para interagir com os usuários, por exemplo, eles podem assinar o boletim informativo da sua empresa digitando seu endereço de e-mail e quaisquer outros dados que você deseja coletar. Ou talvez você seja uma empresa de comércio eletrônico que deseja incluir um formulário de pedido de venda em seu site para conveniência de seus clientes. Outro tipo de formulário que pode ser útil para o seu negócio é incluir um formulário de feedback do cliente para que você possa conhecer melhor o que está funcionando e o que não está no seu negócio.

O Elementor Pro vem com muitos widgets nativos, um dos widgets para criar um formulário facilmente em seu site é o widget de formulário. Com o widget de formulário, você pode criar uma ampla variedade de formulários em seu site WordPress. Para obter mais informações sobre o widget, consulte nosso artigo anterior sobre o Elementor Form Builder.

Embora o Elementor tenha um recurso integrado para gerenciar envios de formulários (dados), convém enviar os dados para o Planilhas Google para organizar e categorizar dados em um formato lógico.

Neste artigo, mostraremos como obter dados do Elementor Form no Google Sheet, que é um editor de planilhas na nuvem que facilita o acesso e o uso dos usuários.

Iniciar uma nova planilha no Planilhas Google

Você pode acessar as planilhas do Google em Sheets.google.com usando uma conta gratuita do Google (para uso pessoal) ou uma conta do Google Workspace (para uso comercial). Crie uma nova planilha em branco para começar.

Abra o Editor de scripts de aplicativos

Anteriormente colocado no menu Ferramentas pelo nome editor de scripts, hoje é chamado de Apps Script no menu Extensão .

Obtenha os códigos para habilitar a transferência de dados

Para poder transferir os dados do formulário Elementor para o Planilhas Google, você precisa conectá-los primeiro usando o código a seguir.

 // Mude para true para habilitar notificações por e-mail
var emailNotificação = false;
var emailAddress = "Alterar_para_seu_Email";

// NÃO EDITE ESTES PRÓXIMOS PARAM.
var isNewSheet = false;
var dados recebidos = [];
/**
 * esta é uma função que é acionada quando o webapp recebe uma solicitação GET
 * Não usado, mas necessário.
 */
function doGet(e){
	return HtmlService.createHtmlOutput( "Sim, esta é a URL do webhook, solicitação recebida" );
}
// Webhook Receiver - acionado com webhook de formulário para URL do aplicativo publicado.
function doPost(e){
	var params = JSON.stringify(e.parameter);
	params = JSON.parse(params);
	insertToSheet(param);
	//Resposta HTTP
	return HtmlService.createHtmlOutput( "post request recebido" );
}
// Achata um objeto aninhado para facilitar o uso com uma planilha
function flattenObject(ob) {
	var paraRetornar = {};
	para (var i em ob) {
		if (! ob.hasOwnProperty(i)) continue;
		if ( ( typeof ob[ i ] ) == 'object' ) {
			var flatObject = flattenObject( ob[ i ] );
			for (var x em flatObject) {
				if ( ! flatObject.hasOwnProperty( x ) ) continue;
				toReturn[i + '.' + x ] = flatObject[ x ];
			}
		} senão {
			toReturn[i] = ob[i];
		}
	}
	voltar paraRetornar;
}
// normaliza os cabeçalhos
function getHeaders(formSheet, keys) {
	var cabeçalhos = [];
  
	// recupera os cabeçalhos existentes
    if (! isNewSheet) {
	  cabeçalhos = formSheet.getRange( 1, 1, 1, formSheet.getLastColumn() ).getValues()[0];
    }
	// adiciona qualquer cabeçalho adicional
	var newHeaders = [];
	newHeaders = keys.filter( function( k ) {
		return headers.indexOf( k ) > -1 ? falso : k;
	});
	newHeaders.forEach( function(h){
		cabeçalhos.push( h );
	});
	cabeçalhos de retorno;
}
// normaliza os valores
function getValues( headers, flat ) {
	valores var = [];
	// empurra valores baseados em cabeçalhos
	headers.forEach( function(h){
		valores.push( flat[ h ] );
	});
	valores de retorno;
}
//Inserir cabeçalhos
function setHeaders( folha, valores ) {
	var headerRow = sheet.getRange( 1, 1, 1, values.length )
	headerRow.setValues( [ valores ] );
	headerRow.setFontWeight( "negrito" ).setHorizontalAlignment( "centro" );
}
//Inserir dados na planilha
function setValues( folha, valores ) {
	var lastRow = Math.max( sheet.getLastRow(),1 );
	sheet.insertRowAfter( lastRow );
	sheet.getRange( lastRow + 1, 1, 1, values.length ).setValues( [ valores ] ).setFontWeight( "normal" ).setHorizontalAlignment( "center" );
}
// Localiza ou cria planilha para formulário
function getFormSheet(formName) {
	var formulárioFolha;
	var activeSheet = SpreadsheetApp.getActiveSpreadsheet();
	// cria a planilha se necessário
	if ( activeSheet.getSheetByName( formName ) == null ) {
      formSheet = activeSheet.insertSheet();
      formSheet.setName(formName);
      isNewSheet = true;
	}
	return activeSheet.getSheetByName( formName );
}

// função mágica onde tudo acontece
function insertToSheet(dados){
	var flat = flattenObject(dados);
	var keys = Object.keys( flat );
	var formName = data["form_name"];
	var formSheet = getFormSheet( formName );
	var headers = getHeaders( formSheet, keys );
	var valores = getValues( headers, flat );
	setHeaders(formSheet, headers);
	setValues(formSheet, valores);
	
    if ( emailNotificação ) {
		sendNotification(dados, getSeetURL());
	}
}
function getSeetURL() {
  var planilha = SpreadsheetApp.getActiveSpreadsheet();
  var folha = planilha.getActiveSheet();
  return planilha.getUrl();
}
function sendNotification(dados, url) {
	var subject = "Uma nova submissão do Elementor Pro Froms foi inserida em sua planilha";
  var message = "Um novo envio foi recebido através do formulário " + data['form_name'] + " e inserido em sua planilha do Google em: " + url;
	MailApp.sendEmail( emailAddress, assunto, mensagem, {
		nome: 'Script de e-mail automático'
	});
}

Crédito do código para bainternet.

Limpar todo o código e colar o código

Depois de obter o código, cole-o no editor do Apps Script, limpe primeiro todo o código existente para que funcione.

Renomeie o projeto e salve as alterações

Quando o código estiver pronto, você pode renomear o título do script e clicar no botão Salvar .

Implantar o script e copiar a URL do aplicativo Web

Depois que a alteração for salva, vamos implantar o script clicando no botão Implantar e selecionando Nova implantação nas opções.

Na janela que aparece, clique no ícone de engrenagem e escolha a opção de aplicativo Web .

No formulário recém-apresentado, altere o acesso para Qualquer pessoa e clique no botão Implantar .

Se de alguma forma a implantação do script está pedindo permissão para acessar sua planilha, por favor Autorize seu acesso para que o script consiga gravar os dados em sua planilha.

Depois que a implantação do script for bem-sucedida, copie a URL do aplicativo Web .

Cole a URL do aplicativo Web na configuração do Webhook do Elementor Form

No editor Elementor, clique no formulário que você deseja conectar com a planilha do Google, ele abrirá a configuração do formulário no painel esquerdo do editor, role para baixo e clique no bloco Action After Submit - Add Webhook action - ele abre um novo Bloco de webhook abaixo, clicar nele fornecerá um campo de URL para colocar o link do aplicativo da web copiado.

Pronto, é isso, você pode testar o formulário preenchendo o campo de texto e clicando no botão enviar.

Testamos o formulário que criamos preenchendo o formulário e clicando no botão enviar 3 vezes.

Na planilha do Google, o código criará uma nova planilha com o nome do formulário no Elementor. Nomeamos o formulário como google sheet e o novo nome da planilha é o mesmo.

Na planilha recém-criada, os dados que enviamos do formulário Elementor estão todos lá, sem perder nenhum dado.

Resumindo

Os formulários da Web são uma ferramenta útil para rastrear determinadas informações dos visitantes do seu site. E eles são provavelmente um dos elementos mais importantes do seu site quando se trata de alcançar seus objetivos. Ao conectar o formulário à nossa planilha do Google, podemos organizar e categorizar os dados em um formato lógico. Depois que esses dados são inseridos na planilha, podemos usá-los para ajudar a organizar e expandir nossos negócios.