ברוכים הבאים, היום אנו מתחילים מסורת של טפסי יצירת קשר להורדה בחינם אשר עושים שימוש באג'קס. אנו נפרסם בכל שבוע טופס יצירת קשר בעיצוב אחר להורדה בחינם. ומזמינים אתכם להירשם לרשימת התפוצה שלנו כדי להישאר מעודכנים ובעניינים ובכלל, אנו לא שולחים שום פרסומות! רק עדכונים על מדריכים ומשאבים חדשים מבית שגיב SEO.
תכונות הטופס
- מתאים רק לאתרים תומכי 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]
- פתחו את הקובץ index.php (בקבצי הטופס)
- גזרו את הקוד הבא והדביקו בראש המסמך
- שנו את הטקסטים שיתאימו לאופי הטופס שלכם
[html] <!–===STR======= THE CONTACT FORM =============–> <div id="contactForm01" class="contactForm01"> <div class="p3"> <div class="senderDetails w30 fright ml2"> <div class=""><input type="text" name="senderName" id="senderName" class="hintTextbox" placeholder="השם שלך…" value="" /></div> <div class=""><input type="text" name="senderPhone" id="senderPhone" class="hintTextbox" placeholder="מספר טלפון…" value="" /></div> <div class=""><input type="text" name="senderEmail" id="senderEmail" class="hintTextbox" placeholder="דואר אלקטרוני…" value="" /></div> <div class=""><input type="text" name="senderAddress" id="senderAddress" class="hintTextbox" placeholder="הכתובת שלך…" value="" /></div> </div> <div class="w30 fright ml2"> <ul class="contactReason"> <li><input type="radio" name="subject" id="reasonA" value="סיבה א" /><span class="mr3">סיבה א</span></li> <li><input type="radio" name="subject" id="reasonB" value="סיבה ב" /><span class="mr3">סיבה ב</span></li> <li><input type="radio" name="subject" id="reasonC" value="סיבה ג" /><span class="mr3">סיבה ג</span></li> <li><input type="radio" name="subject" id="reasonD" value="סיבה ד" /><span class="mr3">סיבה ד</span></li> <li><input type="radio" name="subject" id="othereReason" value="נושא אחר" /><span class="mr3">נושא אחר</span></li> </ul> </div> <div class="w32 fright"> <textarea name="" id="mainMsg" class="hintTextbox" placeholder="ספרו לנו במה נוכל לעזור: " ></textarea> </div>
<div id="messageFld" class="mt2" style="display: none;"></div> <div id="contactUsBtn" class="mt2 handHover"><div class="sendButton">שליחה</div></div> </div> </div> <!–===END======= THE CONTACT FORM =============–> [/html]
- הכנסו לתיקייה contactForm
- פתחו את הקובץ pcf.php ושנו את הקוד הבא
[php] $to = 'REPLACE_THIS@WITH_YOUR_EMAIL.COM'; [/php]
- לכתובת האימייל שלכם
[php] $to = 'admin@example.com'; [/php]
לדוגמה: אם נבקש לשנות את "השם שלך…" ל- "שם מלא"
לקוד [html] <div class=""><input type="text" name="senderName" id="senderName" class="hintTextbox" placeholder="שם מלא" value="" /></div> [/html]
שאלות ותשובות
לכל אתר אופי משלו אבל והבעיה יכולה להגרם מסיבות רבות ומשונות אבל הנה רשימה של מספר דברים שהייתי בודק כצעד ראשון.
- שקבצי הג'אווה סקריפט נטענים כהלכה (ראו שאלה הבאה)
- שהאתר שלכם בכלל תומך בPHP
- שלא שיניתם / הוצאתם קבצים מהתיקייה
- ששיניתם את כתובת האימייל מטרה בקובץ pcf.php
לאחר שהוספתם את הקוד פתחו את הדף בו הטמעתם את הסקריפטים ולחצו על ctrl + u. יפתח לכם הקוד ותוכלו ללחוץ על שורת ההכללה כדי לראות אם היא מובילה לקובץ או לדף 404.
נכון, בין הקבצים שאתם מכלילים עבור הטופס יש גם קובץ שמכליל את jQuery. אם אתם כבר מכלילים את jQuery בגרסה סבירה כלומר 1.7 ומעלה אתם לא צריכים להכליל אותו בשנית ותוכלו להוריד שורה זאת בקוד לגמרי.
אהבתם? רוצים עיצוב קצת שונה?
כפי שהצהרתי בתחילת הדף זה הראשון מבין מספר טפסי צור קשר מבוססי PHP אשר עובדים עם אג'קס (מה זה אג'קס?) אשר אנו נציע להורדה והרעיון לתת לכם מספר עיצובים שונים כך שתוכלו להוריד ולעשות שימוש מהיר בטופס צור קשר שמתאים לכם.
ולכן… שווה לחזור בשבוע הבא ובכלל כדי לראות מה התחדש. אם אהבתם נודה לכם אם תפרגנו לנו עם פלוס אחד או לייק. כמו תמיד אתם מוזמנים להגיב עם כל שאלה או טיפ מועיל.
7 תגובות