كيفية إرسال بيانات نموذج العنصر إلى جداول بيانات Google

تعد نماذج الويب أداة قوية جدًا للتفاعل مع المستخدمين ، على سبيل المثال ، يمكنهم الاشتراك في النشرة الإخبارية لشركتك عن طريق إدخال عنوان بريدهم الإلكتروني وأي بيانات أخرى ترغب في جمعها. أو ربما تكون شركة تجارة إلكترونية تريد تضمين نموذج طلب مبيعات على موقع الويب الخاص بك للتسهيل على عملائك. هناك نوع آخر من النماذج قد يكون مفيدًا لعملك وهو تضمين نموذج ملاحظات العملاء حتى تتمكن من اكتساب معرفة أفضل بما ينجح وما هو غير موجود في عملك.

يأتي Elementor Pro مع العديد من عناصر واجهة المستخدم الأصلية ، وإحدى الأدوات المصغّرة لإنشاء نموذج بسهولة على موقع الويب الخاص بك هي أداة النموذج. باستخدام عنصر واجهة المستخدم للنموذج ، يمكنك إنشاء مجموعة واسعة من أنواع النماذج على موقع الويب الخاص بك على WordPress. لمزيد من المعلومات حول الأداة ، يمكنك مراجعة مقالتنا السابقة حول Elementor Form Builder.

بينما يحتوي Elementor على ميزة مضمنة لإدارة عمليات إرسال النماذج (البيانات) ، فقد ترغب في إرسال البيانات إلى جداول بيانات Google لتنظيم البيانات وتصنيفها في تنسيق منطقي.

في هذه المقالة ، سنوضح لك كيفية الحصول على البيانات من Elementor Form إلى Google Sheet وهو محرر جداول بيانات سحابية يسهل الوصول إليها واستخدامها للمستخدمين.

ابدأ جدول بيانات جديدًا في جداول بيانات Google

يمكنك الوصول إلى أوراق Google من sheets.google.com باستخدام حساب Google مجاني (للاستخدام الشخصي) أو حساب Google Workspace (للاستخدام التجاري). قم بإنشاء جدول بيانات فارغ جديد للبدء.

افتح Apps Script Editor

تم وضعه سابقًا ضمن قائمة الأدوات بواسطة محرر النص البرمجي للاسم ، ويطلق عليه حاليًا Apps Script ضمن قائمة الإضافات .

احصل على الرموز لتمكين نقل البيانات

لتتمكن من نقل بيانات نموذج Elementor إلى جداول بيانات Google ، تحتاج إلى توصيلها أولاً باستخدام الكود التالي.

 // التغيير إلى صحيح لتمكين إشعارات البريد الإلكتروني
var emailNotification = false ؛
var emailAddress = "Change_to_your_Email" ؛

// لا تقم بتحرير هذه المعلمات التالية
var isNewSheet = false ،
var recivedData = [] ؛
/ **
 * هذه وظيفة يتم تنشيطها عندما يتلقى تطبيق الويب طلب GET
 * غير مستخدم ولكنه مطلوب.
 * /
وظيفة doGet (ه) {
	return HtmlService.createHtmlOutput ("نعم ، هذا هو عنوان URL للويب هوك ، تم استلام الطلب") ؛
}
// Webhook Receiver - يتم تشغيله باستخدام خطاف ويب للنموذج إلى عنوان URL للتطبيق المنشور.
وظيفة doPost (ه) {
	var params = JSON.stringify (المعلمة الإلكترونية) ؛
	params = JSON.parse (params) ؛
	insertToSheet (المعلمات) ؛
	// استجابة HTTP
	return HtmlService.createHtmlOutput ("تم استلام طلب النشر") ؛
}
// يسوي كائنًا متداخلًا لسهولة استخدامه مع جدول البيانات
دالة flattenObject (ob) {
	var toReturn = {} ،
	لـ (var i in ob) {
		إذا (! ob.hasOwnProperty (i)) تابع ؛
		إذا ((typeof ob [i]) == 'كائن') {
			var flatObject = flattenObject (ob [i]) ،
			لـ (var x in flatObject) {
				إذا (! flatObject.hasOwnProperty (x)) تابع ؛
				toReturn [i + '.' + x] = flatObject [x] ؛
			}
		} آخر {
			toReturn [i] = ob [i] ؛
		}
	}
	العودة إلى
}
// تطبيع الرؤوس
function getHeaders (formSheet، keys) {
	var headers = [] ؛
  
	// استرداد الرؤوس الموجودة
    إذا (! isNewSheet) {
	  headers = formSheet.getRange (1، 1، 1، formSheet.getLastColumn ()) .getValues ​​() [0] ؛
    }
	// إضافة أي رؤوس إضافية
	var newHeaders = [] ،
	newHeaders = keys.filter (الوظيفة (ك) {
		إرجاع headers.indexOf (k)> -1؟ خطأ: ك ؛
	}) ؛
	newHeaders.forEach (الوظيفة (ح) {
		الرؤوس. بوش (ح) ؛
	}) ؛
	رؤوس العودة
}
// تطبيع القيم
دالة getValues ​​(رؤوس ، مسطحة) {
	قيم var = [] ؛
	// دفع القيم بناءً على الرؤوس
	headers.forEach (الوظيفة (ح) {
		القيم. دفع (مسطح [ح]) ؛
	}) ؛
	قيم العودة
}
// أدخل الرؤوس
مجموعة الوظائف: رؤوس (ورقة ، قيم) {
	var headerRow = sheet.getRange (1، 1، 1، values.length)
	headerRow.setValues ​​([القيم]) ؛
	headerRow.setFontWeight ("bold") .setHorizontalAlignment ("center") ؛
}
// أدخل البيانات في الورقة
مجموعة الوظائفالقيم (الورقة ، القيم) {
	var lastRow = Math.max (sheet.getLastRow ()، 1) ،
	sheet.insertRowAfter (lastRow) ؛
	sheet.getRange (lastRow + 1، 1، 1، values.length) .setValues ​​([القيم]) .setFontWeight ("normal") .setHorizontalAlignment ("center")؛
}
// ابحث عن ورقة للنموذج أو أنشئها
دالة getFormSheet (formName) {
	var formSheet ؛
	var activeSheet = SpreadsheetApp.getActiveSpreadsheet () ،
	// إنشاء ورقة إذا لزم الأمر
	إذا (activeSheet.getSheetByName (formName) == null) {
      formSheet = activeSheet.insertSheet () ،
      formSheet.setName (formName) ،
      isNewSheet = صحيح ؛
	}
	إرجاع activeSheet.getSheetByName (formName) ؛
}

// وظيفة سحرية حيث يحدث كل شيء
وظيفة insertToSheet (البيانات) {
	var flat = flattenObject (البيانات) ؛
	var keys = Object.keys (مسطح) ؛
	var formName = البيانات ["form_name"] ؛
	var formSheet = getFormSheet (formName) ،
	var headers = getHeaders (formSheet ، keys) ؛
	قيم var = getValues ​​(رؤوس ، مسطحة) ؛
	setHeaders (ورقة النموذج ، الرؤوس) ؛
	setValues ​​(ورقة النموذج ، القيم) ؛
	
    إذا (إشعار البريد الإلكتروني) {
		sendNotification (data، getSeetURL ()) ؛
	}
}
دالة getSeetURL () {
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet () ،
  var sheet = spreadsheet.getActiveSheet () ،
  إرجاع spreadsheet.getUrl () ،
}
وظيفة sendNotification (البيانات ، url) {
	var subject = "تم إدراج فئة فرعية جديدة من Elementor Pro Froms في جدول البيانات الخاص بك" ؛
  var message = "تم استلام فئة فرعية جديدة عبر نموذج" + بيانات ['form_name'] + "وإدراجها في ورقة Google الخاصة بك على:" + url؛
	MailApp.sendEmail (عنوان البريد الإلكتروني ، الموضوع ، الرسالة ، {
		الاسم: "البرنامج النصي التلقائي لمراسل البريد الإلكتروني"
	}) ؛
}

الائتمان للرمز إلى bainternet.

امسح كل التعليمات البرمجية والصق الكود

بعد الحصول على الرمز ، قم بلصقه في محرر Apps Script ، وامسح جميع الأكواد الموجودة أولاً لجعلها تعمل.

إعادة تسمية المشروع وحفظ التغييرات

بمجرد أن يصبح الرمز جاهزًا ، يمكنك إعادة تسمية عنوان البرنامج النصي ، ثم النقر فوق زر حفظ .

انشر النص البرمجي وانسخ عنوان URL لتطبيق الويب

بعد حفظ التغيير ، دعنا ننشر البرنامج النصي عن طريق النقر فوق الزر " نشر " وتحديد "نشر جديد " من الخيارات.

في النافذة التي تظهر ، انقر فوق رمز الترس ، واختر خيار تطبيق الويب .

في النموذج الذي يظهر حديثًا ، قم بتغيير الوصول إلى أي شخص وانقر فوق الزر نشر .

إذا كان نشر البرنامج النصي يطلب بطريقة ما الإذن للوصول إلى جدول البيانات الخاص بك ، فيرجى تفويض وصوله لجعل البرنامج النصي قادرًا على كتابة البيانات في جدول البيانات الخاص بك.

بعد نجاح نشر البرنامج النصي ، انسخ عنوان URL لتطبيق الويب .

الصق عنوان URL لتطبيق الويب في إعداد خطاف الويب لنموذج Elementor

في محرر Elementor ، انقر فوق النموذج الذي تريد توصيله بورقة Google ، وسيفتح إعداد النموذج على اللوحة اليمنى للمحرر ، ثم قم بالتمرير لأسفل وانقر فوق الإجراء بعد إرسال كتلة - إضافة إجراء Webhook - ثم يفتح جديدًا كتلة Webhook أدناه ، سيؤدي النقر عليها إلى منحك حقل عنوان URL لوضع رابط تطبيق الويب المنسوخ.

حسنًا ، هذا كل شيء ، يمكنك اختبار النموذج عن طريق ملء حقل النص والنقر على زر الإرسال.

اختبرنا النموذج الذي أنشأناه عن طريق ملء النموذج والنقر على زر الإرسال 3 مرات.

على ورقة Google ، سيقوم الكود بإنشاء ورقة جديدة تحت اسم النموذج على Elementor. قمنا بتسمية النموذج إلى ورقة google ، واسم الورقة الجديد هو نفسه.

في الورقة التي تم إنشاؤها حديثًا ، توجد جميع البيانات التي نرسلها من نموذج Elementor ، دون فقد أي بيانات على الإطلاق.

ليتم تلخيصه

تعد نماذج الويب أداة مفيدة لتتبع معلومات معينة من زوار موقعك على الويب. وربما تكون أحد أهم العناصر على موقع الويب الخاص بك عندما يتعلق الأمر بتحقيق أهدافك. من خلال ربط النموذج بورقة Google الخاصة بنا ، يمكننا تنظيم البيانات وتصنيفها في تنسيق منطقي. بمجرد إدخال هذه البيانات في جدول البيانات ، يمكننا استخدامها للمساعدة في تنظيم أعمالنا وتنميتها.