יצירת טופס צור קשר בעזרת PHP

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

בתור התחלה, אנו ניצור קובץ חדש תחת השם contact.php ונוסיף את הקוד הבא:

  <form method="post" action="contact.php">
	<label for="name">שם מלא</label>
	<input type="text" name="name" id="name" value="<?php echo $name; ?>" required><br>

	<label for="phone">טלפון</label>
	<input type="text" name="phone" id="phone" value="<?php echo $phone; ?>" required><br>

	<label for="email">דואר אלקטרוני</label>
	<input type="email" name="email" id="email" value="<?php echo $email; ?>" required><br>

	<label for="message">הודעתכם</label>
	<textarea name="message" id="message" required><?php echo $message; ?></textarea><br>

	<input type="submit" value="שליחה">
</form>

לפני שנמשיך, בואו נפרק את האלמנטים. תחילה יצרנו טופס בעזרת התגית <form> לה הוספנו את שיטת post. באמצעות שיטה זו הנתונים שנשלחים אל השרת לעיבוד אינם גלויים בשורת הכתובת, בניגוד לשיטת get. שימו לב כי יש חשיבות מכרעת לשיטה שאנו בוחרים לאחר מכן בעיבוד הנתונים. לבסוף, הפעולה שהטופס יבצע הוא לשלוח את הנתונים אל הקובץ בו אנו נמצאים כרגע, ולא אל קובץ אחר. לאחר מכן הוספנו תוויות <label> לכל שדה, ואז את השדות עצמם <input>. לתיבת הטקסט השתמשנו בשדה מסוג <textarea> שמשמעו כפי שהוא כתוב – אזור טקסט. לסיום, הוספנו כפתור submit, שיבצע את שליחת הטופס.

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

כעת, לאחר שטופס ה-HTML שלנו מוכן, הגיע הזמן לעבור ל-PHP. בראש הקובץ, מעל קוד ה-HTML, אנו נוסיף את הקוד הבא:

<?php

// לכידת המידע שנשלח מהטופס. אם לא נשלח מידע, המשתנים יהיו ריקים
$name = (isset($_POST['name']) ? $_POST['name'] : null );
$phone = (isset($_POST['name']) ? $_POST['phone'] : null );
$email = (isset($_POST['name']) ? $_POST['email'] : null );
$message = (isset($_POST['name']) ? $_POST['message'] : null ); 

// בדיקה שאכן נשלח מידע מהטופס 
if (empty($name) || empty($phone) || empty($email) || empty($message)) {
	echo "כל השדות הינם חובה. אנא נסו שנית.";
} else {
	// במידה וכל השדות מלאים, נבצע בדיקה שכתובת הדואר שהוזנה תקינה
	if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
		echo "כתובת הדואר האלקטרוני שהוזנה אינה תקינה";
	} else {
		// שליחת המייל. ניתן לשנות את המשתנה הראשון ולרשום בו את כתובת המייל שלכם.
		$to = "your_email@gmail.com";
		$headers = "From: $email\r\n";
		$headers .= "Reply-To: $email\r\n";
		$message = "שם מלא: $name\nטלפון: $phone\nדואר אלקטרוני: $email\n\n$message";
		if (!mail($to, "הודעה מהאתר", $message, $headers)) {
			$error = error_get_last();
			echo "תקלה בשליחת ההודעה";
		} else {
			echo "ההודעה נשלחה בהצלחה!";
			// כעת נמחק את המשתנים על מנת שלא יופיעו שוב בטופס לאחר שליחה מוצלחת
			unset($name, $phone, $email, $message);
		}
	}
}
?>

הפעולה הראשונה הייתה לכידת המידע מהטופס. בעזרת קיצור בדקנו אם התקבלו נתונים בעזרת POST, ויצרנו משתנים תואמים. לאחר מכן ביצענו בדיקה בעזרת empty כדי לבדוק שכל השדות מלאים כפי שדרשנו במהלך מילוי הטופס. במידה והם מלאים, ממשיכים לשלב הבא. אנו בודקים בעזרת FILTER_VALIDATE_EMAIL שכתובת הדואר האלקטרוני שהוזנה תקינה וניתן להשתמש בה בטופס. במידה והכתובת תקינה כאמור, אנו מבצעים את השליחה עצמה – מייצרים משתנה בשם $to בו אנו נזין את כתובת הדואר שלנו שאליה נקבל את הטפסים, נקבע את ראש המייל בעזרת $headers (שימו לב כי תחילה יצרנו את המשתנה ולאחר מכן הוספנו לו שורה נוספת בעזרת .=), קבענו את המייל עצמו תוך שהשתמשנו ב-\n ו-\r שהם למעשה תווי ASCII מיוחדים הגורמים ל"ירידת שורה", ממש כמו מקש האנטר במקלדת.

שימו לב לדקויות – במידה ובתוך ה-IF מופיע סימן קריאה (!) – הבדיקה היא האם הערך לא ריק, למשל: if (!empty. בסוף התוכנית כתבנו if (!mail כך שהתוצאה תהיה – במידה והמייל לא נשלח.

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

להלן קוד המלא, כולל תגיות HTML ותגית style ליישור מימין לשמאל:

<?php

// לכידת המידע שנשלח מהטופס. אם לא נשלח מידע, המשתנים יהיו ריקים
$name = (isset($_POST['name']) ? $_POST['name'] : null );
$phone = (isset($_POST['name']) ? $_POST['phone'] : null );
$email = (isset($_POST['name']) ? $_POST['email'] : null );
$message = (isset($_POST['name']) ? $_POST['message'] : null ); 

// בדיקה שאכן נשלח מידע מהטופס 
if (empty($name) || empty($phone) || empty($email) || empty($message)) {
	echo "כל השדות הינם חובה. אנא נסו שנית.";
} else {
	// במידה וכל השדות מלאים, נבצע בדיקה שכתובת הדואר שהוזנה תקינה
	if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
		echo "כתובת הדואר האלקטרוני שהוזנה אינה תקינה";
	} else {
		// שליחת המייל. ניתן לשנות את המשתנה הראשון ולרשום בו את כתובת המייל שלכם.
		$to = "your_email@gmail.com";
		$headers = "From: $email\r\n";
		$headers .= "Reply-To: $email\r\n";
		$message = "שם מלא: $name\nטלפון: $phone\nדואר אלקטרוני: $email\n\n$message";
		if (!mail($to, "הודעה מהאתר", $message, $headers)) {
			$error = error_get_last();
			echo "תקלה בשליחת ההודעה";
		} else {
			echo "ההודעה נשלחה בהצלחה!";
			// כעת נמחק את המשתנים על מנת שלא יופיעו שוב בטופס לאחר שליחה מוצלחת
			unset($name, $phone, $email, $message);
		}
	}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>טופס צור קשר בעזרת PHP</title>
 <style>
body {
direction: rtl;
}
</style>
</head>
<body>
  
  <form method="post" action="contact.php">
	<label for="name">שם מלא</label>
	<input type="text" name="name" id="name" value="<?php echo $name; ?>" required><br>

	<label for="phone">טלפון</label>
	<input type="text" name="phone" id="phone" value="<?php echo $phone; ?>" required><br>

	<label for="email">דואר אלקטרוני</label>
	<input type="email" name="email" id="email" value="<?php echo $email; ?>" required><br>

	<label for="message">הודעתכם</label>
	<textarea name="message" id="message" required><?php echo $message; ?></textarea><br>

	<input type="submit" value="שליחה">
</form>
  
    
</body>
</html>

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

echo "<p>הודעה</p>";

במידה ונרצה להוסיף גרשיים בתוך ה-echo, נוכל לעשות זאת בשני דרכים: להשתמש בתו ' במקום גרשיים בהתחלה:

echo '<div class="success">הצלחה</div>';

או להוסיף קו נטוי לפני הגרשיים הפנימיים:

echo "<div class=\"success\">הצלחה</div>";