טופס יצירת קשר 7 הוא תוסף וורדפרס פופולרי להפליא ביצירת טפסי קשר. זה מאפשר לך ליצור טפסים ללא קידוד HTML. אלה צורות יכול להציע תכונות כגון CAPTCHA, הורדת קבצים, שדות סקר וכו '...

למרות שסגנון ברירת המחדל של טופס יצירת הקשר 7 מספיק לרוב טופסי הקשר הבסיסיים, לרוב עליך לשנות אותו.

זה משנה את מבנה טופס ברירת המחדל כדי להפוך אותו לנגיש יותר. הוא גם מוסיף את ה- קוד קצר [מגיב] מעל הטופס כך שאם יש שגיאה בעת הגשת הטופס, זה מצוין בטופס.

אם מעולם לא יצרת אתר WordPress, גלה כיצד להתקין בלוג וורדפרס עם לקוח FTP

עבור הטופס הסטנדרטי, הקוד שנוצר על ידי התוסף הוא:

[תגובה] שמך (חובה) [טקסט * מזהה שמך: שמך] דוא"ל שלך (חובה) [דוא"ל * מזהה דוא"ל שלך: דוא"ל שלך ] הנושא שלך [טקסט מזהה נושא שלך: נושא שלך] ההודעה שלך [textarea your-message id: your-message] [שלח "שלח"]

תוספים מסוימים להתאים אישית את טופס יצירת קשר טופס 7

1. טופס יצירת קשר בסגנון 7

התוסף טופס יצירת קשר בסגנון 7 יש מספר סגנונות לבחירה.

למשתמשים בנושא העשרים וחמש עשרה, יש גם סגנון תואם.

כדי להחיל סגנון, עבור אל " צור קשר עם סגנונות> עריכה מהירה בדוק את הטופס בו ברצונך להחיל את הסגנון ולחץ על " עדכון ".

2. טופס יצירת קשר עורות 7

כדי להשתמש Skins טופס ליצירת קשר 7, ליצור חדש טופס יצירת קשר וגלול למטה בעמוד למקטע סקינס. אתה יכול לבחור תבנית וסגנון עבור הטופס שלך.

תוכלו למצוא דגמים המוקדשים לצורותévénements, רישום והודעה.

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

3. עיצוב חומר לטופס יצירת קשר

סגנונות אלה מבוססים על הסגנון חומר עיצוב.

תוסף זה מציע לך למחוק את טופס ברירת המחדל ולהשתמש בקודי הקיצור שלו.

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

צור קשר עם טופס 7 מבחן על חלק נושאי וורדפרס

טופס יצירת קשר עם נושא ColorMag WordPress

לרוב טופס יצירת הקשר 7 יירש את הסגנון של נושא הוורדפרס שלך. זה המקרה עם הנושא Dark אלמוג.

טופס יצירת קשר עם נושא ה- WordPress ColorMag

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

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

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

יש לשנות גם את הצגת הודעות השגיאה / ההצלחה בעת הגשת הטופס כך שיוצגו כהלכה.

ה- GIF המסתובב בעת הגשת הטופס לא הופיע כהלכה, מצאתי אלטרנטיבה ל- Loading.io והפניתי אותו באמצעות CSS.

להלן הטופס המתקבל:

הנה הקוד:

div.wpcf7 {margin: 0; ריפוד: 1.5em; background: url ('your_background_image_url_here'); -webkit-border-radius: 3px; -Moz-border-radius: 3px; border-radius: 3px; } .wpcf7 תווית, .wpcf7-submit {color: white; והצללת טקסט: RGBA 1px 1px 0px (40, 157, 204, 1); .wpcf7-טופס שליטה .Wpcf7 {margin}: 10px 0px 20 0; } .wpcf7 .wpcf7-Send: העבר את העכבר {background: #186d8e; } .wpcf7-form-control: focus {border: 2px solid #289dcc; } div.wpcf7-response-output {background: #F8F8F8; text-align: center; width: 92.5%; שוליים: 1em 0em 1em 0em; -webkit-border-radius: 3px; -Moz-border-radius: 3px; border-radius: 3px; } span.wpcf7-not-valid-tip {background: #F8F8F8; הצג: inline-block; רוחב you אוטומטי; ריפוד: 1%; -webkit-border-radius: 3px; -Moz-border-radius: 3px; border-radius: 3px; } div.wpcf7 .ajax-loader {background-image: url ('your_loading_image_url_here'); width: 50px; גובה: 50px; }

אם אינך צריך לשרבט את הקוד, אנו ממליצים לך לבדוק את הקוד שלנו 10 תוספי וורדפרס ליצירת טופס יצירת קשר בבלוג שלך

גלה גם חלופות פרמיום של 3 שיעזרו לך ליצור טפסי יצירת קשר. 

1. טופס יצירת קשר W8

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

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

הורד | הדגים | אירוח אתרים

2. טופס יצירת קשר

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

תוכל להגדיר את השדות הדרושים, לבחור את המתווה הטוב ביותר של השדות ולהתאים אותה לחלוטין כדי לעודד את הלקוחות או המבקרים שלך להשאיר את ההצעות או ההודעות שלהם.

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

הורד | הדגים | אירוח אתרים

3. Slick Popup Pro

Slick Popup Pro הוא א תוסף וורדפרס די פשוט וקל משקל שממיר כל צורה שנוצרה על ידי התוסף טופס ליצירת קשר 7 בחלון קופץ. היא משתמשת בטופס וממירה אותו לחלון קופץ יפהפה ומלא תגובה.

לטופס הקופץ יכול להיות מספר שימושים הכוללים: טופס איסוף מידע, א טופס יצירת קשר, טופס הרשמה, טופס הצעת מחיר, טופס הצעה / תלונה ואחרים.

הורד | הדגים | אירוח אתרים

משאבים מומלצים

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

• 6 וורדפרס תוספים לאימות על ידי CAPTCHA על הטפסים שלך
• כיצד להוסיף טופס יצירת קשר עם וורדפרס טופס ליצירת קשר 7
• כיצד ליצור טפסים תואמי GDPR על וורדפרס

סיכום

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

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

אבל בינתיים ספר לנו על שלך commentaires והצעות בחלק המוקדש.

...