טופס צור קשר ב-PHP – הורדה בחינם

»
  • 60150
  • 16-01-2014

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

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

בקרוב טפסים מבוססי אגקס וטפסי יצירת קשר מעוצבים (אנחנו עובדים על זה!). הוספנו לאחרונה מספר טפסי יצירת קשר מושקעים ומעוצבים אשר עושים שימוש בטכנולוגיית אג'קס. מומלץ בחום לבדוק אותם – הם מושקעים וחכמים.

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

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

יש ליצור קובץ שנקרא: contact-us.html

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

כעת ניצור קובץ שנקרא: process-form.php

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

לסיום ניצור קובץ שנקרא: done.php

דף זה יציג הודעה בוצע, אפשר ומומלץ לשלב את ההודעה בדף קיים אשר הוא חלק מהעיצוב. כמו כן תוכלו לוותר על דף זה וליצור redirect כלומר הפנייה אל דף קיים באתר על ידי שינוי הגדרה בדף contact-us.html

קוד הטופס

את הטופס עצמו ניתן לבנות בצורה הכי בסיסית או להשקיע בעיצוב הטופס ע"י שימוש בCSS כדי ליצור תאי טקסט מעוצבים, צבעי רקע וסוגי פונט. בקוד המוצג עטפתי כל חלק בטופס בDIV כך שיהיה קל להוסיף תג class על ידי שימוש בCSS.

<!--=== באדיבות שגיב SEO www.sagive.co.il ===-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="he" lang="he" dir="rtl">
<head>
<title>טופס צור קשר</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255" />

<link href="style2.css" rel="stylesheet" type="text/css" />
</head>

<body dir="rtl">
	<div width="271px">
		<h3>יצירת קשר</h3>

		<!---===STR======== טופס יצירת קשר ==============-->
		<form action="forms/process-form.php" method="post" id="form">
			<div>
			<label>שם מלא:</label>
			<input type="text" id="name" name="name" />
			</div>

			<div>
			<label>כתובת דואר אלקטרוני:</label>
			<input type="text" id="email" name="email" />
			</div>

			<div>
			<label>טלפון:</label>
			<input type="text" id="topic" name="topic" />
			</div>

			<div>
			<label>הודעה:</label>
			<textarea id="comments" name="comments" cols="1" rows="1"></textarea>
			</div>

			<div>
			<a href="#" onclick="document.getElementById('form').submit()"><em><b>שליחה</b></em></a>
			<a href="#" onclick="document.getElementById('form').reset()"><em><b>ניקוי טופס</b></em></a>
			</div>
		</form>
		<!---===END======== טופס יצירת קשר ==============-->

	</div>
</body>
</html>

הסבר קצר

טופס צור קשר לפני עיצוב

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

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

* הכנו לכם שני עיצובים קלים ליישום בטפסים שלכם. העתיקו והחליפו את קוד הCSS הקיים.

קוד הטופס לשימוש עם עיצובים אלו +
* החליפו את הערך cform01 לcform02 כדי להשתמש בעיצוב השני.
		<div class="cform cform01">
			<div class="inner">
				<h3>יצירת קשר</h3>

				<div class="">
				<form action="forms/process-form.php" method="post" id="form">
					<input type="text" id="name" name="name" placeholder="השם שלך" />
					<input type="text" id="email" name="email" placeholder="האימייל שלך" />
					<input type="text" id="topic" name="topic" placeholder="הטלפון שלך" />
					<textarea id="comments" name="comments" cols="1" rows="3" placeholder="גוף ההודעה"></textarea>

					<div class="buttons">
						<a href="#" class="link1 brad5" onclick="document.getElementById('form').submit()"><em><b>שליחה</b></em></a>
						<div class="fix"></div>
					</div>
				</form>
			</div>
		</div>
עיצוב לדוגמה 01 +
			/*** FORM 1 ***/
			.cform01 * { font-family: arial; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box; -webkit-font-smoothing: antialiased;}
			.cform01 {border: 15px solid #F5C25F; width: 235px; background: #F7DEAE; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;}
			.cform01 .fix {clear: both;}
			.cform01 .brad5, .cform01 input, .cform01 textarea {-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
			.cform01 .inner {border: 5px solid #FADC76; padding: 20px;-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}
			.cform01 h3 {margin: 0 0 10px;}

			.cform01 input, .cform01 textarea {width: 100%; padding: 8px 5px; border: 2px solid #F5C25F;}
			.cform01 .link1 {float: left; margin: 2%; background: #CF3B19; padding: 5px 10px; color: #fff; font-weight: bold; text-decoration: none;}
עיצוב טופס לדוגמה 01

עיצוב לדוגמה 02 +
			/*** FORM 2 ***/
			.cform02 * { font-family: arial; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box; -webkit-font-smoothing: antialiased;}
			.cform02 {border: 3px solid #7E8E9B; width: 235px; background: #EBEBEB; -webkit-box-shadow: 1px 1px 1px 1px #222; box-shadow: 1px 1px 1px 1px #222;}
			.cform02 .fix {clear: both;}
			.cform02 .inner {padding: 20px;-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}
			.cform02 h3 {margin: 0 0 10px; color: #515C66; font-weight: bolder; font-style: italic;}

			.cform02 input, .cform02 textarea {width: 100%; padding: 8px 5px; border: 1px solid #7E8E9B;}
			.cform02 .link1 {float: left; margin: 2%; font-size: 15px; background: #7E8E9B; padding: 5px 10px; color: #fff; font-weight: bold; text-decoration: none;}
עיצוב טופס לדוגמה 02

לשלב הבא – מטפלים בנתונים המתקבלים מהטופס

עכשיו שיש לנו טופס מוכן הגיע הזמן להכין סקריפט אשר יטפל בנתונים מהטופס אז ניצור דף ונקרא לו process-form.php. אני מיקמתי אותי בתוך תיקייה אשר נקראת forms אבל אתם יכולים למקם אותו היכן שתרצו רק תזכרו לשנות את מסלול התיקייה בדף בו נמצא הטופס בשורה "form action="forms/process-form.php"

להלן הקוד שקיים בקובץ process-form.php:
// קולט את המידע ומעביר אותו למשתנים
$name = $_POST['name'];
$email = $_POST['email'];
$topic = $_POST['topic'];
$comments = $_POST['comments'];

// המבנה של המייל שתקבלו כתגובה לשימוש בטופס - החליפו את המייל לשלכם
$to = 'example@sagive.co.il';
$subject = "subject: $topic";
$message = "$name wrote: $comments";
$headers = "From: $email";

// שולח אליכם את פרטי הטופס לפי פורמט הפקודה mail()
mail($to, $subject, $message, $headers);

// שנו אל מסלול הדף אליו תרצו להפנות לאחר שליחת ההודעה
header("Location: success.html");
זה הקוד אשר מקבל את הנתונים מהטופס ושולח אותו למייל המוגדר בתוכו. אל תשכחו לשנות את כתובת המייל לכתובת הרצויה אחרת לא תקבלו שום מייל. כפי שניתן לראות הטופס פשוט וקל מאוד לבנייה והוא עובד מצוין עם עברית. את כל הקבצים של הטופס ניתן להוריד כאן

בונים אתר מודרני!

חולמים על אתר חדש בו להוסיף טופס עושים בלחיצה על כפתור? אתר חדש עם מערכת ניהול תוכן שתעשה לכם את החיים קלים יותר? פנו אלינו היום לשיחת ייעוץ בחינם עם בונה אתרים מנוסה כדי לדעת עוד!

  • בניית אתרים חכמים ומקצועיים שקל לנהל
  • אתרים חכמים עם שלל פונקציות מובנות
  • ממשק סטטיסטיקה מתקדם כלול באתר
  • אפשרות להוסיף דפים וקטגוריות בקלות
  • מחירים אטרקטיביים ותנאי תשלום גמישים
  • contact us
  • שגיב SEO
  • 0777-920-924
  • 0545-400-440
  • תל אביב, ישראל

קידום אתרים בגוגלגוגל אדוורדס (PPC)בניית אתריםשיתופי פעולהאחר / חזרו אליי