Comment envoyer des données de formulaire Elementor à Google Sheets

Les formulaires Web sont un outil très puissant pour interagir avec les utilisateurs, par exemple, ils peuvent s'abonner à la newsletter de votre entreprise en saisissant leur adresse e-mail et toute autre donnée que vous souhaitez collecter. Ou peut-être êtes-vous une entreprise de commerce électronique qui souhaite inclure un formulaire de commande sur votre site Web pour la commodité de vos clients. Un autre type de formulaire qui peut être utile à votre entreprise consiste à inclure un formulaire de commentaires des clients afin que vous puissiez acquérir une meilleure connaissance de ce qui fonctionne et de ce qui ne fonctionne pas dans votre entreprise.

Elementor Pro est livré avec de nombreux widgets natifs, l'un des widgets permettant de créer facilement un formulaire sur votre site Web est le widget Formulaire. Avec le widget Formulaire, vous pouvez créer un large éventail de types de formulaires sur votre site Web WordPress. Pour plus d'informations sur le widget, vous pouvez consulter notre article précédent sur Elementor Form Builder.

Bien qu'Elementor dispose d'une fonctionnalité intégrée pour gérer les soumissions de formulaires (données), vous pouvez envoyer les données à Google Sheets pour organiser et classer les données dans un format logique.

Dans cet article, nous allons vous montrer comment obtenir des données d'Elementor Form dans Google Sheet, un éditeur de feuille de calcul cloud qui facilite l'accès et l'utilisation pour les utilisateurs.

Démarrer une nouvelle feuille de calcul dans Google Sheets

Vous pouvez accéder à Google Sheets à partir de sheets.google.com à l'aide d'un compte Google gratuit (pour un usage personnel) ou d'un compte Google Workspace (pour un usage professionnel). Créez une nouvelle feuille de calcul vierge pour commencer.

Ouvrez l'éditeur de scripts d'applications

Auparavant placé sous le menu Outils par le nom de l'éditeur de script, il s'appelait désormais Apps Script sous le menu Extension .

Obtenez les codes pour activer le transfert de données

Pour pouvoir transférer les données du formulaire Elementor vers Google Sheets, vous devez d'abord les connecter à l'aide du code suivant.

 // Passez à true pour activer les notifications par e-mail
var emailNotification = faux ;
var emailAddress = "Change_to_your_Email" ;

// NE MODIFIEZ PAS CES PARAMÈTRES SUIVANTS
var estNouvelleFeuille = faux ;
var recivedData = [] ;
/**
 * il s'agit d'une fonction qui se déclenche lorsque la webapp reçoit une requête GET
 * Non utilisé mais obligatoire.
 */
fonction doGet( e ) {
	return HtmlService.createHtmlOutput( "Yepp c'est l'URL du webhook, demande reçue" );
}
// Webhook Receiver - déclenché avec le webhook du formulaire vers l'URL de l'application publiée.
fonction doPost( e ) {
	var params = JSON.stringify(e.parameter);
	params = JSON.parse(params);
	insertToSheet(params);
	// Réponse HTTP
	return HtmlService.createHtmlOutput( "demande de publication reçue" );
}
// Aplatit un objet imbriqué pour une utilisation plus facile avec une feuille de calcul
fonction aplatirObjet( ob ) {
	var àRetour = {} ;
	pour ( var je dans ob ) {
		si (! ob.hasOwnProperty(i)) continuer ;
		if ( ( typeof ob[ je ] ) == 'objet' ) {
			var flatObject = flattenObject( ob[ i ] );
			for ( var x dans flatObject ) {
				if ( ! flatObject.hasOwnProperty( x ) ) continue ;
				pourRetour[ i + '.' + x ] = objetplat[ x ] ;
			}
		} autre {
			toReturn[ je ] = ob[ je ] ;
		}
	}
	retour àRetour ;
}
// normalise les en-têtes
function getHeaders( formSheet, keys ) {
	var en-têtes = [] ;
  
	// récupère les en-têtes existants
    si ( ! estNouvelleFeuille ) {
	  en-têtes = formSheet.getRange( 1, 1, 1, formSheet.getLastColumn() ).getValues()[0] ;
    }
	// ajouter des en-têtes supplémentaires
	var nouveauxEntêtes = [] ;
	newHeaders = keys.filter( function( k ) {
		retourner en-têtes.indexOf( k ) > -1 ? faux : k;
	} );
	newHeaders.forEach( fonction( h ) {
		en-têtes.push( h );
	} );
	en-têtes de retour ;
}
// normalise les valeurs
fonction getValues ​​(en-têtes, plat) {
	var valeurs = [] ;
	// pousse les valeurs basées sur les en-têtes
	headers.forEach( fonction( h ){
		valeurs.push( flat[ h ] );
	});
	valeurs de retour ;
}
// Insérer les en-têtes
function setHeaders( feuille, valeurs ) {
	var headerRow = feuille.getRange( 1, 1, 1, values.length )
	headerRow.setValues( [ valeurs ] );
	headerRow.setFontWeight( "bold" ).setHorizontalAlignment( "center" );
}
// Insérer des données dans la feuille
fonction setValues( feuille, valeurs ) {
	var lastRow = Math.max( feuille.getLastRow(),1 );
	feuille.insertRowAfter( lastRow );
	feuille.getRange( lastRow + 1, 1, 1, values.length ).setValues( [ valeurs ] ).setFontWeight( "normal" ).setHorizontalAlignment( "center" );
}
// Recherche ou création d'une feuille pour le formulaire
function getFormSheet( formName ) {
	var formSheet;
	var feuilleactive = SpreadsheetApp.getActiveSpreadsheet();
	// crée une feuille si nécessaire
	if ( activeSheet.getSheetByName( formName ) == null ) {
      formSheet = activeSheet.insertSheet();
      formSheet.setName( formName );
      estNouvelleFeuille = vrai ;
	}
	return activeSheet.getSheetByName( formName );
}

// fonction magique où tout se passe
function insertToSheet( data ){
	var flat = flattenObject( data );
	var keys = Object.keys( flat );
	var formName = data["form_name"] ;
	var formSheet = getFormSheet( formName );
	var headers = getHeaders( formSheet, keys );
	var valeurs = getValues( en-têtes, plat );
	setHeaders( formSheet, en-têtes );
	setValues( formSheet, values ​​);
	
    si ( e-mailNotification ) {
		sendNotification( données, getSeetURL() );
	}
}
fonction getSeetURL() {
  var feuille de calcul = SpreadsheetApp.getActiveSpreadsheet();
  var feuille = tableur.getActiveSheet();
  return tableur.getUrl();
}
function envoyerNotification( données, url ) {
	var subject = "Une nouvelle sous-mition Elementor Pro Froms a été insérée dans votre feuille" ;
  var message = "Une nouvelle soumission a été reçue via le formulaire " + data['form_name'] + " et insérée dans votre feuille Google à : " + url;
	MailApp.sendEmail ( adresse e-mail, objet, message, {
		nom : 'Script d'envoi automatique d'e-mail'
	} );
}

Crédit pour le code bainternet.

Effacer tout le code et coller le code

Après avoir obtenu le code, collez-le dans l'éditeur Apps Script, effacez d'abord tout le code existant pour le faire fonctionner.

Renommez le projet et enregistrez les modifications

Une fois le code prêt, vous pouvez renommer le titre du script, puis cliquer sur le bouton Enregistrer .

Déployer le script et copier l'URL de l'application Web

Une fois la modification enregistrée, déployons le script en cliquant sur le bouton Déployer et en sélectionnant Nouveau déploiement dans les options.

Dans la fenêtre qui apparaît, cliquez sur l'icône d'engrenage , puis choisissez l'option d'application Web .

Sur le nouveau formulaire qui apparaît, modifiez l'accès à Tout le monde et cliquez sur le bouton Déployer .

Si, d'une manière ou d'une autre, le déploiement du script demande l'autorisation d'accéder à votre feuille de calcul, veuillez autoriser son accès pour que le script puisse écrire les données sur votre feuille de calcul.

Une fois le déploiement du script réussi, copiez l'URL de l' application Web .

Collez l'URL de l'application Web dans le paramètre Webhook du formulaire Elementor

Sur l'éditeur Elementor, cliquez sur le formulaire que vous souhaitez connecter à la feuille Google, il ouvrira le paramètre de formulaire sur le panneau de gauche de l'éditeur, puis faites défiler vers le bas et cliquez sur le bloc Action après soumission - Ajouter une action Webhook - il ouvre alors un nouveau Le bloc Webhook ci-dessous, en cliquant dessus, vous obtiendrez un champ URL pour placer le lien de l'application Web copiée.

D'accord, c'est tout, vous pouvez tester le formulaire en remplissant le champ de texte et en cliquant sur le bouton envoyer.

Nous avons testé le formulaire que nous avons créé en remplissant le formulaire et en cliquant 3 fois sur le bouton d'envoi.

Sur la feuille Google, le code créera une nouvelle feuille sous le nom du formulaire sur Elementor. Nous avons nommé le formulaire google sheet et le nouveau nom de la feuille est le même.

Sur la feuille nouvellement créée, les données que nous envoyons à partir du formulaire Elementor sont toutes là, sans aucune donnée manquante.

Résumer

Les formulaires Web sont un outil utile pour suivre certaines informations des visiteurs de votre site Web. Et ils sont probablement l'un des éléments les plus importants de votre site Web lorsqu'il s'agit d'atteindre vos objectifs. En connectant le formulaire à notre feuille Google, nous pouvons organiser et classer les données dans un format logique. Une fois ces données saisies dans la feuille de calcul, nous pouvons les utiliser pour organiser et développer notre entreprise.