הפרק השני במסורת "עתיקת יומין" (תנו לזה חודש חודשיים וזה יחשב כך) – והיום הווריאציה השנייה של טופס צור קשר מבוסס PHP ומשולב עם אג'קס עם עיצוב מובנה להורדה בחינם! למי שפספס את הודעת הפתיחה אנו נפרסם ווריאציה עיצובית שונה כך שיהיה לכל מנהל אתר אופציה של ממש כאשר הוא זקוק לטופס יצירת קשר חכם וקל להטמעה.
תכונות הטופס
- מתאים רק לאתרים תומכי PHP
- בגוונים אפור כחול נקי
- טקסט Watermark מוטמע בשדות
- עיצוב רספונסיבי / גמיש לגודל
- בדיקה כי השדות מולאו מוטמע
- מראה תגובה בעת שגיאה
- מראה תגובה בעת הצלחה
- מאפס שדות לאחר משלוח
- שולח מבלי לרענן את הדף
- עובד אחלה עם עברית!
מתקינים את הטופס באתר שלכם
לאחר שתורידו את הטופס אליכם העלו את התיקייה בשלמותה לאתר שלכם. וכעת, נתחיל עם הכללה של קבצי הג'אווה סקריפט וקובץ העיצוב (CSS) אל ראש המסמך / הקובץ בו אתם רוצים להציג את הטופס.
- פתחו את הקובץ index.php (בקבצי הטופס)
- גזרו את הקוד הבא והדביקו בראש המסמך
- שנו את המסלולים כך שיקראו לקבצים כשורה
[html] <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/watermark.js"></script> <script type="text/javascript" src="js/process-contact-form.js"></script> <link rel="stylesheet" type="text/css" href="main.css" media="all" /> [/html]
כעת שיש לנו קבצי JS ממתינים בדף שלנו לטופס נשאר לנו רק להטמיע את הטופס במקום הרצוי. באותו דף בו העתקתם את הקוד עבור קבצי הג'אווה סקריפט תמצאו את הטופס עצמו. גזרו אותו בשלמותו והדביקו במיקום הרצוי
- פתחו את הקובץ index.php (בקבצי הטופס)
- גזרו את הקוד הבא והדביקו בראש המסמך
- שנו את הטקסטים שיתאימו לאופי הטופס שלכם
[html] <!–===STR======= THE CONTACT FORM =============–> <div class="formBox"> <div class="w100 mb3">
<div id="cForm" class="contact-form-container">
<div class="captionText"> <div class="p2 pr6">כתבו לנו ונשוב אליכם תוך זמן קצר</div> </div>
<div class="fix" id="contact-form"> <div class="formLine mb3 w100"> <input type="text" class="text name" value="" placeholder="השם שלך…" id="senderName" name="senderName">
<input type="text" class="text email " value="" placeholder="האימייל שלך…" id="senderEmail" name="senderEmail">
<input type="text" class="text phone ml0" value="" placeholder="הטלפון שלך…" id="senderPhone" name="senderPhone"> </div> <div class="formLine fright w100"> <textarea class="text" cols="30" rows="5" id="senderMsg" name="senderMsg" placeholder="גוף ההודעה…"></textarea> </div> </div>
<div class="sbBox mt2"> <div class="fright w80"><div id="messageFld" class="dnone"></div></div> <div id="contactUsBtn" class="fleft"><div class="button medium handHover" id="Mysubmitted">שליחה</div>
</div> </div> </div> </div> </div> <!–===END======= THE CONTACT FORM =============–> [/html]- הכנסו לתיקייה contactFrom2
- פתחו את הקובץ pcf.php ושנו את הקוד הבא
[php] $to = 'REPLACE_THIS@WITH_YOUR_EMAIL.COM'; [/php]
- לכתובת האימייל שלכם
[php] $to = 'admin@example.com'; [/php]
כפי ששמתם לב בכל שדה כל Watermark – טקסט אשר מנחה את הגולשים מה למלא בכל שדה. אם אתם רוצים לשנות את הטקסט בכל שדה תוכלו לעשות זאת על ידי שינוי הערך של שדה הקלט (הinput) אשר נקרא placeholder.
לדוגמה: אם נבקש לשנות את "השם שלך…" ל- "שם מלא"
לקוד [html] <input type="text" class="text name" value="" placeholder="שם מלא" id="senderName" name="senderName"> [/html]
שאלות ותשובות
לכל אתר אופי משלו אבל והבעיה יכולה להיגרם מסיבות רבות ומשונות אבל הנה רשימה של מספר דברים שהייתי בודק כצעד ראשון.
- שקבצי הג'אווה סקריפט נטענים כהלכה (ראו שאלה הבאה)
- שהאתר שלכם בכלל תומך בPHP
- שלא שיניתם / הוצאתם קבצים מהתיקייה
- ששיניתם את כתובת האימייל מטרה בקובץ pcf.php
לאחר שהוספתם את הקוד פתחו את הדף בו הטמעתם את הסקריפטים ולחצו על ctrl + u. יפתח לכם הקוד ותוכלו ללחוץ על שורת ההכללה כדי לראות אם היא מובילה לקובץ או לדף 404.
נכון, בין הקבצים שאתם מכלילים עבור הטופס יש גם קובץ שמכליל את jQuery. אם אתם כבר מכלילים את jQuery בגרסה סבירה כלומר 1.7 ומעלה אתם לא צריכים להכליל אותו בשנית ותוכלו להוריד שורה זאת בקוד לגמרי.
אהבתם? רוצים עיצוב קצת שונה?
אם עקבתם / שמתם לב אנו בגרסה השנייה של טפסי יצירת קשר להורדה (לאתרי PHP) אשר עובדים עם אג'קס (מה זה אג'קס?). אנו עובדים על גרסאות נוספות, אלגנטיות, משוגעות, צבעוניות וקלאסיות אז בואו לבקר בקרוב או הירשמו לרשימת התפוצה ותקבלו עדכון כאשר הטופס הבא מתפרסם.
בנוסף, אם יש לכם טופס יצירת קשר מושקע ומבוסס אג'קס שאתם רוצים לחלוק עם גולשים אחרים אתם מוזמנים לכתוב לנו ואולי אולי נפרסם אותו. אתם מוזמנים להגיב עם שאלות ובקשות ואל תשכחו לפרגן עם פלוס 1 או איזה LIKE נחמד.
7 תגובות