29
טופס צור קשר ב-PHP – הורדה בחינם
פורסם בקטגוריה בניית אתרים על ידי שגיב SEO
27
ברוכים הבאים, טופס צור קשר הוא חובה בכל אתר ומנהלי אתרים רבים נתקלים באינספור בעיות עם טפסי צור קשר מכיוון שכולנו אוהבים לחסוך זמן ופשוט להעתיק ולהדביק קוד.
הבעיה האמיתית מתחילה כשאנו רוצים גמישות ואז לרוב נוטים לבזבז יותר זמן בחיפוש אחר מה שאנחנו צריכים. בדף זה נלמד איך לבנות טופס צור בטוח שיעבוד בוודאות ויהיה מותאם לצרכים שלכם ולכן, נעבור במאמר זה על איך בונים טופס צור קשר. בסוף המאמר הוספתי גם את הקבצים של הטופס להורדה בחינם.
בתור התחלה ניצור את הקבצים הדרושים ליצירת הטופס
דף זה יכיל יכיל את הטופס עצמו בו ימלא הגולש את הפרטים.
כמובן שאפשר לשלב את הקוד בתוך עמוד קיים ולקרוא לו כרצונכם.
דף זה יקלוט את הנתונים שהמבקר באתר יכניס בטופס, יעבד אותם,
יחבר אותם יחדיו ויכין אותם למשלוח אל כתובת הדואר האלקטרוני שנגדיר לו
דף זה יציג הודעה בוצע, אפשר ומומלץ לשלב את ההודעה בדף קיים אשר הוא
חלק מהעיצוב. כמו כן תוכלו לוותר על דף זה וליצור 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>
<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>
</div>
</body>
</html>
הסבר קצר
הקוד המוצג כאן למעלה הוא למעשה קוד של טופס PHP אשר מוטמע בדף HTML. אתם כמובן יכולים לגזור את הטופס ולהטמיע אותו ישירות בתוך עיצוב קיים. הטופס המוגמר (לפני עיצוב) יראה כמו התמונה מצד שמאל (לחצו לתמונה מוגדלת)
על הטופס הזה ניתן להחיל הגדרות CSS כדי לעצב אותו בקלות ולהשפיע על כל חלק בטופס, החל מרקע לטקסט של הכפתורים ועד למסגרת לתיבות הטקסט, רקע לטופס כולו וכו'
לשלב הבא – מטפלים בנתונים המתקבלים מהטופס
עכשיו שיש לנו טופס מוכן הגיע הזמן להכין סקריפט אשר יטפל בנתונים מהטופס אז ניצור דף ונקרא לו 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 = 'info@sagive.co.il';
$subject = "subject: $topic";
$message = "$name wrote: $comments";
$headers = "From: $email";
// שולח אליכם את פרטי הטופס לפי פורמט הפקודה mail()
mail($to, $subject, $message, $headers);
// שנו אל מסלול הדף אליו תרצו להפנות לאחר שליחת ההודעה
header("Location: success.html");
זה הקוד אשר מקבל את הנתונים מהטופס ושולח אותו למייל המוגדר בתוכו. אל תשכחו לשנות את כתובת המייל לכתובת הרצוייה אחרת לא תקבלו שום מייל. כפי שניתן לראות הטופס פשוט וקל מאוד לבנייה והוא עובד מצוין עם עברית. את כל הקבצים של הטופס ניתן להוריד כאן
חולמים על אתר חדש בו להוסיף טופס עושים בלחיצה על כפתור? אתר חדש עם מערכת ניהול תוכן שתעשה לכם את החיים קלים יותר? פנו אלינו היום לשיחת ייעוץ בחינם!
למה כדאי לבחור בשגיב SEO?
- בניית אתרים חכמים ומקצועיים שקל לנהל
- אתרים חכמים עם שלל פונקציות מובנות
- ממשק סטטיסטיקה מתקדם כלול באתר
- אפשרות להוסיף דפים וקטגוריות בקלות
- מחירים אטרקטיביים ותנאי תשלום גמישים
קידום אתרים אורגני במנועי חיפוש בארץ ובעולם, שיווק ומיתוג ברשתות חברתיות, ניהול מסעות פרסום ועוד
הצטרפו לרשימת התפוצה27 תגובות למאמר “טופס צור קשר ב-PHP – הורדה בחינם”
השאר תגובה
חדש באתר
שירותי קידום אתרים
חברת שגיב SEO מתגאה במתן שירות מהשורה הראשונה. יכולתנו במתן שירותי קידום אתרים אורגני לצד שירותי בניית אתרים מעניק לנו סט כלים ייחודי המאפשר להציע פתרונות שיווק באינטרנט, פרסום בגוגל, פרסום בפייסבוק ועוד.
מבין לקוחות חברת שגיב SEO קידום אתרים בגוגל, תוכלו למצוא חברות גדולות ומוכרות בשוק הישראלי, ואף חברות קטנות שהחלו את דרכן באינטרנט, ובזכות קמפיין קידום אתרים מקצועי באינטרנט נהנים כיום ממיקומים גבוהים בגוגל במגוון גדול של מילות מפתח.
שיווק באינטרנט הוא הדרך להצליח בעולם העסקים המודרני! כל מסע שיווק טוב מתחיל עם מקדם אתרים מומחה. פנו אלינו היום לשיחת ייעוץ עם מקדם אתרים מומחה וקבלו הצעת מחיר לקידום אתרים מקצועי עם שגיב SEO קידום אתרים בגוגל
0777-920-924
054-5400-440
מומחה קידום אתרים כתב:
4 בינואר 2011 בשעה 17:47תודה… אחלה טופס
בונה אתרים כתב:
19 בינואר 2011 בשעה 13:15תודה..
חסכת לי זמן על לכתוב טופס חדש
דודי כתב:
10 במרץ 2011 בשעה 0:06אני לא מקבל את המיילים ז"א הוא אומר לי שההודעה נשלחה אבל שאני נכנס למייל לא קיבלתי כלום.
תראה באתר הזה: http://a.sabras.co.il/
העלאתי א הקבצים לשרת,
מה יכולה להיות הבעיה?
תודה
שגיב SEO כתב:
10 במרץ 2011 בשעה 7:52עניתי לך במייל… יש לך אתר וורדפרס ולכן הטופס הזה לא מתאים לך.. אתה צריך את contact form 7 וקצת ידע בcss.. אם תסתבך אתה מוזמן לתקשר איתי במייל או דרך ממשק התגובות כאן.
גידי בן דור כתב:
13 במרץ 2011 בשעה 0:07שלום רב,
אני הכנסתי את הקובץ לשני שרתים שלי אחד בארץ השני בחול וזה שולח לי אימייל
���� �� ��� wrote: ���� 5 ���� �������
גידי בן דור כתב:
13 במרץ 2011 בשעה 0:10בסדר מצאתי את הבעיה זה בהוטמייל לא עובד טוב אבל בג'י מייל עובד טוב
תודה
שגיב SEO כתב:
13 במרץ 2011 בשעה 1:37שמח שהסתדרת.. תתחדש
אופק כתב:
10 באפריל 2011 בשעה 16:38אני הורדתי את הקוד ושיניתי את המייל למייל שלי וזה לא עובד לי
גבי כתב:
4 במאי 2011 בשעה 11:49בניתי אתר באמצעות google sites , הצלחתי לשלב את הטופס , תודה .
את קובץ המענה לא הצלחתי לשלב האם יש דרך ?
שגיב SEO כתב:
4 במאי 2011 בשעה 19:56יופי, שמח שהסתדרת
צריך להגדיר בדף של הטופס (בקוד של הטופס)
לאיזה דף (כתובת URL) הטופס יפנה לאחר שליחה..
ג'נו כתב:
15 בספטמבר 2011 בשעה 0:59מת על הטופס הזה… נשבע לך בכל פרויקט אני בא להוריד אותו.
הוא עובד לי מצוין עם דפי פייסבוק שאני בונה ללקוחות – תודה רבה!
קובי כתב:
1 בנובמבר 2011 בשעה 20:20שלום וברכה!
רציתי לשאול איך הצלחת להכניס את הקוד לאתר של גוגל?
כשאני מכניס אותו זה מביא לי רק את השדות למילוי בלי לחצני שלח וכו'
???????
שגיב SEO כתב:
1 בנובמבר 2011 בשעה 22:28תוסיף קישור שאוכל לראות את הדף המדובר..
קובי כתב:
2 בנובמבר 2011 בשעה 1:11בבקשה !
https://sites.google.com/site/shilatmedia/contact-us
שגיב SEO כתב:
2 בנובמבר 2011 בשעה 10:32טוב.. קודם אני חייב להודות שמעולם לא ניסיתי לשים טופס כזה באתר של גוגל.. אני רואה ששמת את הטופס בתוך iframe… וזה אומר לי שיש לך איפה לאחסן את הקבצים..
ככה או ככה לא תוכל להעלות את הקובץ PHP לגוגל ותצטרך לשים אותו בשרת שלך שיש לו שרת דואר פנימי אשר יכול לעבד את הבקשה של הטופס אלא אם אתה משתמש בג'אדגט של גוגל ולמרות שתיכננתי לבנות אחד עבור הטופס עדיין לא עשיתי את זה.
כמו כן ונקודתית על הבעיה שיש לך אני חושב שהעתקת את הקוד מהדף כאן למעלה במקום להוריד את הקובץ ולהשתמש בקוד שבתוכו ולכן יש לך הרבה תווים בקוד שנועדו להציג אותו כשורה כאן (באתר שלנו)… תוריד את הקבצים של הטופס מהקישור במאמר ותשתמש בו וזה יציג לך את השדות בצורה נכונה במקום להעתיק את הקוד מההדגמה שעשינו למעלה.
דודי כתב:
5 בדצמבר 2011 בשעה 9:13הכנת טופס פשוט וטוב לשימוש אך ישנו דבר אחד חשוב שהייתי רוצה לשדרג
ב- process-form.php
כאשר אני מקבל את ה-form למייל שלי
אני מעוניין שכל פרטי השולח יופיעו במייל עצמו
שם – מייל – טלפון – הודעה
כרגע (לפי הטופס הנ"ל) טלפון + מייל מופיעים לא בתוך בסיס המייל.
אשמח לתשובה
דודי
אליהו כתב:
11 בינואר 2012 בשעה 22:05הי שגיב
תודה רבה לך על הטופס נראה ממש מצויין
דבר נוסף כבר חרשתי את כל אתרי האינטרנט האפשריים כדי למצוא סקריפט של המלץ לחבר ככה שאנשים יוכלו להמליץ לאחרים על האתר שלי אבל החיפוש לא ממש הניב תוצאות שום סקריפט לא עבד, אומר ששלח אימייל אבל בבדיקה כלום לא נשלח
אני על סף יאוש ממש, פתאום נתקלתי באתר שלך וחזר לי החיוך לפנים.
יש מצב שאתה מעלה סקריפט כזה שעובד
כל מה שמצאתי לא עובד בכלל
דרך אגב אין ממש מושג ב PHP
תודה מראש
שגיב SEO כתב:
12 בינואר 2012 בשעה 14:09אני ממש עסוק בימים אלו אבל אנסה למצוא את הזמן לעשות משהו כזה בזמן הקרוב.. תרשם לעדכונים הכי פשוט..
אליהו כתב:
15 בינואר 2012 בשעה 14:50הי שגיב
קבלתי את התשובה המהירה שלך לגבי הסקריפט של המלץ לחבר, תודה , אני אמתין שתעלה אותו.
בינתיים השתמשתי בטופס האימייל שפרסמת ,הכנסתי את הטופס לדף קיים, וידאתי שכל הלינקים בין הדפים פועלים, שלחתי אימייל קבלתי הודעה שנשלח אבל כלום לא הגיע לאימייל שלי, דרך אגב שיניתי את האימייל בקובץ ה PHP
לאימייל שלי.
ראיתי שמשהו כבר שאל את השאלה הזאת אבל הוא העלה את הטופס לוורדפרס וזאת היתה הבעיה אצלו, אני מעלה לשרת של yahoo
לפי מיטב ידיעתי הם תומכים ב PHP
אני שולח את הטופס למייל של וואלה
תוכל לעזור לי לפתור את הבעיה
מראש תודה על העזרה שלך
אליהו
שגיב SEO כתב:
15 בינואר 2012 בשעה 15:43אתה בטוח שהטופס מדבר עם הקובץ של השליחה?.. אתה יכול לשלוח לי קישור שאוכל לראות?
אילן כתב:
17 בינואר 2012 בשעה 10:44יש לי אותה בעיה כמו של גידי, לא משנה אם גימייל או הוטמייל זה כותב לי הכל בג'יבריש…
���� �� ��� wrote: ���� 5 ���� �������
למה?
שגיב SEO כתב:
17 בינואר 2012 בשעה 22:33האם גזרת והדבקת את הטופס בתוך הדף שלך? מה הקידוד של הדף שלך?..
תראה בדף המקורי של הטופס את תג המטא שקובע את הקידוד ותקפיד שגם
לדף בו שמת את הטופס צור קשר יש את אותו מטא תג שמצהיר על אותו קידוד שפה.
אילן כתב:
18 בינואר 2012 בשעה 10:18שמתי את המטה שאצלך ועכשיו הג'יבריש השתנה ל:
àéìï wrote: ùìåí ìëí
במקום – ���� �� ��� wrote: ���� 5 ���� �������, שזה אומנם שיפור אך עדיין…
עוד רעיון? אולי קידוד אחר? אם כן, האם אתה יודע איזה קידוד?
תודה רבה!!!
אילן.
אילן כתב:
18 בינואר 2012 בשעה 10:24היי ,
אנא התעלם מהשאלה האחרונה:
הבעיה היתה בהגדרות הקידוד במייל!
תודה רבה רבה!
אילן.
שגיב SEO כתב:
19 בינואר 2012 בשעה 14:55אז הסתדרת? – יופי .. בהצלחה..
ארנון כתב:
1 בפברואר 2012 בשעה 23:22הי שגיב
שאלה שקשורה בעקיפין לטופס
אני רוצה להוסיף כפתור של צרף קובץ כך שאנשים יוכלו לשלוח אלי תמונות מהמחשב שלהם
יש מצב שאתה תתן הדרכה לזה?
אשמח מאוד
תודה ארנון
שגיב SEO כתב:
3 בפברואר 2012 בשעה 19:11בהחלט יש מצב.. הייתי דואג לזה עכשיו אבל אני ממש עסוק! (מצטער). הוספתי את הבקשה לרשימת "מדריכים על האש" (בקר כאן) ואנסה להגיע לזה ממש בקרוב.