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

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

תכונות הטופס

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

טופס יצירת קשר 03

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

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

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

  • פתחו את הקובץ index.php (בקבצי הטופס)
  • גזרו את הקוד הבא והדביקו בראש המסמך / הדף שלכם
  • שנו את המסלולים כך שיקראו לקבצים כשורה
			<script type="text/javascript" src="js/jquery-1.9.1.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 class="formBox mt5 mr5">
				<div class="w100">
					<div id="cForm" class="p5">
						<div class="formLine mb3"><input type="text" name="senderName" id="senderName" placeholder="השם שלך..." class="w100 brad5" /></div>
						<div class="formLine mb3"><input type="text" name="senderEmail" id="senderEmail" placeholder="האימייל שלך..." class="w100 brad5" /></div>
						<div class="formLine mb3"><input type="text" name="senderPhone" id="senderPhone" placeholder="הטלפון שלך..." class="w100 brad5" /></div>
						<div class="formLine mb3">
							<select name="senderSubject" id="senderSubject" class="w100 brad5">
								<option value="">בחרו סיבת פנייה</option>
								<option value="reasonA">בניית אתרי וורדפרס</option>
								<option value="reasonB">קידום אתרים בגוגל</option>
								<option value="reasonC">מסע פרסום בגוגל</option>
								<option value="reasonD">מסע פרסום בפייסבוק</option>
								<option value="reasonE">סיבה אחרת / צרו קשר</option>
							</select>
						</div>
						<div class="formLine mb2"><textarea name="senderMsg" id="senderMsg" cols="30" rows="10" placeholder="ההודעה שלך..." class="senderMsg w100 brad5"></textarea></div>
						
						
<div id="messageFld" class="dnone brad5"></div>
<div id="contactUsBtn" class="ml1 mt3"><div class="submitBtn handHover" id="submitBtn">שליחה</div>
</div> </div> </div>
</div> <!--===END======= THE CONTACT FORM =============-->

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

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

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

משנים את הטקסטים בשדות +

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

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

 

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

לקוד

			<div class="formLine mb3"><input type="text" name="senderName" id="senderName" placeholder="שם מלא" class="w100 brad5" /></div>
			

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

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

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

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

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

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

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

בקרוב עוד גרסאות ועיצובים שונים

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

אם אתם רוצים לדעת בעת פרסום טופס חדש הירשמו לרשימת התפוצה שלנו ותקבלו עדכון ישירות לתיבת האימייל שלכם (מילה של סחבק, אפס פרסומות!). אם אהבתם, הורדתם והשתמשתם נודה לכם אם תפרגנו לנו עם +1, או LIKE או סתם מילה טובה. כמו תמיד אתם מוזמנים להגיב עם כל שאלה ונשמח לעזור.