טופס צור קשר להורדה בחינם – גרסה 1 (אג'קס)

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

תכונות הטופס

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

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

הטמיעו את קבצי הג'אווה סקריפט בראש המסמך +

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

  • פתחו את הקובץ index.php (בקבצי הטופס)
  • גזרו את הקוד הבא והדביקו בראש המסמך
  • שנו את המסלולים כך שיקראו לקבצים כשורה
		<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" />
	
הדביקו את הטופס במקום הרצוי +
כעת שיש לנו קבצי JS ממתינים בדף שלנו לטופס נשאר לנו רק להטמיע את הטופס במקום הרצוי. באותו דף בו העתקתם את הקוד עבור קבצי הג'אווה סקריפט תמצאו את הטופס עצמו. גזרו אותו בשלמותו והדביקו במיקום הרצוי

  • פתחו את הקובץ index.php (בקבצי הטופס)
  • גזרו את הקוד הבא והדביקו בראש המסמך
  • שנו את הטקסטים שיתאימו לאופי הטופס שלכם
		<!--===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 =============-->
מגדירים את האימייל שלכם +
כעת שהכל יושב במיקום הרצוי עלינו לעשות מספר שינויים אחרונים כדי שהטופס יעבוד כשורה.

  • הכנסו לתיקייה contactForm
  • פתחו את הקובץ pcf.php ושנו את הקוד הבא
	$to = 'REPLACE_THIS@WITH_YOUR_EMAIL.COM';
	

  • לכתובת האימייל שלכם
	$to = 'admin@example.com';
	

משנים את הטקסטים בשדות +
כפי ששמתם לב בכל שדה כל Watermark – טקסט אשר מנחה את הגולשים מה למלא בכל שדה. אם אתם רוצים לשנות את הטקסט בכל שדה תוכלו לעשות זאת על ידי שינוי הערך של שדה הקלט (הinput) אשר נקרא placeholder.

לדוגמה: אם נבקש לשנות את "השם שלך…" ל- "שם מלא"

 

נשנה את הקוד הבא
		<div class=""><input type="text" name="senderName" id="senderName" class="hintTextbox" placeholder="השם שלך..." value="" /></div>
		

לקוד

		<div class=""><input type="text" name="senderName" id="senderName" class="hintTextbox" placeholder="שם מלא" value="" /></div>
		

שאלות ותשובות

הטופס לא עובד לי - מה לעשות?

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

  • שקבצי הג'אווה סקריפט נטענים כהלכה (ראו שאלה הבאה)
  • שהאתר שלכם בכלל תומך בPHP
  • שלא שיניתם / הוצאתם קבצים מהתיקייה
  • ששיניתם את כתובת האימייל מטרה בקובץ pcf.php
איך בודקים שהקבצים נטענים כשורה

לאחר שהוספתם את הקוד פתחו את הדף בו הטמעתם את הסקריפטים ולחצו על ctrl + u. יפתח לכם הקוד ותוכלו ללחוץ על שורת ההכללה כדי לראות אם היא מובילה לקובץ או לדף 404.

אני כבר טוען jQuery - צריך לטעון שוב?

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

אהבתם? רוצים עיצוב קצת שונה?

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

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

  • אהבתם? שתפו!