איך לשלוח נתונים מטפסי אלמנטור ל-Google Sheets?

במדריך זה נלמד כיצד לחבר טופס של אלמנטור פרו לגליון Googe Sheets, כך שכאשר משתמש באתר יזין את הפרטים שלו הם יכנסו אוטומטית כשורה חדשה בטבלה.

שיתוף ב facebook
שיתוף ב linkedin
שיתוף ב whatsapp
שיתוף ב email

אין כמעט אתר שאינו מכיל טפסים. טפסים משתמשים אותנו למגוון צרכים – איסוף לידים, הרשמה לרשימת תפוצה, תמיכה טכנית, יצירת קשר, הרשמה לאירועים, ועוד. שליחת אימייל היא הדבר הבסיסי והמובן מאליו שכל טופס מבצע, אך מה אם נרצה שפעולות נוספות יקרו בעת שליחת הטופס?

בעבר כתבתי על חיבור טופס אלמנטור למערכת הדיוור הפופולרית Smoove, ובמאמר הזה אסקור, לראשונה בעברית, אפשרות נוחה לחיבור טופסי אלמנטור לגיליון שניצור ב Google Sheets (נוחה יחסית. תידרשו לבצע "העתק-הדבק" לקוד). לאלמנטור פרו יש וידג'ט טופס, אשר בשנים האחרונות תופס בהדרגה מקום מרכזי מאוד באתרי אינטרנט. הטופס של אלמנטור גמיש, נוח לעיצוב ומגיע "מהקופסה" עם שלל אפשרויות חזקות מאוד להתממשקות.

עם זאת, טפסי אלמנטור לא כוללים התממשקות מובנית ל Google Sheets, למרות שבעצם זה די הגיוני שנרצה לאסוף יחד פניות רבות ולא רק לטפל בהן באימייל שלנו. השימוש ב-Google Sheets מאפשר לנו לנתח, לטפל ולסנן פניות רבות בקלות, כאשר כל אחת מהן היא שורה בטבלה. יתרון נוסף הוא שמירה של נתוני הטופס גם במקרה בו הטופס לא נשלח אל כתובת המייל הרצוייה עקב תקלה.

פעמים רבות מטופל הצורך הנפוץ הזה באמצעות שירות התממשקויות כגון Zapier או Integromat, אך במאמר זה אני מעוניין להציע דרך שאינה כרוכה בשירות צד שלישי לצורך החיבור הזה, וניתן לעשות אותה בקלות יחסית דרך הממשקים של טפסי אלמנטור פרו ושל Google Sheets. ההתממשקות בהדרכה זו מתבצעת באמצעות קוד שכתב והעלה לגיטהאב שלו אוהד רז, מתכנת מהצוות של אלמנטור ואחד האנשים המוכשרים שפגשתי.

מהם היתרונות בחיבור ללא הסתמכות על גורם שלישי?

  1. אין עלויות. זה לגמרי חינם ואין מגבלה על כמות השליחות היומית או החודשית.
  2. פחות גורמים מעורבים – פחות סיכוי לתקלות ושיבושים, אי זמינות של שירות וכו'.

יוצאים לדרך

  1. יוצרים גיליון חדש ב Google Sheets.
    new google sheets spreadsheet
  2. יוצרים בגיליון Web App שיאפשר את משיכת הנתונים מהטפסים באתר:
    1. בתפריט של הגיליון לוחצים על Tools > Script editor.
      sheets script editor
    2. נפתח לנו חלון חדש ובו אזור עריכת קוד עם פונקציה ריקה. נמחק את הפונקציה הקיימת ונדביק את הקוד הבא:
      
      /**
       * Google app-script to utilise Elementor Pro Froms webhook
       * For Usage see: https://github.com/pojome/elementor/issues/5894
       */
      
      /*
      In order to enable this script, follow these steps:
       * From your Google Sheet, from the Tools menu select Script Editor…
       * Paste the script from this gist into the script code editor and hit Save.
       * From the Publish menu, select Deploy as web app…
       * Choose to execute the app as yourself, and allow Anyone, even anonymous to execute the script. (Note, depending on your Google Apps instance, this option may not be available. You will need to contact your Google Apps administrator, or else use a Gmail account.) Now click Deploy. You may be asked to review permissions now.
       * The URL that you get will be the webhook that you can use in your elementor form, You can test this webhook in your browser first by pasting it. It will say "Yepp this is the webhook URL, request received".
       */
      
      // Change to true to enable email notifications
      var emailNotification = false;
      var emailAddress = "Change_to_your_Email";
      
      
      
      // DO NOT EDIT THESE NEXT PARAMS
      var isNewSheet = false;
      var recivedData = [];
      
      /**
       * this is a function that fires when the webapp receives a GET request
       * Not used but required.
       */
      function doGet( e ) {
      	return HtmlService.createHtmlOutput( "Yepp this is the webhook URL, request received" );
      }
      
      // Webhook Receiver - triggered with form webhook to pusblished App URL.
      function doPost( e ) {
      	var params = JSON.stringify(e.parameter);
      	params = JSON.parse(params);
      	insertToSheet(params);
      
      	// HTTP Response
      	return HtmlService.createHtmlOutput( "post request received" );
      }
      
      // Flattens a nested object for easier use with a spreadsheet
      function flattenObject( ob ) {
      	var toReturn = {};
      	for ( var i in ob ) {
      		if ( ! ob.hasOwnProperty( i ) ) continue;
      		if ( ( typeof ob[ i ] ) == 'object' ) {
      			var flatObject = flattenObject( ob[ i ] );
      			for ( var x in flatObject ) {
      				if ( ! flatObject.hasOwnProperty( x ) ) continue;
      				toReturn[ i + '.' + x ] = flatObject[ x ];
      			}
      		} else {
      			toReturn[ i ] = ob[ i ];
      		}
      	}
      	return toReturn;
      }
      
      // normalize headers
      function getHeaders( formSheet, keys ) {
      	var headers = [];
        
      	// retrieve existing headers
          if ( ! isNewSheet ) {
      	  headers = formSheet.getRange( 1, 1, 1, formSheet.getLastColumn() ).getValues()[0];
          }
      
      	// add any additional headers
      	var newHeaders = [];
      	newHeaders = keys.filter( function( k ) {
      		return headers.indexOf( k ) > -1 ? false : k;
      	} );
      
      	newHeaders.forEach( function( h ) {
      		headers.push( h );
      	} );
      	return headers;
      }
      
      // normalize values
      function getValues( headers, flat ) {
      	var values = [];
      	// push values based on headers
      	headers.forEach( function( h ){
      		values.push( flat[ h ] );
      	});
      	return values;
      }
      
      // Insert headers
      function setHeaders( sheet, values ) {
      	var headerRow = sheet.getRange( 1, 1, 1, values.length )
      	headerRow.setValues( [ values ] );
      	headerRow.setFontWeight( "bold" ).setHorizontalAlignment( "center" );
      }
      
      // Insert Data into Sheet
      function setValues( sheet, values ) {
      	var lastRow = Math.max( sheet.getLastRow(),1 );
      	sheet.insertRowAfter( lastRow );
      	sheet.getRange( lastRow + 1, 1, 1, values.length ).setValues( [ values ] ).setFontWeight( "normal" ).setHorizontalAlignment( "center" );
      }
      
      // Find or create sheet for form
      function getFormSheet( formName ) {
      	var formSheet;
      	var activeSheet = SpreadsheetApp.getActiveSpreadsheet();
      
      	// create sheet if needed
      	if ( activeSheet.getSheetByName( formName ) == null ) {
            formSheet = activeSheet.insertSheet();
            formSheet.setName( formName );
            isNewSheet = true;
      	}
      	return activeSheet.getSheetByName( formName );
      }
      
      
      // magic function where it all happens
      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 values = getValues( headers, flat );
      	setHeaders( formSheet, headers );
      	setValues( formSheet, values );
      	
          if ( emailNotification ) {
      		sendNotification( data, getSeetURL() );
      	}
      }
      
      function getSeetURL() {
        var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
        var sheet = spreadsheet.getActiveSheet();
        return spreadsheet.getUrl();
      }
      
      function sendNotification( data, url ) {
      	var subject = "A new Elementor Pro Froms subbmition has been inserted to your sheet";
        var message = "A new subbmition has been recived via " + data['form_name'] + " form and inserted into your Google sheet at: " + url;
      	MailApp.sendEmail( emailAddress, subject, message, {
      		name: 'Automatic Emailer Script'
      	} );
      }
      
    3. אם נרצה לקבל דיווח על כל שורה שנוספה לגיליון שלנו (בלי קשר לאימייל שנוכל להגדיר שישלח דרך הטופס באלמנטור) נערוך את שורה 18 – נחליף את false ב- true. נערוך את שורה 19 – נחליף את Change_to_your_Email בכתובת האימייל הרלוונטית. מלבד זה אין מה לערוך את הקוד.
    4. כעת נפרסם את האפליקצייה שלנו: נבחר בתפריט הראשי  Publish > Deploy as web app…
      deploy as web app
    5. נבחר שם שיעזור לנו להבין את תפקיד הקוד: "Add new entries from Elementor forms" או כל שם אחר שיעזור לכם לזכור מה הקוד בא לבצע.
      Edit project name
    6. את האפשרות Who has access to the app נגדיר כ Anyone, even anonymous. ונלחץ על Deploy.
      Deploy as web app dialog
    7. כעת נועבר לביצוע אימות מול חשבון הגוגל האישי שלנו או (אם נבחר) מול מערכת ניהול האפליקציות שלנו ב-Google.connect google account & your app
    8. תופיע התראת אבטחה כיוון שזו אינה אפליקציה שגוגל מכיר (כמובן, הרי הרגע יצרנו אותה). לא לוחצים על הכפתור הכחול הבולט, אלא בוחרים במתקדם ומאשרים.
    9. זהו! סיימנו את השלב הזה וקיבלנו קישור. נעתיק אותו כדי להשתמש בו בשלב הבא.
  3. כעת נבדוק את הקישור שלנו: נדביק אותו בחלון חדש בדפדפן ונלחץ על Enter. אם הכל בוצע כמו שצריך תופיע לנו הודעה Yepp this is the webhook URL, request received.
  4. נחבר לטופס את האפליקצייה שיצרנו ב Google Sheets:
    נפתח את האתר וניצור טופס אלמנטור חדש / נערוך טופס אלמנטור קיים:

    1. נבחר לו שם שמסביר את מטרת הטופס (Contact form / Subscribe to newsletter / Leads form / Submit feedback form…):
      Elementor form name
      (אם האתר כבר פעיל והטופס מבצע פעולות נוספות, במיוחד בקוד, יש לבדוק שאף נזק לא נגרם משינוי השם)
    2. פעולות אחרי שליחה > נוסיף Webhook:
      after submission webhook
    3. אל תוך שדה ה-Webhook נזין את הקישור שיצרנו ב Google Sheets:
      form webhook adress
    4. נשמור את עמוד האלמנטור.
  5. כעת הכל צריך לעבוד:
    נפתח את הדף עם הטופס (לא במצב עריכה באלמנטור) וננסה לשלוח את הטופס. אם הכל תקין יתווסף גיליון חדש בגיליון האלקטרוני שלנו, ותופיע בו שורה אחת עם הנתונים שהוזנו בטופס.
    sheet new line
    שימו לב שהשורה נוספה בגיליון חדש שהאפליקציה שפרסמנו יצרה עבורינו, ולא בגיליון ברירת המחדל.
  6. כל גיליון מקבל את שם הטופס ששלח אותו, ולכן אם יש לכם באתר גיליונות שונים, (אשר מכילים שדות שונים ונועדו לצרכים שונים), הם צריכים להיות בעלי שמות שונים.

סיכום

במאמר זה הראיתי כיצד ניתן לשמור ב Google Sheets את כל הפניות שמגיעות מטפסי אלמנטור. ניתן להשתמש בכלי הזה במגוון דרכים ולמטרות שונות. ככל שאנחנו מיישמים יותר פתרונות ללא שימוש בשירותים חיצוניים ובתוספים אנחנו מאפשרים לאתר לעבוד בקלות ובהירות ומייתרים את הצורך בתשלומים מיותרים.
אם מצאתם שקוד זה אינו מעודכן ואינו פועל יותר אנא ספרו לי על זה.
אצלינו בסטודיו מבצעים מגוון אינטגרציות מורכבות ומפתחים אתרים משלב הרעיון ועד שהאתר מתפרסם ומביא תוצאות. נשמח לבצע עבורכם עבודות וורדפרס מתקדמות הן בתחום הפיתוח והן בתחום העיצוב. אתם מוזמנים להציץ בתיק העבודות שלנו, ואם נראה לכם שזה יכול לעבוד, נשמח להכיר אתכם.

לקריאה נוספת

דיון ב-GitHub: Forms Webhook + Google Sheet integration via App Script

וידג'ט טופס בתיעוד של אלמנטור

מאמר בבלוג של אלמנטור, המסביר על התממשקות באמצעות Zapier

תוסף Lenix Elementor Leads addon – תוסף חופשי, תוצרת הארץ, לשמירת נתונים מטפסי אלמנטור בתוך האתר וליצוא שלהם כקובצי CSV. עובד מצויין ומתאים כפיתרון משלים / חלופי לפיתרון שנסקר כאן – שליחת הפניות ל-Google Sheets.

שיתוף

שיתוף ב facebook
שיתוף ב whatsapp
שיתוף ב linkedin
שיתוף ב email

לקריאה נוספת

כיצד מוסיפים פוסט חדש לאתר וורדפרס?

הרבה עסקים מוצאים שהפעלה של בלוג באתר שלהם  תורמת רבות לפעילות העסקית. בהדרכה זו תלמדו כיצד להוסיף פוסט חדש בבלוג שבאתר ה-WordPress שלכם. מדיום: וידאו. רמה: מתחילים.

חיבור טופס אלמנטור למערכת הדיוור Smoove (בלי זאפייר!)

Viplus / Smoove היא מערכת דוברת עברית לשליחת דואר לרשימות תפוצה ושליחת מיילים שיווקיים. היא אהובה מאוד בישראל, נוחה לשימוש, ומספקת לנו אוטומציות וכלים מתקדמים מאוד.
במדריך זה, הראשון מסוגו בעברית, נלמד כיצד לחבר טופס של אלמנטור פרו לסמוב, כך שכאשר משתמש באתר יזין את הפרטים שלו הם ייכנסו אוטומטית לרשימה בסמוב.

טיפוגרפיה עברית באתרים – חלק ב'

איפה מוצאים פונטים בחינם? מאיפה ניתן לרכוש פונטים בתשלום? מהם תנאי הרישיון להטמעה של פונטים ואיך מטמיעים פונטים באתרי וורדפרס?
כל זאת ועוד במאמר שלפניכם.

נשמח לספק לחברה שלך פתרונות מקצועיים בהתאמה אישית.

אלחנן, מנהל הסטודיו, יחזור אליך בשעות הקרובות וישמח לשוחח איתך.