איך להגדיר בקלות טופס צור קשר בוורדפרס מול שרתי GMail

ישנן מספר דרכים להגדיר בוורדפרס (WordPress) טופס צור קשר לבלוג שלך אך חלקן עלולות להיתקל בקשיים אם חברת האחסון שאצלה מתאחסן האתר שלך לא מאפשרות את ההתקשרות החוצה בפורטים המיועדים לתקשורת דואר (למשל פורט 25 או 465 או 587) או לא מגדירות הזדהות תקינה, חלק מהשיטות לא יעבדו כאשר תיבת הדואר שאמורה לקבל את המשובים היא תיבה של Google Apps אבל יעבדו ללא בעיה אם זו תיבה של GMail.

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

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

השיטה שאותה אפרט מיד מצריכה את התקנתם של שני תוספים:

Postman SMTP – תוסף זה מאפשר לשנות את האופן שבו וורדפרס שולחת דואר באופן כללי (לאו דווקא מטופסי צור קשר) ומאפשרת גם ליצור רישום לוג מפורט לגבי כל נסיון משלוח ההודעות וגם תומכת בשליחת דואר דרך שרתי גוגל במגוון דרכים (בין השאר גם שליחת דואר דרך ממשק API של גוגל ב-https) ובכך מאפשרת להתגבר על בעיות במשלוח דואר שנובעות מהעדר תמיכה מצד החברה שמאחסנת את האתר. להלן לינק לאתר התוסף: https://wordpress.org/plugins/postman-smtp/

טפסי צרו קשר 7 – תוסף זה מאפשר להגדיר מספר טופסי צור קשר אשר תוכנם יישלח לכתובות דואר שונות, יכילו שדות שונים עם או בלי בדיקת תקינות קלט (למשל בדיקת תקינות מבנה ת.ז או מספר טלפון). להלן לינק לאתר התוסף: https://wordpress.org/plugins/contact-form-7/

שלב 1 – התקנה:

תחת התפריט "תוספים", לחץ על "תוסף חדש" וחפש ברשימה את התוסף ששמו Postman SMTP:

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

לאחר תום ההתקנה נמשיך להתקנת התוסף הבא. תחת התפריט "תוספים", לחץ על "תוסף חדש" וחפש ברשימה את התוסף ששמו "Contact Form 7". כך:

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

שלב 2 – הגדרות:

לאחר שהתקנו את התוספים, נפעיל אותם אחד אחד ונגדיר את ההגדרות הנחוצות בכל אחד. תחת התפריט "תוספים" נבחר ב-"תוספים מותקנים" ושם נחפש, ברשימת התוספים שכבר מותקנים לנו את התוסף ששמו "Postman SMTP" כך:

לאחר הפעלת התוסף, נגדיר את ההגדרות הרלוונטיות לו על ידי לחיצה על "Settings":

כעת נוכל להתחיל את אשף התצורה של התוסף על ידי לחיצה על הכפתור הכחול הגדול בשם "Start Wizard":

לאחר לחיצה על כפתור זה נתבקש להזין את כתובת הדואר ממנה יישלחו ההודעות. חשוב להבין שלמרות שהמשתמש שמזין את פרטיו באתר לא נוכל ממש להתחזות לו מבחינת כתובת הדואר של השולח, זאת משום ששרת דואר של Google (לצורך הדוגמא…) לא יסכים לשלוח הודעות בשם משתמש של walla או hotmail וזאת על מנת לצמצם את היקף בעיית דואר הזבל העולמית. את הפרטים הללו נזין במסך הבא:

לאחר שהזנו את כתובת הדואר שלנו ואת השם שיופיע בשדה "מאת" עבור מיילים שהאתר יישלח (לא רלוונטי לטופסי צור קשר – בטופסי צור קשר ניתן להגדיר שם אחר או את השם שהמשתמש מזין בטופס. השם כאן רלוונטי להודעות אחרות הנשלחות מהאתר) יש ללחוץ על Next. כעת התוסף ינסה לנחש על סמך הנתונים שהזנו את כתובת השרת שתשמש אותו למשלוח ההודעות (למשל, במקרה של כתובת ב-GMail כתובת השרת תהיה smtp.gmail.com):

לאחר מכן, יש ללחוץ על הכפתור "Next". כעת, התוסף ינתח את אפשרויות ההתקשרות שלו עם שרת הדואר שנבחר וימליץ (ויגדיר בברירת המחדל) את כל ההגדרות הדרושות מבחינת התוסף על מנת לתקשר עם שרת הדואר שנבחר באופן האופטימלי ביותר. כך:

אני ממליץ בחום לאמץ את המלצת התוסף ופשוט ללחוץ על Next לאחר שנבחרה השיטה הרלוונטית. במקרה שלי נבחרה שיטת אימות של OAuth 2.0 ולכן נידרש לעבור שלב נוסף מול שרתי Google כדי ליצור לנו מזהה ייחודי לצורך זיהוי של שליחת ההודעות. לאחר לחיצה על Next המסך אמור להיראות משהו בסגנון הזה (אם גם אצלכם נבחרה שיטת האימות הזו):

כעת, שימו לב לשתי השורות שבצילום המסך הן מטושטשות, האחת נקראת Authorized JavaScript origins והשנייה נקראת Authorized redirect URI, אנו נצטרך את הפרטים המופיעים בהן בהמשך כך שיש לשים לב לא לסגור את החלון של הדפדפן הזה. על מנת ליצור את המזהים (Client ID ו-Client Secret) יש ללחוץ על הלינק של Google Developers Console Gmail Wizard (במידה ומשהו לא ברור ניתן להיעזר בסרטונים בלינקים שבשורה מתחת):

יש לבחור Create a project (ברירת המחדל) וללחוץ על Continue (כדאי לדעת שזה עשוי לקחת קצת זמן בשלב הזה…):

כעת, יש ללחוץ Go to credentials (כאילו שיש לך אפשרות אחרת…):

במסך הזה יש לבחור בדיוק כפי שמופיע בצילום המסך לעיל ואז ללחוץ על הכפתור הכחול "What credentials do I need?":

בשורה הראשונה, תחת השדה Name תוכלו לרשום כל שם שיסמל עבורכם את הבלוג שלכם. השם הזה הוא בשבילכם בלבד – הוא לא יופיע לאף אחד אחר, פשוט כתבו שם שמזהה עבורכם את האתר. כעת, זוכרים שלפני מספר צילומי מסך ציינתי שיש לשים לב לשני ערכים שהופיעו באשף התצורה של התוסף? השדות Authorized JavaScript origins ו-Authorized redirect URIs שבאשף התצורה הכילו את הערכים שצריכים להיות מוזנים כאן – אז פשוט בצעו העתק-הדבק (Copy & Paste) לערכים שהופיעו שם לשדות הריקים המתאימים כאן. לאחר מכן ליחצו על "Create client ID"

תחת השדה Email address אמורה להופיע כתובת המייל שלכם. בשדה Product name shown to users שוב הקלידו טקסט שמזהה את האתר שלכם ולחצו על Continue.

כעת נוצר לכם Client ID. הקליקו על Done וכעת נגיע למסך הזה:

כעת, יש ללחוץ על השם המופיע בצד שמאל, ובדף שיופיע יופיעו גם ה-Client ID וה-Client Secret שאיתם יש להשתמש. על ידי ביצוע העתק-הדבק פשוטים נעתיק את הערכים הללו אל דף התצורה של התוסף:

כעת, לאחר שסיימנו את השלבים הללו, אתם אמורים להגיע למסך כזה:

ייתכן שאצלכם מופיעה הודעה לפיה הגדרתם את החיבור אבל טרם הגדרתם לו הרשאות מתאימות (הודעה כזו אם תופיע, היא תופיע בשורה העליונה מתחת לשם התוסף), במקרה כזה הקליקו על הלינק המופיע בהודעה ואשרו לגוגל לתת הרשאות מתאימות לתוסף וחזרו לדף זה. כעת, תוכלו לבדוק את הגדרותיכם על ידי לחיצה על הלינק Send a Test Email. לאחר לחיצה עליו אתם אמורים לקבל מייל לחשבונכם שאמור להיראות בערך כך:

כעת, לשלב האחרון – יצירת טופס צור קשר:

תחת התפריט "תוספים" נבחר ב-"תוספים מותקנים" ושם נחפש את המילה Contact אחד התוספים שיופיעו הוא "טפסי צרו קשר 7", כך:

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

לאחר לחיצה על עריכת הטופס יופיע לכם מסך כזה:

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

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

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

לחצו על הלינק לאתר של Google reCAPTCHA admin page ושם תופיע לכם (במידה ואי פעם כבר ביצעתם תהליך דומה) רשימת האתרים שברשותכם אשר משתמשים ב-reCAPTCHA. באותו אתר תוכלו להוסיף אתר חדש וזה בדיוק מה שבאנו לעשות כאן:

תנו שם לאתרכם תחת Label והוסיפו את הדומיין של האתר לרשימה למטה (אם יש לכם כמה דומיינים תוכלו לעשות זאת באותו אתר) ולחצו על Register ואז יופיעו לכם שני מפתחות site-key ו-secret-key. בחלון (או טאב) אחר, היכנסו שוב לניהול הבלוג שלכם ותחת תפריט בשם "צור קשר" בחרו באפשרות "אינטגרציות" כך:

כעת, לחצו על "הגדרת מפתח" ובחלון שנפתח הזינו (אפשר בהעתק-הדבק כמובן) את ה-site-key בתור מפתח אתר ואת ה-secret-key בתור מפתח סודי:

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

כעת שוב, נמקם את הסמן מעל שורת ה-submit ונלחץ על reCAPTCHA נקבל הפעם טופס כזה:

פשוט נלחץ על "הכנס תגית" ונשמור את הטופס. נעתיק את הטקסט שמופיע בשורה בכחול למעלה ונדביק אותו בפוסט או עמוד חדש באתר וזהו… ככה זה נראה: http://www.artifex.co.il/he/?page_id=1516

אהבתם? השאירו תגובות… 🙂