הוספת reCaptcha לטפסים של Contact Form 7

איך להוסיף reCaptcha (בעברית) לטופס Contact Form 7

בגירסאות 7.4.3 ומעלה של התוסף Contact Form 7 (שאנו אוהבים), ניתן להוסיף reCaptcha של גוגל בקלות לטפסים. זהו הפתרון הסטנדרטי ואולי אף האידיאלי ל CAPTCHA ולמניעת ספאם בטפסים של CF7 בוורדפרס ובכלל הטפסים ברשת.

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

reCaptcha היא מעבר להגנה מספאם. אולי אינכם יודעים, אך בכל פעם שאדם כלשהו פותר reCaptcha, אותו מאמץ אנושי עוזר להפוך טקסט לדיגיטלי, לפרש תמונות ולבנות מאגר מידע של למידה חישובית (Machine Learning). מאגר זה משמש בסופו של דבר מעבר לעזרה מול דואר זבל וספאם לשימור ספרים, לשיפור מפות ואף לפתור בעיות מורכבות בבינה מלאכותית.

במדריך זה נסביר כיצד להוסיף את אותו reCaptcha של גוגל לטפסים של Contact Form 7 באתרי וורדפרס ונראה גם טכניקה פשוטה בכדי לגרום לאותו reCaptcha לעבוד בעברית.

הטמעת גוגל reCaptcha בטופס CF7

בכדי להתחיל להשתמש ב reCaptcha בטפסים אלו, עליכם להיות בעלי חשבון בגוגל ולרשום את האתר בכדי לקבל מפתח API, אלו שלושת השלבים שיש לבצע:

  • גשו למסך הניהול של גוגל reCaptcha.
  • הוסיפו תווית, ביחרו reCaptcha v2 ורישמו את הדומיין שלכם.
  • וודאו כי יש ברשותכם את מפתח האתר ומפתח סודי (Site Key & Secret Key) שיופיעו לאחר שתרשמו.

מדריך זה מתייחס ל reCaptcha v2 בלבד, לא בדקתי את האפשרויות השניות. מוזנים לשתף בתגובות אם ניסיתם…

google-recaptcha-registration

הוסיפו את המפתח ל Contact Form 7 בממשק הניהול של וורדפרס

  • גשו לממשק הניהול של וורדפרס > צור קשר > אינטגרציות ולחצו על הגדרת מפתח.
  • העתיקו את ה Site Key ואת ה Secret Key לשדות מפתח האתר ומפתח סודי בהתאם.
  • לחצו על שמירה.

הפעולה האחרונה שיש לבצע היא להוסיף את הווידג׳ט של reCaptcha לתוכן הטופס ב Contact Form 7. הווידג׳ט נראה בצורה הבאה: [recaptcha]. זהו בעצם form-tag ככל האחרים ב Contact Form 7. הנה טבלה של האפשרויות עבור ה reCaptcha:

אפשרות

דוגמה

תיאור

theme:(תבנית)theme:darkהצבע של התבנית, של ה reCaptcha בעצם. יכולה להיות light או dark. ברירת מחדל: light.
size:(גודל)size:compactהגודל של הווידג׳ט (ה – reCaptcha). יכול להיות compact או normal.
id:(מזהה)id:fooהמזהה של הווידג׳ט (ID).
class:(קלאס)class:barהקלאס של הווידג׳ט. בכדי להוסיף שני קלאסים או יותר אתם יכולים לבצע זאת בצורה הבאה: [recaptcha class:y2008 class:m01 class:d01]

השימוש מתבצע בצורה הבאה:

[recaptcha size:compact id:foo class:bar theme:light ]

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

שינוי השפה של ה reCaptcha ב CF7

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

אך כנראה שהוא לא, אז הנה הוק שניתן להשתמש בו בכדי לשנות את השפה של ה reCaptcha לעברית, או לחילופין לאיזו שפה שתרצו, יש להוסיף קוד זה ל functions.php כמובן:

function custom_recaptcha_enqueue_scripts() {
	wp_deregister_script( 'google-recaptcha' );

	$url = 'https://www.google.com/recaptcha/api.js';
	$url = add_query_arg( array(
		'onload' => 'recaptchaCallback',
		'render' => 'explicit',
		'hl' => 'iw' ), $url );

	wp_register_script( 'google-recaptcha', $url, array(), '2.0', true );
}
add_action( 'wpcf7_enqueue_scripts', 'custom_recaptcha_enqueue_scripts', 11 );

קוד זה מסיר את נכס ה Javascript וקורא לו מחדש עם פרמטרים שונים ב URL בקריאה ל API של גוגל. שימו לב כי בשורה מספר 8 ניתן להחליף את קוד השפה לאיזו שפה שתרצו. הנה טבלה המייצגת את הקודים של השפות השונות למקרה ותרצו לשנות את שפת ה reCaptcha.

אם אתם במקרה במובייל ואינכם רואים את הטבלה, פשוט תנו מבט בקישור הבא.

LanguageValue
Arabicar
Afrikaansaf
Amharicam
Armenianhy
Azerbaijaniaz
Basqueeu
Bengalibn
Bulgarianbg
Catalanca
Chinese (Hong Kong)zh-HK
Chinese (Simplified)zh-CN
Chinese (Traditional)zh-TW
Croatianhr
Czechcs
Danishda
Dutchnl
English (UK)en-GB
English (US)en
Estonianet
Filipinofil
Finnishfi
Frenchfr
French (Canadian)fr-CA
Galiciangl
LanguageValue
Georgianka
Germande
German (Austria)de-AT
German (Switzerland)de-CH
Greekel
Gujaratigu
Hebrewiw
Hindihi
Hungarainhu
Icelandicis
Indonesianid
Italianit
Japaneseja
Kannadakn
Koreanko
Laothianlo
Latvianlv
Lithuanianlt
Malayms
Malayalamml
Marathimr
Mongolianmn
Norwegianno
Persianfa
LanguageValue
Polishpl
Portuguesept
Portuguese (Brazil)pt-BR
Portuguese (Portugal)pt-PT
Romanianro
Russianru
Serbiansr
Sinhalesesi
Slovaksk
Sloveniansl
Spanishes
Spanish (Latin America)es-419
Swahilisw
Swedishsv
Tamilta
Telugute
Thaith
Turkishtr
Ukrainianuk
Urduur
Vietnamesevi
Zuluzu

לסיכום

זוהי הדרך להוספת reCaptch של גוגל (בעברית) לטפסים של Contact Form 7. ניתן אגב למנוע ספאם ב CF7 גם באמצעות התוסף אקיזמט החינמי. לשיקולכם באיזו דרך לבחור, בסאבי בלוג אני משתמש דווקא באקיזמט ומאד מרוצה…

המשיכו לעקוב וכמובן שאתם מוזמנים לשתף מחשבות בתגובות, בהצלחה! 😉

רועי יוסף
רועי יוסף

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

{ 2 תגובות… הוסף אחת }

השאירו תגובה

פעימות
וריאיציות מוצרים - ווקומרס
וריאציות מוצרים – ווקומרס (WooCommerce)

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