כיצד ליצור טופס יצירת קשר באמצעות Formspree

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

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

מהו Formspree ואיך זה עובד?

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

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

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

כדי לרשום את הדוא"ל שלך ב-Formspree, היכנס והזן את כתובת הדוא"ל היעד עבור הטופס שלך.

1. התחבר Formspree. אם אין לך חשבון, תצטרך להזין את כתובת הדוא"ל שלך וסיסמה. הירשם באמצעות כתובת הדוא"ל שאליה תרצה שטופס יצירת הקשר ישלח את ההגשות. ייתכן שתצטרך גם לאמת כתובת דוא"ל זו במהלך תהליך ההרשמה.
2. לאחר השלמת תהליך ההרשמה, הדף "טפסים" ייפתח. לחץ על טופס חדש.
3. הזן כל שם עבור טופס יצירת הקשר שלך ועזוב את הגדרות ברירת המחדל של הפרויקט. הזן את כתובת הדוא"ל היעד בשדה "שלח דוא"ל אל". זה המקום אליו Formspree ישלח את ההגשות שלך לטופס יצירת הקשר. לאחר השלמת, לחץ על צור טופס.
4. Formspree יספק לך נקודת קצה ודוגמאות לשימוש בה. תצטרך להוסיף את נקודת הקצה הזו לטופס יצירת הקשר המותאם אישית שלך באתר האינטרנט שלך (עוד על כך בהמשך).
5. כברירת מחדל, Formspree מאחסן את הטופס שלך תחת פרויקט שנקרא "הפרויקט הראשון שלי". אם אתה רוצה לשנות את השם של זה, חזור לדף "טפסים". לחץ על הגדרות ליד שם הפרויקט.
6. כאן, אתה יכול לשנות את שם הפרויקט שלך למשהו אחר. לדוגמה, אתה יכול לשנות את שמו כך שיהיה שם זהה לאתר שלך. אתה יכול גם להוסיף את כתובת האתר של האתר שלך.

יהיה עליך להוסיף את נקודת הקצה שסופקה על ידי Formspree לטופס יצירת הקשר בקוד האתר שלך.

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

   <טופס פעולה="https://formspree.io/f/xjvlaqpe" שיטה="הודעה">
   <!-- הטופס שלך כאן ->
   <סוג כפתור="שלח" class="לַחְצָן"> שלח </button>
   </form>

2. הוסף קלט לטופס שלך. אתה יכול להשתמש בטופס לדוגמה זה המשתמש מסגרת Bootstrap CSS:

   <טופס פעולה="https://formspree.io/f/mbjqjrdl" class="ריפוד נוסף" שיטה="הודעה">
   <div class="טופס-קבוצה">
   <תווית עבור="להגיב ל"> כתובת המייל שלך </label>
   <סוג קלט="אימייל" class="שליטה בטופס" id="להגיב ל" שם="_להגיב ל" ngModel="תשובה" aria-describedby="emailHelp" מציין מיקום="[email protected]">
   <id= קטן"emailHelp" class="טופס-טקסט מושתק"> האימייל שלך לא ישותף עם אף אחד אחר. </small>
   </div>
   <div class="טופס-קבוצה">
   <תווית עבור="הוֹדָעָה"> ההודעה שלך </label>
   <שם טקסט ="הוֹדָעָה" סגנון="גובה: 200 פיקסלים" class="שליטה בטופס" id="הוֹדָעָה" מציין מיקום="שלום! אני'אני פונה אליך כי..."></textarea>
   </div>
   <סוג כפתור="שלח" class="לַחְצָן"> שלח </button>
   </form>
   

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

1. הפעל את האתר שלך ופתח את הדף הכולל את טופס יצירת הקשר. הכנס הודעה לטופס צור קשר ולחץ שלח.
2. תקבל את הודעת טופס יצירת הקשר בתיבת הדואר הנכנס שלך.
3. אם תחזור ל-Formspree, לחץ על הגשות לשונית. כאן תוכל גם לראות הודעות שנשלחו מטופס יצירת הקשר שלך.

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

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

על הסופר

שרלין פון דרהנן (9 מאמרים שפורסמו)

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

עוד מאת שרלין פון דרהנן