📘 תיעוד 237

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

עודכן לאחרונה ב: 21 באפריל 2026 | העתק כ-Markdown | הצג כ-Markdown | הגדרת סוכן

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

במדריך זה, תיצור רכיב <form> באמצעות React ותוסיף אותו ליישום בעל עמוד יחיד שנבנה עם create-react-app. למרות שאתה משתמש ב-create-react-app (CRA), המושגים יחולו על כל תשתית React כולל Next.js, Gatsby ועוד. תשתמש ב-Formspree כדי לאסוף את הנתונים שנשלחו ולשלוח התראות דואל כאשר מגיעות הגשות חדשות, ללא צורך בכתיבת קוד צד שרת.

אתה תפרוס את האתר שלך ל-Cloudflare Pages. עיין ב-מדריך תחילת העבודה כדי להכיר את הפלטפורמה.

#הגדרה

כדי להתחיל, צור פרויקט React חדש במחשב המקומי שלך באמצעות create-react-app. לאחר מכן צור מאגר GitHub חדש ↗︎, ושייך את המיקום ב-GitHub כיעד מרוחק:

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

כעת תוכל לשנות את יישום ה-React בספרייה new-app שיצרת.

#קוד צד הלקוח

נקודת ההתחלה של create-react-app כוללת אתר Hello World פשוט. אתה תוסיף טופס צור קשר שמקבל שם, כתובת דואל והודעה. קוד הטופס מותאם מתוך המדריך לטופסי HTML. להסבר מעמיק יותר על האופן שבו טופסי HTML עובדים ולמשאבי למידה נוספים, עיין ב-מדריך טופסי HTML.

תחילה, צור רכיב React חדש בשם ContactForm.js והנח אותו בתיקיית src לצד App.js.

project-root/
├─ package.json
└─ src/
   ├─ ContactForm.js
   ├─ App.js
   └─ ...

לאחר מכן, תבנה את רכיב הטופס באמצעות ספריית עזר מבית Formspree, בשם @formspree/react ↗︎. ספרייה זו מכילה hook בשם useForm כדי לפשט את תהליך הטיפול באירועי הגשת טופס וניהול מצב הטופס.

התקן אותה עם:

npm:

npm i @formspree/react

yarn:

yarn add @formspree/react

pnpm:

pnpm add @formspree/react

bun:

bun add @formspree/react

לאחר מכן הדבק את קטע הקוד הבא לתוך הקובץ ContactForm.js:

import { useForm, ValidationError } from "@formspree/react";

export default function ContactForm() {
	const [state, handleSubmit] = useForm("YOUR_FORM_ID");

	if (state.succeeded) {
		return <p>Thanks for your submission!</p>;
	}

	return (
		<form method="POST" onSubmit={handleSubmit}>
			<label htmlFor="name">Full Name</label>
			<input id="name" type="text" name="name" required />
			<ValidationError prefix="Name" field="name" errors={state.errors} />

			<label htmlFor="email">Email Address</label>
			<input id="email" type="email" name="email" required />
			<ValidationError prefix="Email" field="email" errors={state.errors} />

			<label htmlFor="message">Message</label>
			<textarea id="message" name="message" required></textarea>
			<ValidationError prefix="Message" field="message" errors={state.errors} />

			<button type="submit" disabled={state.submitting}>
				Submit
			</button>
			<ValidationError errors={state.errors} />
		</form>
	);
}

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

ה-hook בשם useForm מחזיר אובייקט state ופונקציית handleSubmit שאותה אתה מעביר לתכונת onSubmit של הטופס. יחד, הם מספקים דרך לשלוח את נתוני הטופס דרך AJAX ולעדכן את מצב הטופס בהתאם לתגובה שמתקבלת.

לשם בהירות, טופס זה אינו כולל עיצוב כלשהו, אך בפרויקט ה-GitHub בכתובת (https://github.com/formspree/formspree-example-cloudflare-react ↗︎) תוכל לבחון דוגמה לאופן החלת סגנונות על הטופס.

הערה:

רכיבי ValidationError הם כלי עזר המציגים הודעות שגיאה עבור שגיאות שדות, או שגיאות כלליות של הטופס (אם לא צוינה תכונת field). למידע נוסף על אימות, עיין ב-תיעוד Formspree React ↗︎.

כדי להוסיף טופס זה לאתר שלך, ייבא את הרכיב:

import ContactForm from "./ContactForm";

לאחר מכן הכנס את הטופס לתוך העמוד כרכיב React:

<ContactForm />

לדוגמה, תוכל לעדכן את הקובץ src/App.js שלך כדי להוסיף את הטופס:

import ContactForm from "./ContactForm"; // <-- import the form component
import logo from "./logo.svg";
import "./App.css";

function App() {
	return (
		<div className="App">
			<header className="App-header">
				<img src={logo} className="App-logo" alt="logo" />
				<p>
					Edit <code>src/App.js</code> and save to reload.
				</p>
				<a
					className="App-link"
					href="https://reactjs.org"
					target="_blank"
					rel="noopener noreferrer"
				>
					Learn React
				</a>

				{/* your contact form component goes here */}
				<ContactForm />
			</header>
		</div>
	);
}

export default App;

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

מאגר GitHub:

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

#צד השרת של Formspree

טופס ה-React שלם, אך כאשר המשתמש ישלח טופס זה, הוא יקבל שגיאת Form not found. כדי לתקן זאת, צור טופס Formspree חדש, והעתק את המזהה הייחודי שלו אל תוך קריאת ה-useForm של הטופס.

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

יוצגו בפניך הוראות כיצד לשלב את הטופס החדש שלך. העתק את ה-hashid של הטופס (8 התווים האלפאנומריים האחרונים מתוך כתובת ה-URL) והדבק אותו לתוך הפונקציה useForm ברכיב ContactForm שיצרת למעלה.

הרכיב שלך צריך לכלול כעת שורה כזו:

const [state, handleSubmit] = useForm("mqldaqwx");

/* replace the random-like string above with your own form's ID */

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

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

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

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

#פריסה

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

אם עדיין לא עשית זאת, שמור את ההתקדמות שלך בתוך git ולאחר מכן דחוף את ההגשה (או ההגשות) למאגר ה-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: Create React App
• Build command: npm run build
• Build output directory: build

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

#שימוש במשתני סביבה עם טפסים

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

כדי להגדיר טופסי ייצור ופיתוח תחילה צור טופס שני ב-Formspree. תן לטופס זה את השם Contact Us Testing, ושים לב ל-hashid ↗︎ של הטופס.

לאחר מכן שנה את ה-hook בשם useForm בקובץ ContactForm.js שלך כך שיאותחל עם משתנה סביבה, ולא כמחרוזת:

const [state, handleSubmit] = useForm(process.env.REACT_APP_FORM_ID);

בהגדרות פרויקט Cloudflare Pages שלך, הוסף את משתנה הסביבה REACT_APP_FORM_ID גם לסביבת ה-Production וגם לסביבת ה-Preview. השתמש ב-hashid של הטופס המקורי שלך עבור Production, וב-hashid של טופס הבדיקה החדש עבור סביבת ה-Preview:

כעת, כאשר תבצע commit ודחיפה של שינויים לענף במאגר ה-git שלך, ייווצר יישום תצוגה מקדימה חדש עם טופס שנשלח אל כתובת ה-URL של טופס הבדיקה. עם זאת, אתר הייצור שלך ימשיך לשלוח לכתובת ה-URL של הטופס המקורי.

הערה:

Create React App משתמש בקידומת REACT_APP_ כדי לסמן משתני סביבה הנגישים לקוד JavaScript בצד הלקוח. תשתית אחרת תשתמש בקידומת אחרת כדי לחשוף משתני סביבה. לדוגמה, במקרה של Next.js, הקידומת היא NEXT_PUBLIC_. עיין בתיעוד של תשתית צד הלקוח שלך כדי לקבוע כיצד לגשת למשתני סביבה מתוך קוד ה-React שלך.

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

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

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

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