📘 תיעוד 238

הוספת טופס HTML עם Formspree

עודכן לאחרונה: 21 באפריל 2026

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

במדריך הזה תיצרו <form> באמצעות HTML ו-CSS רגילים ותוסיפו אותו לאתר HTML סטטי שמתארח ב-Cloudflare Pages. עיינו במדריך תחילת העבודה כדי להכיר את הפלטפורמה. תשתמשו ב-Formspree כדי לאסוף את הנתונים שנשלחו ולשלוח התראות בדוא"ל כשמגיעות הגשות חדשות, בלי צורך ב-JavaScript או בכתיבת קוד בצד השרת.

#הגדרה

כדי להתחיל, צרו מאגר GitHub חדש ↗︎. אחר כך צרו ספרייה מקומית חדשה במחשב שלכם, אתחלו את git, וחברו את מיקום GitHub כיעד מרוחק:

# create new directory
mkdir new-project
# enter new directory
cd new-project
# initialize git
git init
# attach remote
git remote add origin [email protected]:<username>/<repo>.git
# change default branch name
git branch -M main

עכשיו אפשר להתחיל לעבוד בספרייה new-project שיצרתם.

#סימון האתר

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

הערה

קוד הטופס מותאם מהמדריך HTML Forms. להסבר מעמיק יותר על אופן הפעולה של טפסי HTML ולמשאבי למידה נוספים, עיינו במדריך HTML Forms.

קוד הטופס:

<form method="POST" action="/">
	<label for="name">Full Name</label>
	<input id="name" type="text" name="name" pattern="[A-Za-z]+" required />

	<label for="email">Email Address</label>
	<input id="email" type="email" name="email" required />

	<label for="message">Message</label>
	<textarea id="message" name="message" required></textarea>

	<button type="submit">Submit</button>
</form>

המאפיין action קובע לאן נשלחים נתוני הטופס. תעדכנו אותו בהמשך כדי לשלוח את נתוני הטופס אל Formspree. לכל תגי <input> חייב להיות name ייחודי כדי ללכוד את נתוני המשתמש. הערכים של for ושל id חייבים להתאים כדי לקשר את <label> אל <input> המתאים, עבור כלי נגישות כמו קוראי מסך.

הערה

עיינו במדריך HTML Forms כדי ללמוד איך לבנות טופס HTML.

כדי להוסיף את הטופס לאתר, קודם צרו public/index.html בספריית הפרויקט. ספריית public צריכה להכיל את כל נכסי צד הלקוח, והקובץ index.html ישמש כדף הבית של האתר.

העתיקו והדביקו את התוכן הבא לקובץ public/index.html, שכולל את הטופס שלמעלה:

<html lang="en">
	<head>
		<meta charset="utf8" />
		<title>Form Demo</title>
		<meta name="viewport" content="width=device-width,initial-scale=1" />
	</head>
	<body>
		<!-- the form from above -->

		<form method="POST" action="/">
			<label for="name">Full Name</label>
			<input id="name" type="text" name="name" pattern="[A-Za-z]+" required />

			<label for="email">Email Address</label>
			<input id="email" type="email" name="email" required />

			<label for="message">Message</label>
			<textarea id="message" name="message" required></textarea>

			<button type="submit">Submit</button>
		</form>
	</body>
</html>

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

מאגר GitHub

קוד המקור של הדוגמה הזו זמין ב-GitHub ↗︎. זה יישום Pages חי, ויש גם הדגמה חיה ↗︎.

#צד השרת של Formspree

טופס ה-HTML הושלם, אבל כשהמשתמש שולח את הטופס, הנתונים יישלחו בבקשת POST לכתובת /. אין שרת שמעבד את הנתונים בכתובת הזו, ולכן תתרחש שגיאה. כדי לתקן זאת, צרו טופס Formspree חדש, והעתיקו את כתובת ה-URL הייחודית שלו אל action של הטופס.

כדי ליצור טופס Formspree, הירשמו לחשבון ב-Formspree ↗︎.

אחר כך, צרו טופס חדש באמצעות הכפתור + New form. תנו לו את השם Contact-us form ועדכנו את כתובת הדוא"ל של הנמען לכתובת שבה תרצו לקבל את הגשות הטופס. אחר כך בחרו Create Form.

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

העתיקו את כתובת ה-URL של Form Endpoint והדביקו אותה במאפיין action של הטופס שיצרתם למעלה.

<form method="POST" action="https://formspree.io/f/mqldaqwx">
	<!-- replace with your own formspree endpoint -->
</form>

עכשיו, כשתשלחו את הטופס, אמורה להתבצע הפניה לדף תודה. נתוני הטופס יישלחו לחשבון שלכם ב-Formspree.io ↗︎.

עכשיו אפשר להתאים את לוגיקת עיבוד הטופס כדי לשנות את דף ההפניה ↗︎, לעדכן את כתובת הדוא"ל להתראות ↗︎, או להוסיף תוספים כמו Google Sheets ↗︎, Slack ↗︎ ועוד.

לעזרה נוספת בהגדרת Formspree, עיינו במשאבים הבאים:

• לעזרה כללית עם Formspree, עיינו באתר העזרה של Formspree ↗︎.
• לדוגמאות ולהשראה לטפסי HTML משלכם, עיינו בספריית הטפסים של Formspree ↗︎.
• לטיפים לשילוב Formspree עם פלטפורמות נפוצות כמו Next.js, Gatsby ו-Eleventy, עיינו במדריכי Formspree ↗︎.

#פריסה

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

אם עדיין לא עשיתם זאת, שמרו את ההתקדמות בתוך git ואז דחפו את ה-commit או ה-commits למאגר GitHub:

# Add all files
git add -A
# Commit w/ message
git commit -m "working example"
# Push commit(s) to remote
git push -u origin main

העבודה שלכם נמצאת עכשיו במאגר GitHub, ולכן גם Pages יכולה לגשת אליה.

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

• Project name: לבחירתכם
• Production branch: main
• Framework preset: None
• Build command: None / Empty
• Build output directory: public

אחרי בחירה ב-Save and Deploy, פרויקט Pages יתחיל את הפריסה הראשונה שלו. כשהפריסה מצליחה, יוצגו בפניכם תת-דומיין ייחודי מסוג *.pages.dev וקישור להדגמה החיה.

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

אם תרצו לעיין בקוד המקור המלא של היישום הזה, אפשר למצוא אותו ב-GitHub ↗︎.

#משאבים קשורים

• הוספת טופס React עם Formspree
• HTML Forms