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

תאור המקרה

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

האתגר

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

אופציות לפתרון

קיימות כמה אופציות לפתרון, בין היתר:

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

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

שלבי הפתרון

אלו השלבים לביצוע שאותם נסקור:

פתיחת קובץ Google Sheets והפיכתו למשותף לכל
אוטומציה לחיבור הקובץ לטופס
הכנסת מונים לקובץ
יצירת API
סקריפט לחיבור הקובץ לטופס

פתיחת קובץ Google Sheets

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

יצירת מונים בקובץ

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

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

כך נראית הפונקציה:

=COUNTIF(Sheet1!G:G, "Aromatherapy workshop")

במקרים בהם הקובץ בעברית, הפונקציה תיראה כך:

=COUNTIF('גיליון1'!G:G, "Aromatherapy workshop")

הערכים חייבים להיות תואמים לאפשרויות שהגדרנו בשדה הסלקט בטופס. כך נראה השדה הזה בטופס:

ולפי האפשרויות האלו הוספתי בהתאם את המונים בקובץ Google Sheets

=COUNTIF(Sheet1!G:G, "Aromatherapy workshop")
=COUNTIF(Sheet1!G:G, "Sound healing workshop")
=COUNTIF(Sheet1!G:G, "Meditation workshop")

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

כעת, כפי שכבר ציינתי חשוב לוודא שהקובץ פתוח ומשותף לכל, כדי שתהיה לאתר שלנו אפשרות לקרוא נתונים מתוך הקובץ.

יצירת API

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

ניצור חיבור API לקובץ Google Sheets דרך Google Cloud Console, ונקבל את ה-ID של הקובץ ואת מפתח ה-API.

החיבור הינו דרך: https://console.cloud.google.com/

הסרטון כאן מסביר את זה בצורה הכי טובה: https://www.youtube.com/watch?v=noF-QBRLf4o

הטמעת סקריפט

לאחר שיצרנו את החיבור נשתמש בסקריפט הבא כדי לחבר את הנתונים מהקובץ לטופס ולהשבית אפשרויות שהגיעו למכסה של 14 משתתפים:

נדאג ל- ID של הגליון שנמצא בשורת ה- url של הקובץ, ולאחר מכן ל- API.

את מפתח ה-API ניקח מ – Google Cloud Console

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

// החלק הזה אחראי לוודא את טעינת הסקריפט ללא תקלות

<script>
    if (typeof jQuery === 'undefined') {
        document.write('<script src="https://code.jquery.com/jquery-3.6.0.min.js"><\/script>');
    }
</script>

// הסקריפט

<script>
    jQuery(document).ready(function($) {
        const sheetId = '***********************'; // Id של הגליון
        const apiKey = '************************'; // מפתח ה-API
        const url = `https://sheets.googleapis.com/v4/spreadsheets/${sheetId}/values/Sheet1!G:G?key=${apiKey}`;
        $.getJSON(url, function(data) {
            if (data && data.values && data.values.length > 0) {
                
                var choicesCount = {
                    'Aromatherapy workshop': 0,
                    'Sound healing workshop': 0,
                    'Third healing workshop': 0
                };
                
                data.values.forEach(row => {
                    const choice = row[0];
                    if (choicesCount.hasOwnProperty(choice)) {
                        choicesCount[choice]++;
                    }
                });
                // בדיקת כל אפשרות והשבתה כשהגיעו ל-14 בחירות
                $('select#form-field-day_1_activity option').each(function() {
                    var value = $(this).val();
                    if (choicesCount[value] >= 14) { 
                        $(this).prop('disabled', true);
                    } else {
                        $(this).prop('disabled', false);
                    }
                });
            } 
        }).fail(function(jqxhr, textStatus, error) {
            console.error("Error fetching data from Google Sheets:", error);
        });
    });
</script>

והנה התוצאה:

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

סיכום

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