ברוכים הבאים, טופס צור קשר הוא חובה בכל אתר ומנהלי אתרים רבים נתקלים באינספור בעיות עם טפסי צור קשר מכיוון שכולנו אוהבים לחסוך זמן ופשוט להעתיק ולהדביק קוד.
הבעיה האמיתית מתחילה כשאנו רוצים גמישות ואז לרוב נוטים לבזבז יותר זמן בחיפוש אחר מה שאנחנו צריכים. בדף זה נלמד איך לבנות טופס צור בטוח שיעבוד בוודאות ויהיה מותאם לצרכים שלכם ולכן, נעבור במאמר זה על איך בונים טופס צור קשר. בסוף המאמר הוספתי גם את הקבצים של הטופס להורדה בחינם.
בקרוב טפסים מבוססי אגקס וטפסי יצירת קשר מעוצבים (אנחנו עובדים על זה!). הוספנו לאחרונה מספר טפסי יצירת קשר מושקעים ומעוצבים אשר עושים שימוש בטכנולוגיית אג'קס. מומלץ בחום לבדוק אותם – הם מושקעים וחכמים.
יש לכם שאלה? גם בטופס זה ובטפסים החדשים יותר השארנו את טופס התגובות פתוח ואתם מוזמנים לפנות אלינו עם כל שאלה רלוונטית ונשמח לעזור.
בתור התחלה ניצור את הקבצים הדרושים ליצירת הטופס
יש ליצור קובץ שנקרא: 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 הקיים.
<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>
/*** 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;}
/*** 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;}
לשלב הבא – מטפלים בנתונים המתקבלים מהטופס
עכשיו שיש לנו טופס מוכן הגיע הזמן להכין סקריפט אשר יטפל בנתונים מהטופס אז ניצור דף ונקרא לו process-form.php. אני מיקמתי אותי בתוך תיקייה אשר נקראת forms אבל אתם יכולים למקם אותו היכן שתרצו רק תזכרו לשנות את מסלול התיקייה בדף בו נמצא הטופס בשורה "form action="forms/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");
בונים אתר מודרני!
חולמים על אתר חדש בו להוסיף טופס עושים בלחיצה על כפתור? אתר חדש עם מערכת ניהול תוכן שתעשה לכם את החיים קלים יותר? פנו אלינו היום לשיחת ייעוץ בחינם עם בונה אתרים מנוסה כדי לדעת עוד!
- בניית אתרים חכמים ומקצועיים שקל לנהל
- אתרים חכמים עם שלל פונקציות מובנות
- ממשק סטטיסטיקה מתקדם כלול באתר
- אפשרות להוסיף דפים וקטגוריות בקלות
- מחירים אטרקטיביים ותנאי תשלום גמישים
מומחה קידום אתרים 16 בינואר 2014
תודה… אחלה טופס
אחד שיודע 16 בינואר 2014
תודה רבה !!! עברתי הרבה מדריכים בנושא של CONTACT FORM , שהוציאו לי את הנשמה, בזה שמשהו תמיד לא עבד.
המדריך שלך מוסבר בצורה מצוינת , ועובד בנוסף לכל !!!
תודה : )
שגיב SEO 16 בינואר 2014
בכיף… בראש הדף הזה צירפנו גם עוד 3 טפסי יצירת קשר להורדה בחינם בשילוב אג'קס כלומר כאלו שלא מרעננים את הדף בשליחה
וגם עם אימות שדות אז שווה בדיקה.
בהצלחה…
בונה אתרים 16 בינואר 2014
תודה..
חסכת לי זמן על לכתוב טופס חדש
דודי 16 בינואר 2014
אני לא מקבל את המיילים ז"א הוא אומר לי שההודעה נשלחה אבל שאני נכנס למייל לא קיבלתי כלום.
תראה באתר הזה: http://a.sabras.co.il/
העלאתי א הקבצים לשרת,
מה יכולה להיות הבעיה?
תודה
שגיב SEO 16 בינואר 2014
עניתי לך במייל… יש לך אתר וורדפרס ולכן הטופס הזה לא מתאים לך.. אתה צריך את contact form 7 וקצת ידע בcss.. אם תסתבך אתה מוזמן לתקשר איתי במייל או דרך ממשק התגובות כאן.
גידי בן דור 16 בינואר 2014
שלום רב,
אני הכנסתי את הקובץ לשני שרתים שלי אחד בארץ השני בחול וזה שולח לי אימייל
���� �� ��� wrote: ���� 5 ���� �������
גידי בן דור 16 בינואר 2014
בסדר מצאתי את הבעיה זה בהוטמייל לא עובד טוב אבל בג'י מייל עובד טוב
תודה
שגיב SEO 16 בינואר 2014
שמח שהסתדרת.. תתחדש.
בגרסה המודרנית של הוטמייל זה אמור לעבוד אחלה.
אופק 16 בינואר 2014
אני הורדתי את הקוד ושיניתי את המייל למייל שלי וזה לא עובד לי
שגיב SEO 16 בינואר 2014
איפה הטופס יושב? יש דף לראות אותו אונליין?
גבי 16 בינואר 2014
בניתי אתר באמצעות google sites , הצלחתי לשלב את הטופס , תודה .
את קובץ המענה לא הצלחתי לשלב האם יש דרך ?
שגיב SEO 16 בינואר 2014
יופי, שמח שהסתדרת
צריך להגדיר בדף של הטופס (בקוד של הטופס)
לאיזה דף (כתובת URL) הטופס יפנה לאחר שליחה..
ג'נו 16 בינואר 2014
מת על הטופס הזה… נשבע לך בכל פרויקט אני בא להוריד אותו.
הוא עובד לי מצוין עם דפי פייסבוק שאני בונה ללקוחות – תודה רבה!
שגיב SEO 16 בינואר 2014
יופי ג'נו, שמח שאתה מוצא אותו לשימושי.
קובי 16 בינואר 2014
שלום וברכה!
רציתי לשאול איך הצלחת להכניס את הקוד לאתר של גוגל?
כשאני מכניס אותו זה מביא לי רק את השדות למילוי בלי לחצני שלח וכו' ???????
שגיב SEO 16 בינואר 2014
טוב.. קודם אני חייב להודות שמעולם לא ניסיתי לשים טופס כזה באתר של גוגל.. אני רואה ששמת את הטופס בתוך iframe… וזה אומר לי שיש לך איפה לאחסן את הקבצים..
ככה או ככה לא תוכל להעלות את הקובץ PHP לגוגל ותצטרך לשים אותו בשרת שלך שיש לו שרת דואר פנימי אשר יכול לעבד את הבקשה של הטופס אלא אם אתה משתמש בג'אדגט של גוגל ולמרות שתיכננתי לבנות אחד עבור הטופס עדיין לא עשיתי את זה.
כמו כן ונקודתית על הבעיה שיש לך אני חושב שהעתקת את הקוד מהדף כאן למעלה במקום להוריד את הקובץ ולהשתמש בקוד שבתוכו ולכן יש לך הרבה תווים בקוד שנועדו להציג אותו כשורה כאן (באתר שלנו)… תוריד את הקבצים של הטופס מהקישור במאמר ותשתמש בו וזה יציג לך את השדות בצורה נכונה במקום להעתיק את הקוד מההדגמה שעשינו למעלה.
דודי 16 בינואר 2014
הכנת טופס פשוט וטוב לשימוש אך ישנו דבר אחד חשוב שהייתי רוצה לשדרג
ב- process-form.php
כאשר אני מקבל את ה-form למייל שלי
אני מעוניין שכל פרטי השולח יופיעו במייל עצמו
שם – מייל – טלפון – הודעה
כרגע (לפי הטופס הנ"ל) טלפון + מייל מופיעים לא בתוך בסיס המייל.
אשמח לתשובה
דודי
שגיב SEO 16 בינואר 2014
שלום דודי,
אתה יכול לשנות את השדות שנשלחים, להוסיף עוד שדות ולהסיר שדות קיימים.
איך זה עובד?
ניקח לדוגמה את השדה הזה:
אם נשכפל אותו ונשנה את הערכים (לדוגמה:)
ואז נלך ונוסיף את השדה החדש לקוד שקולט את הטופס:
הכל צריך לעבוד לך אחלה.
בצורה כזאת אתה יכול להוסיף שדות כאוות נפשך!
אליהו 16 בינואר 2014
הי שגיב
תודה רבה לך על הטופס נראה ממש מצויין
דבר נוסף כבר חרשתי את כל אתרי האינטרנט האפשריים כדי למצוא סקריפט של המלץ לחבר ככה שאנשים יוכלו להמליץ לאחרים על האתר שלי אבל החיפוש לא ממש הניב תוצאות שום סקריפט לא עבד, אומר ששלח אימייל אבל בבדיקה כלום לא נשלח
אני על סף יאוש ממש, פתאום נתקלתי באתר שלך וחזר לי החיוך לפנים.
יש מצב שאתה מעלה סקריפט כזה שעובד
כל מה שמצאתי לא עובד בכלל
דרך אגב אין ממש מושג ב PHP
תודה מראש
שגיב SEO 16 בינואר 2014
אני ממש עסוק בימים אלו אבל אנסה למצוא את הזמן לעשות משהו כזה בזמן הקרוב.. תרשם לעדכונים הכי פשוט..
אליהו 16 בינואר 2014
הי שגיב
קבלתי את התשובה המהירה שלך לגבי הסקריפט של המלץ לחבר, תודה , אני אמתין שתעלה אותו.
בינתיים השתמשתי בטופס האימייל שפרסמת ,הכנסתי את הטופס לדף קיים, וידאתי שכל הלינקים בין הדפים פועלים, שלחתי אימייל קבלתי הודעה שנשלח אבל כלום לא הגיע לאימייל שלי, דרך אגב שיניתי את האימייל בקובץ ה PHP
לאימייל שלי.
ראיתי שמשהו כבר שאל את השאלה הזאת אבל הוא העלה את הטופס לוורדפרס וזאת היתה הבעיה אצלו, אני מעלה לשרת של yahoo
לפי מיטב ידיעתי הם תומכים ב PHP
אני שולח את הטופס למייל של וואלה
תוכל לעזור לי לפתור את הבעיה
מראש תודה על העזרה שלך
אליהו
שגיב SEO 16 בינואר 2014
אתה בטוח שהטופס מדבר עם הקובץ של השליחה?.. אתה יכול לשלוח לי קישור שאוכל לראות?
אילן 16 בינואר 2014
יש לי אותה בעיה כמו של גידי, לא משנה אם גימייל או הוטמייל זה כותב לי הכל בג'יבריש…
���� �� ��� wrote: ���� 5 ���� �������
למה?
שגיב SEO 16 בינואר 2014
האם גזרת והדבקת את הטופס בתוך הדף שלך? מה הקידוד של הדף שלך?..
תראה בדף המקורי של הטופס את תג המטא שקובע את הקידוד ותקפיד שגם
לדף בו שמת את הטופס צור קשר יש את אותו מטא תג שמצהיר על אותו קידוד שפה.
אילן 16 בינואר 2014
שמתי את המטה שאצלך ועכשיו הג'יבריש השתנה ל:
àéìï wrote: ùìåí ìëí
במקום – ���� �� ��� wrote: ���� 5 ���� �������, שזה אומנם שיפור אך עדיין…
עוד רעיון? אולי קידוד אחר? אם כן, האם אתה יודע איזה קידוד?
תודה רבה!!!
אילן.
אילן 16 בינואר 2014
היי ,
אנא התעלם מהשאלה האחרונה:
הבעיה היתה בהגדרות הקידוד במייל!
תודה רבה רבה!
אילן.
שגיב SEO 16 בינואר 2014
אז הסתדרת? – יופי .. בהצלחה.. 😉
איתי 16 בינואר 2014
אשמח אם תגיד לי איך פתרת את הבעיה
ארנון 16 בינואר 2014
הי שגיב
שאלה שקשורה בעקיפין לטופס
אני רוצה להוסיף כפתור של צרף קובץ כך שאנשים יוכלו לשלוח אלי תמונות מהמחשב שלהם
יש מצב שאתה תתן הדרכה לזה?
אשמח מאוד
תודה ארנון
שגיב SEO 16 בינואר 2014
בהחלט יש מצב.. הייתי דואג לזה עכשיו אבל אני ממש עסוק! (מצטער). הוספתי את הבקשה לרשימת "מדריכים על האש" (בקר כאן) ואנסה להגיע לזה ממש בקרוב.
יונתן 16 בינואר 2014
שלום שגיב
אני יצרתי קובץ הזמנה באתר שלי http://www.example.com/Games.php והוספתי דברים והשתמשתי ב- process-form.php שלך ופשוט שאני לוחץ על שלח זה שולח אותי ל-process-form.php במקום לעבור אותו ולהגיע ל-http://www.example.com/forms/success.html זה גם לא שולח את הפרטים לדוא"ל בשרת Gmail אתה יכול לעזור לי….תודה מראש!
שגיב SEO 16 בינואר 2014
תדביק את הקוד של הטופס ושל process בpastebin
ותגיב (לתגובה הזאת) עם קישורים לקוד ואנסה לעזור
ד"א – זה נשמע כאילו השרת איננו תומך בPHP.
יונתן 16 בינואר 2014
אני אנסה תודה!
ליאונרדו 16 בינואר 2014
שגיב שלום. סליחה מראש על הבורות כי אני לא מתכנת. יש לי דפים asp ודפים htm. האם להעתיק את הקוד לאחד הדפים שלי? אם כן האם יש עוד משהו לעשות?
שגיב SEO 16 בינואר 2014
לרוב, שרתים אינם תומכים גם בASP וגם PHP (אבל לא תמיד).
אתה צריך לבדוק את האחסון שלך או על ידי העלאת קובץ PHP
לניסיון (ואז לבקר בו ולוודא שהוא פועל). שים בו סתם קוד
לבדיקה כמו:
אם זה לא עובד אז הטופס אינו מתאים לאתר שלך כיוון
שהטופס הזה לא מתאים לאתר ASP… זה טופס צור קשר -> PHP
אודליה 16 בינואר 2014
תודה רבה!! זה גאוני ומתאים מעולה לוורדפרס!!
הכי פשוט שיש..
רק להעתיק את הקוד ללשונית של html שמופיע מימין לתיבת הטקסט של העמוד,
אפדייט וזהו.
שגיב SEO 16 בינואר 2014
מוזר מאוד… זה לא אמור לעבוד לך בוורדפרס בלי התאמות
רבות וחוצמזה בשביל מה? פשוט תתקיני את contact form 7
שיתן לך הרבה הרבה יותר אפשרויות.
chezki 16 בינואר 2014
איך אני משנה שהוא יגיע לעמוד מסוים אחרי שזה נשלח בהצלחה?
שגיב SEO 16 בינואר 2014
שנה את השורה האחרונה בקובץ: process-form.php למסלול הרצוי
מרי 16 בינואר 2014
הי, אני מנסה לחבר את עמוד הצור קשר למייל, ניסיתי לעשות כפי שרשמת..
יש עוד איזשהו שלב שצריך לבצע למשל להתחבר לשרות מייל בחברת אחסון או משהו?
אם תוכל להציץ בדף contact ולראות מה לא בסדר זה כל כך יעזור לי
תודה
http://www.bsphoto.co.il/contact.html
שגיב SEO 16 בינואר 2014
קשה לי לדעת מה הבעיה… רוב הפעולה של הטופס קורה בתוך הקובץ PHP שאי אפשר לראות מצד הלקוח.
הדבר הכי חשוב הוא לוודא ש…
1. המסלול אל הקובץ PHP הוא המסלול הנכון (בטופס)
2. השרת שלך תומך בPHP
3. הגדרת את האימייל אליו את רוצה לשלוח.
מרי 16 בינואר 2014
או.קי, איך אני מוודאה את סעיפים 2 ו-3..
לגבי 2 אני מניחה שבאתר של השרת אפשר למצוא אם הם תומכים ב php
אבל מה זה אומר להגדיר מייל?
שגיב SEO 16 בינואר 2014
תסתכלי על הקוד כאן למעלה בדף
1. מסלול נכון בשורה הזאת: <form action="forms/process-form.php" method="post" id="form">
2. אימייל נכון במקטע קוד השני בשורה הזאת: $to = 'info@sagive.co.il';
3. אם השרת תומך בPHP (דוגמה בתגובה קודמת)
מעבר לזה הכל כתוב במאמר… קחי רגע לקרוא אותו לעומק.
אסף 16 בינואר 2014
היי שגיב.
איך אני משנה את צבע הטקסט שמוקלד בתוך הטופס? הוא שתול אצלי בדף נחיתה עם רקע שחור ואז לא רואים את מה שנכתב
שגיב SEO 16 בינואר 2014
בקלות בעזרת CSS… קרוב לוודאי שיש באתר שלך קובץ CSS שקובע את ההגדרות העיצוביות של האתר. בכל זאת, בכדי לערוך את ההגדרות האלו אתה צריך להבין מה אתה כדי שלא לשנות הגדרות עיצוביות של אלמנטים באתר שלך בלי כוונה…
רק לצרכי הדגמה (ואני לא מעודד לעשות שינויים בלי הידע המתאים)… אם הטופס יושב בתוך DIV עם הקלאס main.contactForm הרי שההגדרה המתאימה היא
שדה טקסט בתוך DIV לדוגמה:
אני מציע שתקח רגע ללמוד קצת CSS.. זאת שפה עיצובית שהיא חובה לבוני אתרים (ומנהלי אתרים חרוצים).
מקווה שזה עוזר, בהצלחה…
שגיב SEO
אסף 16 בינואר 2014
עזר בהחלט! הסתדרתי.
תודה רבה על המאמר, הטופס והעזרה בעניין הצבע.
אסף
שגיב SEO 16 בינואר 2014
בכיף אסף.
ממש בקרוב אני מתכוון להעלות עוד מספר טפסי צור קשר עם עיצוב קומפלט
ואפילו טפסי יצירת קשר עם AJAX להורדה באתר.
אתה מוזמן להירשם לרשימת התפוצה ולקבל עדכונים כשזה יקרה (ובכלל יש תכנים טובים).
יהונתן 16 בינואר 2014
אני בדיוק בתהליכים של בניית אתר וניסיתי לעשות אדפטציה של מה שאתה רשמת למבנה הטופס שיש לי באתר.
כשאני לוחץ על כפתור השליחה בטופס (כרגע אני עושה לו טסטים רק מעמוד הבית). אני מקבל את העמוד הבא:
http://www.example.com/process-form.php
מה אני עושה לא בסדר?
שגיב SEO 16 בינואר 2014
מדובר על טופס של "הרשמו לעדכונים"?… נראה שהוא מפנה (בלי לבדוק שדות אמנם) אבל מפנה לעמוד פנימי
1. השרת שלך תומך בPHP?
2. שני הקבצים נמצאים באותה תיקייה בשרת שנקראת forms?
* אם לא צריך לתקן את הכתובת של הקובץ
(ראה שורה 16 למעלה <– הודות לך שדרגתי את הדף והוספתי לו מספרים בשורות לצד הקוד)
עדכן אותי ואנסה לעזור.
יהונתן 16 בינואר 2014
קודם כל, תודה על התשובה המהירה (ועל השעה המאוחרת).
1. השרת תומך.
2. מדובר בקובץ אחד – process-form.php. הנתיב שונה עוד לפני שאמרת… אבל עדיין אני מקבל את אותה הודעה. אמרת שני קבצים, איזה עוד קובץ?
שגיב SEO 16 בינואר 2014
הקובץ בו הטופס עצמו יושב במקרה זה Index.html נכון? זה דף הבית?…
הממ… הטופס עובד להמון אנשים. משהו לא בדיוק כמו שהוא אמור להיות.
לדעתי זה או
1. מסלול שגוי
2. או ששינית את הקובץ שמקבל את המידע
תגיד… העתקת את הקוד או הורדת את הקבצים?
אני חושב מהתגובה על הלחיצה שפשוט שכחת לעטוף את הקוד בפקודה שמגדירה לשרת שמדובר בקוד PHP..
כלומר
<?php
קוד כאן
?>
עדיף שתוריד את הקבצים ותעתיק את הקוד קומפלט מprocess-form.php – רק אל תשכח לשנות את האימייל ולהתאים את הקוד לצרכים שלך.
עדכן אותי אם אתה נתקל בבעיות.
יהונתן 16 בינואר 2014
קודם כל, חשוב לי להגיד אם זה לא היה ברור:
ברור לי שהבעיה היא במשהו שאני עשיתי ושהקובץ המקורי עובד נהדר. אני רואה פה את התגובות, זה קובץ שקיים כבר המון זמן ועובד נהדר.
באמת היה חסר לי בהתחלה את ה- ?php ובסוף את ה-?
זה הרס לי את העיצוב של הטופס אבל זה משהו שאני אסדר… הבעיה היא שטופס עכשיו פשוט לא עושה כלום – לחיצה על כפתור ה"שליחה" לא עושה שום דבר. כנראה שחוסר ההבנה שלי ב-PHP והניסיון להתאים בכל זאת את הקוד לתבנית קיימת שלי בלי שיש לי יותר מידיי ידע או ניסיון גרמו לזה.
תודה על כל העזרה.
שגיב SEO 16 בינואר 2014
נכון.. הטופס כאן ועובד הרבה זמן. אני פשוט "חושב" בקול רם ובגלל זה כללתי את השורה הזאת.
לעניינו..
אולי… תדביק את הקוד של הטופס עצמו (קומפלט בלי כל המסביב)
וגם תדביק את הקוד של המעבד טופס (קובץ הPHP)
באתר http://pastebin.com/
לאחר מכן הגב עם שני הקישורים ואנסה לעזור.
רק תעשה לי טובה ותוודא כי האתר מגיב לPHP – אתה יכול פשוט לעשות איזה
קובץ עם סיומת PHP ותדביק בו את הפקודה שיש כאן. גלוש לעמוד, תעתיק ו..
צרף גם את הגרסה של הPHP לתגובה שלך.
אחלה יום…
שגיב SEO
גלי 16 בינואר 2014
היי שגיב,
יש לי שאלה…אני מנסה לתפוח את הקובץ בתוכנת עריכה (aptana)ומשום מה אני לא מצליחה לשנות את הכותרות…זה כרגע מופיעה לי ככה���� ��� ���, יש לך מושג למה זה קורה?
אני בסך הכל רוצה להוסיף עוד כמה קטגוריות לטופס והוא לא ממש מגיב לי לעברית..
אשמח לעזרה!
תודה רבה!
גלי
שגיב SEO 16 בינואר 2014
העורך בו את משתמשת לא תומך בעברית…
הערה קטנה:
העורך המועדף עלי הוא notepad++ שווה לנסות…
גלי 16 בינואר 2014
תודה על התשובה…
אני משתמש במאק ככה שnotepad לא עובדת בשבילי…אני שומרת את הקבצים בtextedit וזה אמור לעבוד…
עכשיו הצלחתי לגרום לקבצים לעבוד, אבל הבעיה שאני מקבלת למייל את הטופס צור קשר עם הפרטים, שם הוא מופיעה לי בגיבריש…ועכשיו אני לא יודעת מה הבעיה..
בנוסף, המייל מגיע לי לתיקיית ספאם, זה אולי קשור לזה?
תודה רבה
שגיב SEO 16 בינואר 2014
הספאם זה לא קשור – לאיזה אימייל את שולחת / איפה את מקבלת את זה? גימייל?
אאוטלוק שלך? (<– אם כן את צריכה להגדיר את הקידוד באאוטלוק (בכלל מומלץ))
שימי לב לקדד את הדף המדובר כמו בדוגמה שניתן להוריד… עברית שפה קשה!
אלכס 3 במרץ 2014
שלום לכולם..הורדתי את התופס ויש בעיה מוזרה ביותר..
יש 4 שדות..בשדה של המייל צריך למלא את מייל אבל משום מה
זה לא שולח לי כשאני ממלא עם שטרודל@..הכוונה אם אני רושם
alex@wall.com זה לא שולח..אם אני מוריד את השטרודל זה כן שולח..אפילו אם אני רושם קישקוש כלשהו..העיקר שיהיה בלי שטרודל@…אני אשמח לעזרה
שגיב SEO 3 במרץ 2014
מנשמע אלכס?
אתה בטוח שמדובר על הטופס הנוכחי? דווקא בטופס הזה אין שום בדיקות.
מוזר מאוד מאוד… תוכל להדביק את הקוד של של process-form.php
באתר pastebin.com (ולשתף את הקישור איתנו) שנוכל לראות מה קורה שם בקוד?
אלכס 3 במרץ 2014
http://pastebin.com/pissNCnA
אלכס 3 במרץ 2014
אני רוצה לתקן את עצמי…זה כן מראה שזה שולח אבל זה לא מגיע אליי למייל במידה ומשתמשים בשטרודל !
שגיב SEO 4 במרץ 2014
הקוד שקולט את הטופס נראה בסדר… נסה לשלוח לאימייל אחר ולראות מה קורה… אולי האימייל שלך מסנן את האימייל או שולח אותו לספאם?
אלכס 4 במרץ 2014
כן אתה צודק..החלפתי את המייל לגימל ואני כן מקבל את זה בצורה מסודרת..אבל איך אני מאשרמבטל במייל של וואלה את הספאם..כי לא ראיתי את זה בתיקיה בספאם..
שגיב SEO 4 במרץ 2014
לצערי אין לי תשובה לזה… וואלה ממש גרועים בקטע הזה.
הם מסננים מבלי לשאול אף אחד כל מיני אימיילים…
בכל מקרה אני רוצה להוסיף קצת מידע על אבטחה של הטופס.
כרגע הטופס של מסנן שום מידע אשר מתקבל ממנו…
לדוגמה השורה הזאת:
צריכה להפוך לשורה הבאה:
זה אמנם המינימום אבל יסנן לפחות תווי HTML וימיר אותם
מידע נוסף אפשר למצוא באתר PHP הנה קישור לhtmlentities
שווה לבדוק גם טפסים אחרים שהעלינו להורדה. הם כוללים
אימות שדות, שימוש בAJAX (שולח מבלי לרענן את הדף) וכו'..
בהצלחה.
ויקטור 19 ביוני 2014
שלום.
איך אפשר להוסיף לקוד שמערכת תדבוק תקינות נתונים?
שמספר טלפון תקין, אי מייל גם וכן'?
שגיב SEO 19 ביוני 2014
אימות שדות זה נושא שתמיד צריך להתפשר עליו קצת…. מה שכן אפשר לעשות הוא לשנות מעט את הטופס כך שהשדות יהיו יותר מדויקים ואז יהיה לנו יותר קל לבדוק את השדות והמידע שבתוכם.
הנושא הזה עולה הרבה בזמן האחרון בשיחות אל מול לקוחות, מבקרים באתר ומתעניינים… אז – הרמתי את הכפפה ואני מכין ברגעים אלו מאמר על אימות שדות קלט בטפסים.
בגלל שייקח לי זמן לבנות את המאמר הוא עדיין לא באוויר אבל אני מקווה שעד הערב תוכל כבר לבקר בו – שמור לך את הקישור הבא – תוכל לבקר בו ולראות את המאמר נבנה לאורך היום.
קישור:
http://www.sagive.co.il/tutorials/web-design/form-input-verification-php-and-javascript/
שגיב SEO 19 ביוני 2014
ד"א ויקטור… יש עוד 4 טפסים חדשים שעושים שימוש באג'קס ועושים אימות בסיסי…
אז אם אתה צריך משהו עכשיו תבדוק את הקישורים בסיידבר של המאמר.
מירי 1 ביולי 2014
הי שגיב אחלה נהדר תודה!
השאלה היא כרגע הפקודה header("Location: success.html");
מחליפה את החלון של הטופס מה צריך לעשות
אם אני רוצה שלאחר שהטופס נשלח האישור יפתח בחלון הטמל חדש,
שגיב SEO 2 ביולי 2014
דורש כתיבת קוד וניסיון… בעיקרון אפשר להפנות אל העמוד המקורי עם שאילה בתוך הURL
דוגמה: http://www.example.com/contact-us.php?status=success
ואז בעזרת javascript לבדוק אם המשתנה קיים ולהציג הודעה.
הנה: קובץ לדוגמה
לאחר שתורידי אותו, תוציאי מהכיווץ, תפתחי אותו בדפדפן
ואז תוסיפי לסוף הכתובת את המחרוזת ?status=success
לדוגמה:
במקום
שני את הכתובת ל…
אבל!
הדרך הכי טובה היא לעשות את זה בעזרת אג'קס, בצורה כזאת ניתן גם לעשות אימות שדות
ולמזלך יש לנו 5 טפסים חינמיים שעובדים עם אג'קס ומחזירים תשובה לאחר משלוח או אם
יש שדה נדרש ריק.
כשאת גוללת בדף זה תראי בסיידבר קישורים אל הטפסים האלה… בהצלחה.
אסתי 6 באוקטובר 2014
הי,
קודם כל תודה! (:
שנית, העסק לא עובד לי.
עשיתי הכל בדיוק לפי הטקסט (העתקתי) ולא עובד לי.
זה עובד דרך שרת wamp ב-localhost?
שגיב SEO 6 באוקטובר 2014
לא… אין לWAMP ככה ברגיל שרת דואר
גם לי לקח איזה שעתיים בפעם הראשונה להגיע
למסקנה שאולי זה העניין של שרת מקומי 😉
ניתן לבחון את פעילות הטופס רק על שרת רשת
כיוון שאלו מציעים כחלק מהשירות תיבות דוא"ל
ולכן יש להם שרת דואר מובנה.
דוד 13 באוקטובר 2014
שלום
הצלחתי לבסוף להטמיע את הטופס צור קשר באתר
אבל כפתור השליחה לא עובד
אשמח לפיתרון
על מנת להדגים את הבעיה שתלתי את הטופס צור קשר
בעמוד צדדי שלא פעיל כל כך
כדי שלא יפריע בינתיים
http://www.guitarart.co.il/article4.php
דוד 13 באוקטובר 2014
טוב
הצלחתי לסדר את המתג שליחה איך שהוא
ועכשיו נותרו 2 דברים:
1. אחרי ששולחים יש סימנית # בכתובת של העמוד של הטופס שאני לא רוצה שתופיע.
2. אחרי השליחה איך נשארים באותו עמוד עם ניקוי הטופס אוטומטית וכתיבת הודעה בתחתית הטופס שהפרטים התקבלו
בלי לעבור לעמוד אחר
תודה רבה
שגיב SEO 14 באוקטובר 2014
הטופס הזה בנוי בצורה כזאת. אם אתה רוצה טופס חכם יותר ששולח בעזרת אג'קס מבלי לרענן את העמוד ואפילו מאמת שדות (מה שכחו למלא וכו') תוכל למצוא כאן בתפריט הצד קישורים לחמישה טפסי יצירת קשר חלופיים מודרניים יותר.