הקוד המלא - מוכן להטמעה הנה הקוד המלא שיוסיף אוטומטית אישור פרטיות לכל הטפסים באתר וגם יציג באנר קוקיז:
באנר פרטיות מתוקן
באנר פרטיות מתוקן
באתר זה נעשה שימוש באמצעי איסוף מידע, לרבות קובצי Cookies וטכנולוגיות נוספות, ובחלק מהמקרים גם על ידי גורמי צד שלישי, לצורך שיפור חוויית הגלישה, ביצוע ניתוחים סטטיסטיים, התאמת תכנים ופעילות שיווקית.
המשך השימוש באתר מהווה אישור והסכמה לשימוש זה.
למידע נוסף, וכן להסבר על אפשרויות השליטה בהעדפותיך, ניתן לעיין
במדיניות הפרטיות.
יתרונות הפתרון לבוני אתרים מתחילים
✅ פשטות מקסימלית
- קוד אחד לכל האתר – לא צריך להוסיף שדות ידנית לכל טופס
- התקנה חד פעמית – פשוט להדביק בפוטר וזה עובד מיד
- אפס תלות – לא צריך פלאגינים נוספים או רישיונות
- עדכונים אוטומטיים – טפסים חדשים יקבלו את השדה אוטומטית
✅ עמידה מלאה בחוק 13
- אישור מפורש – המשתמש חייב לסמן לפני שליחת הטופס
- הסכמה לקוקיז – באנר ברור על השימוש בקוקיז
- קישור למדיניות – הפנייה ישירה לעמוד הפרטיות שלכם
- תיעוד משפטי – הקוד מתעד את ההסכמה בטופס
✅ תמיכה טכנית רחבה
- כל סוגי האתרים – עובד עם WordPress רגיל וגם מנוהל
- כל הפלאגינים – תומך במגוון הטפסים הפופולריים
- כל הדפדפנים – עובד על Chrome, Firefox, Safari, Edge
- כל המכשירים – מותאם למחשב, טאבלט ונייד
✅ חוויית משתמש מעולה
- הודעות שגיאה ברורות – בעברית ובמיקום נכון
- עיצוב נקי ומקצועי – נראה טבעי כחלק מהטופס
- פונט Heebo – גופן עברית איכותי ונקי
- נגישות מלאה – תואם לתקני WCAG
✅ טכנולוגיה מתקדמת למתחילים
למרות שזה נראה פשוט, הקוד משתמש בטכנולוגיות מתקדמות:
🧠 זיהוי חכם של טפסים
var formSelectors = [
'form.elementor-form', // Elementor Pro
'form.wpcf7-form', // Contact Form 7
// וכו'...
];
הקוד "מכיר" את המאפיינים הייחודיים של כל פלאגין טפסים.
🔄 מעקב דינמי אחר שינויים
if (window.MutationObserver){
var observer = new MutationObserver(function(muts){
// קוד שמגיב לשינויים בדף
});
}
גם אם טפסים נוספים אחרי טעינת הדף – הקוד יזהה ויטפל בהם.
⚡ חסימת שליחה מתקדמת
e.preventDefault();
e.stopImmediatePropagation();
מונע שליחת הטופס ברמה הכי עמוקה, עובד גם עם AJAX.# מדריך מלא: הטמעת חוק 13 – אישור פרטיות וקוקיז באתר WordPress
חוק הגנת הפרטיות (תיקון מס' 13) מחייב אתרים בישראל לקבל הסכמה מפורשת משתמשים לפני איסוף נתונים אישיים ושימוש בקוקיז. במדריך זה תלמדו כיצד להטמיע פתרון מקיף שעומד בדרישות החוק ופועל עם כל הפלאגינים הפופולריים לטפסים.
מה כולל הפתרון?
1. אישור פרטיות אוטומטי לטפסים – הסבר טכני מפורט
הקוד "מזהה" אוטומטית טפסים באתר ומוסיף להם checkbox של אישור פרטיות. למתחילים – זה כמו רובוט קטן שמחפש טפסים באתר ומוסיף להם השדה החסר.
איך זה עובד מבפנים? הקוד מחפש במבנה HTML של העמוד אלמנטים (תגיות) ספציפיות שמאפיינות טפסים מפלאגינים שונים:
תמיכה מלאה במערכות הפופולריות:
🎯 Elementor Pro Forms – הבנאי הכי פופולרי בישראל
- מזהה:
form.elementor-form
- מוצא את כפתור השליחה לפי:
.elementor-field-type-submit
- תואם למבנה הספציפי של Elementor וה-CSS Classes שלו
📧 Contact Form 7 – הפלאגין החינמי הכי נפוץ
- מזהה:
form.wpcf7-form
- מוצא כפתורי
submit
רגילים - עובד גם עם AJAX (שליחה ללא רענון עמוד)
📝 WPForms – פלאגין טפסים מתקדם
- מזהה:
form.wpforms-form
- מוצא את כפתור השליחה לפי:
.wpforms-submit-container
- תומך בכל סוגי הטפסים של WPForms
⚙️ Gravity Forms – הפתרון המקצועי
- מזהה:
form.gform_wrapper form
(הטופס הפנימי) - מוצא את הפוטר:
.gform_footer
- תואם לארכיטקטורה המורכבת של Gravity Forms
🥷 Ninja Forms – חלופה גמישה
- מזהה:
form.nf-form
- מוצא את האזור:
.nf-form-cont .submit-container
- תומך בטפסים דינמיים
איך הקוד "יודע" איפה לשים את ה-Checkbox?
- זיהוי החכם: הקוד מחפש אזורי שליחה ספציפיים לכל פלאגין
- חילוף אוטומטי: אם לא מוצא אזור מוגדר, הוא מחפש כל כפתור submit
- הכנסה מדויקת: מוסיף את ה-checkbox ממש לפני כפתור השליחה
- מניעת כפילות: בודק שלא קיים כבר checkbox כזה
2. באנר קוקיז מתקדם
באנר מעוצב ואינטליגנטי המופיע בתחתית המסך:
- זיכרון חכם: זוכר שהמשתמש סגר את הבאנר (SessionStorage)
- עיצוב רספונסיבי: מתאים לנייד ולמחשב
- נגישות: כולל תוויות נגישות למשתמשי screen readers
- חוקיות מלאה: טקסט תואם חוק הגנת הפרטיות הישראלי
3. מנגנון אכיפה חזק ואמין
חסימת שליחה חכמה:
- עובד גם עם טפסים רגילים וגם עם AJAX
- הודעת שגיאה ברורה בעברית
- גלילה אוטומטית לשדה החסר
- ניקוי הודעת שגיאה כשמסמנים את ה-checkbox
טכנולוגיות מתקדמות שהקוד משתמש בהן:
🔄 MutationObserver – API מתקדם שמאזין לשינויים בדף
- זוהה תוכן חדש שנוסף לדף? הקוד יפעל מיד
- עובד עם popup-ים וטפסים שנטענים דינמית
- תומך בטפסים שנוספים אחרי טעינת הדף
⚡ Event Delegation – הקוד מאזין לאירועים ברמת המסמך
- גם טפסים חדשים יהיו מוגנים אוטומטית
- עובד עם תוכן שנטען ב-AJAX
- ביצועים מעולים גם באתרים עמוסים
איך להטמיע את הקוד באתר?
שלב 1: הכנת הקוד
- העתק את הקוד המלא מלמעלה
- חשוב: שנה את הקישור למדיניות הפרטיות שלך בשורה:
var policyUrl = "https://www.elisasi.co.il/%D7%A4%D7%A8%D7%98%D7%99%D7%95%D7%AA";
שלב 2: התקנת פלאגין Header and Footer Scripts
- מהלוח הניהול של WordPress, עבור ל: Plugins > Add New
- חפש "Header and Footer Scripts"
- התקן והפעל את הפלאגין
שלב 3: הוספת הקוד לפוטר
- עבור ל: Settings > Header and Footer Scripts
- גלול למטה לשדה "Scripts in Footer"
- הדבק את הקוד המלא
- לחץ "Save"
שלב 4: בדיקה ואימות
- צא מהלוח הניהול
- בקר בדף עם טופס כלשהו באתר
- ודא שמופיע checkbox עם טקסט אישור הפרטיות
- נסה לשלוח את הטופס ללא סימון – אמורה להופיע הודעת שגיאה
- ודא שהבאנר קוקיז מופיע בתחתית הדף
התאמות אישיות
שינוי הטקסט
ניתן לשנות את הטקסט של אישור הפרטיות בשורה:
var errorText = "יש לאשר את מדיניות הפרטיות לפני שליחת הטופס.";
שינוי עיצוב
ניתן להתאים את העיצוב על ידי עריכת ה-CSS. לדוגמה, לשינוי צבע הטקסט:
.custom-privacy-consent,
.custom-privacy-consent * {
color: #333 !important; /* במקום #c5c5c5 */
}
הסרת הבאנר קוקיז
אם אתם רוצים רק את אישור הטפסים בלי הבאנר, מחקו את החלק שמתחיל ב:
<!-- Cookie / Privacy Consent Banner -->
כיצד הקוד מתממשק עם מערכות שונות? – הסבר מפורט למתחילים
מה זה "מתממשק"?
כשאנחנו אומרים שהקוד "מתממשק" עם מערכות שונות, זה אומר שהוא יודע לדבר עם כל פלאגין טפסים בשפה שלו – כל פלאגין בונה טפסים קצת אחרת, עם מבנה HTML שונה ומחלקות CSS שונות.
איך הקוד "לומד" כל מערכת?
🔍 שלב 1: זיהוי הטופס
הקוד מחפש במבנה הדף סימנים מזהים של כל פלאגין:
var formSelectors = [
'form.elementor-form', // מחפש טופס עם המחלקה "elementor-form"
'form.wpcf7-form', // מחפש טופס עם המחלקה "wpcf7-form"
// וכו'...
];
למתחילים – מה זה "מחלקת CSS"? כל אלמנט בדף יכול לקבל "מחלקה" – זה כמו תווית זהות. לדוגמה:
- Elementor נותן לכל הטפסים שלו את התווית
elementor-form
- Contact Form 7 נותן את התווית
wpcf7-form
🎯 שלב 2: מציאת מקום הכנסת ה-Checkbox
כל פלאגין מארגן את הטופס אחרת, אז הקוד יודע איפה למצוא את כפתור השליחה:
Elementor Pro:
$submitWrap = $form.find('.elementor-field-type-submit')
Elementor עוטף את כפתור השליחה בקונטיינר עם המחלקה elementor-field-type-submit
Gravity Forms:
$submitWrap = $form.find('.gform_footer')
Gravity Forms שם את כפתור השליחה באזור שנקרא gform_footer
WPForms:
$submitWrap = $form.find('.wpforms-submit-container')
WPForms משתמש בקונטיינר עם השם wpforms-submit-container
מה קורה אם הפלאגין לא מוכר?
הקוד חכם! אם הוא לא מוצא את האזורים הספציפיים, הוא עובר לתוכנית גיבוי:
if (!$submitWrap.length){
var $btn = $form.find('button[type="submit"], input[type="submit"]').last();
$submitWrap = $btn.length ? $btn.parent() : $form;
}
פירוש במילים פשוטות:
- תחפש כל כפתור עם הסוג "submit" (שליחה)
- קח את ההורה שלו (האלמנט שמכיל אותו)
- שם את ה-checkbox לפני הכפתור
איך זה עובד עם AJAX? (טכנולוגיה מתקדמת)
מה זה AJAX למתחילים? AJAX זה טכנולוגיה שמאפשרת לטופס להישלח בלי לרענן את כל הדף. זה יוצר חוויית משתמש חלקה יותר.
הבעיה: טפסי AJAX לפעמים "עוקפים" את הבדיקות הרגילות.
הפתרון שלנו:
$(document).on('submit','form',function(e){
// הקוד מאזין לכל שליחת טופס ברמת המסמך
// גם אם זה AJAX - הוא יעצור את השליחה
e.preventDefault();
e.stopImmediatePropagation();
});
איך הקוד מתמודד עם טפסים דינמיים?
מה זה "טפסים דינמיים"? טפסים שנוספים לדף אחרי שהוא נטען – למשל:
- פופאפים שנפתחים בלחיצה
- טפסים שנטענים דרך AJAX
- תוכן שמתעדכן דינמית
הטכנולוגיה: MutationObserver
if (window.MutationObserver){
var observer = new MutationObserver(function(muts){
var add = muts.some(function(m){
return m.addedNodes && m.addedNodes.length;
});
if (add){ setTimeout(initUI, 200); }
});
observer.observe(document.body, {childList:true, subtree:true});
}
במילים פשוטות: זה כמו שומר שמקשיב כל הזמן – "אם משהו חדש נוסף לדף, תפעיל שוב את הפונקציה שמחפשת טפסים".
למה זה עובד עם כל התבניות?
הקוד לא מתמקד בתבנית (Theme) אלא בפלאגיני הטפסים. התבנית רק מעצבת איך הטופס נראה, אבל המבנה הבסיסי נשאר זהה.
לדוגמה:
- תבנית Astra + Elementor Pro = הקוד יזהה את
form.elementor-form
- תבנית Divi + Contact Form 7 = הקוד יזהה את
form.wpcf7-form
- תבנית מותאמת + WPForms = הקוד יזהה את
form.wpforms-form
מה עם טפסים מותאמים אישית?
אם יש לכם טופס מותאמת אישית שלא נכללת ברשימה, תוכלו להוסיף אותה:
var formSelectors = [
'form.elementor-form',
'form.wpcf7-form',
'form.wpforms-form',
'form.gform_wrapper form',
'form.nf-form',
'form.my-custom-form' // הוסיפו את השורה הזו
];
סיכום טכני למתחילים
הקוד הזה הוא כמו "מתורגמן אוטומטי" שיודע לדבר עם כל פלאגין טפסים:
- זיהוי חכם – מכיר את הסימנים המזהים של כל פלאגין
- הסתגלות – יודע איפה כל פלאגין שם את כפתור השליחה
- גמישות – אם לא מכיר, הולך על חפיש כללי
- התמדה – ממשיך לחפש גם אחרי שינויים בדף
- אמינות – עוצר שליחות גם במקרים מתקדמים כמו AJAX
למעשה, זה חוסך לכם צורך להכיר את כל הפרטים הטכניים – פשוט מדביקים ונהנים!
פתרון בעיות נפוצות
הקוד לא עובד
- ודא שהפלאגין Header and Footer Scripts פעיל
- בדוק שהוספת את הקוד לשדה Footer ולא Header
- ודא שיש לך jQuery באתר (רוב האתרים כוללים אותו)
הטופס נשלח בלי אישור
- בדוק שהטופס שלך תואם לאחד מהפלאגינים הנתמכים
- ייתכן שצריך להוסיף selector נוסף לרשימת
formSelectors
בעיות עיצוב
- הוסף
!important
לכללי ה-CSS שלך - בדוק שאין קונפליקט עם CSS של התבנית
סיכום
הטמעת הקוד הזה תבטיח שהאתר שלכם עומד בדרישות חוק הגנת הפרטיות (תיקון 13) ומספק חוויה חלקה למשתמשים. הפתרון פועל אוטומטית עם כל הטפסים באתר ולא דורש הגדרות נוספות לכל טופס בנפרד.
זכרו לעדכן את הקישור למדיניות הפרטיות שלכם ולבדוק שהפתרון פועל כראוי לאחר ההטמעה.
💡 טיפ מקצועי: מומלץ לבדוק את האתר באמצעות כלי הפיתוח של הדפדפן (F12) כדי לוודא שאין שגיאות JavaScript שעלולות להפריע לפעולת הקוד.