טופס יצירת קשר עם תוסף 7 הגדרות סגנון

טופס יצירת קשר הוא תכונה אינטגרלית של רוב אתרי האינטרנט. זו הסיבה שיש כל כך הרבה תוספים של טופס יצירת קשר בקטלוג וורדפרס. אחד הפופולריים ביותר הוא Contact Form 7. התוסף מאפשר ליצור טפסים מכל סוג; גמיש מאוד וקל להגדרה; מתפתח שנים רבות ומכיל פיתוחים רבים.

יצירה והצגה של טפסי יצירת קשר

יצירת טפסים בפאנל הניהול

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

הטופס בתמונה נוצר באופן אוטומטי עם הפעלת התוסף.

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

חלק קדמי של האתר

כעת נשמור את המאמר ונראה כיצד נראה הטופס שלנו (באמצעות ערכת הנושא Twenty Sixteen):

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

התאמה אישית של טפסים (יצירת טפסים מורכבים)

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

בשדה העליון - שם הטופס (הוא נראה רק בפאנל הניהול), ציינו שם ברור לכם, למשל: "משוב על האתר", "טופס הגשת עבודה", "טופס משוב" , וכו.

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

ולהלן ארבע לשוניות:

1. תבנית טופס
2. מִכְתָב
3. הגדרות נוספות

בואו נסתכל על כל כרטיסייה בנפרד.

תבנית טופס

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

פריסת טופס

לפריסה, אתה יכול להשתמש בתגי html ובקודים קצרים של תוספים. קודים קצרים מוסיפים שדות טופס, ותגי HTML מאפשרים לך ליצור מבנה HTML מותאם אישית. לדוגמה, טופס ברירת המחדל שלנו נראה כך:

השם שלך (חובה) האימייל שלך (חובה) נושא הוֹדָעָה

וכאשר יוצג בפוסט, הוא יהפוך ל-HTML הזה:

תחביר קוד קצר

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

התג יומר לאחר מכן לשדה טקסט עם קוד HTML:

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

אבל הבנאי לא מאפשר לשנות את ה-shortcode (תוכל ליצור רק קוד קצר שם). ישנן שתי דרכים לשנות את הקוד הקצר:

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

אתה יכול להבין את זה בעצמך עם המעצב.

וכאן נסתכל על התחביר של ה-shortcode.

לדוגמה, שקול תג שדה טקסט עם אפשרויות נוספות:

טֶקסט (נדרש)סוג שדה: טקסט, בחירה, סיסמה, מספר וכו'. (במקרה זה השדה הוא טקסט). קובע לאיזה רכיב טופס התג שלנו יומר, ולכן לאיזה סוג נתונים הוא יקבל. * כוכבית הופכת את השדה לחובה (הטופס לא יוגש ותוצג הודעה שיש למלא את השדה). שם הלקוח (נדרש)שם השדה משמש כתכונת השם בקלט, ומשמש גם בעת יצירת התבנית למכתב שנשלח. id:my-id התכונה id בקלט עם הערך my-id. משמש לקישוט. class:my-class תכונת class בקלט עם הערך my-class. משמש לקישוט. מציין מיקום "הזן שם" Использовать текст "Введите имя" как placeholder. !}

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

סוגי שדות

• שדות טקסט: טקסט, אימייל, טל, כתובת אתר, אזור טקסט
• שדות מספריים: מספר , טווח
• שדות תאריך: תאריך
• תיבות סימון, מכשירי רדיו, רשימות: תיבת סימון, רדיו, בחר
• שדה העלאת קובץ: קובץ
• CAPTCHA: captchac ו-captchar
• סקרים: חידון
• שדה "קבל": קבלה
• כפתור שלח: שלח
• סוג שדה מותאם אישית

תבנית מכתב

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

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

כותרות אותיות:

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

ממי - שם ומייל, ממי הגיע המכתב. בדרך כלל דואר השרת מצוין כאן (לדוגמה [מוגן באימייל]).

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

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

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

גוף המכתב

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

בואו נסתכל על אות ברירת המחדל:

מ:<>נושא: הודעה: -- נשלח מהאתר לימוד תוסף צור קשר 7 (http://test-wp.ru)

היו לנו 4 שדות שהמשתמש מילא. לאחר שליחת המכתב, התגים יהפכו לערכים ונקבל את המכתב הבא:

מאת: דמיטרי נושא: שאלה לגבי טופס יצירת קשר 7 הודעה: שלום! יש לי שאלה לגבי תוסף Contact Form 7. איך אני מגדיר אותו? -- נשלח מהאתר לימוד תוסף צור קשר טופס 7 (http://test-wp.ru)

שדות אופציונליים בגוף האימייל

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

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

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

הודעות בעת שליחת טופס

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

תגיות תבנית דוא"ל אינן פועלות בשדות אלה.

הגדרות נוספות

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

אני אדבר על השימוש בפונקציונליות זו במאמר נפרד.

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

ניווט בדף:

תיאור טופס יצירת קשר וורדפרס 7

2) הפעל את התוסף Contact Form 7 באזור הניהול של וורדפרס.

3) עבור אל הכרטיסייה החדשה שנוצרה, כפי שמוצג באיור:

4) לחץ על הכרטיסייה "הוסף חדש" וציין את שפת ברירת המחדל של הטופס, או בחר את השפה הרצויה

5) ציין את שם טופס יצירת הקשר ולחץ על שמור.

6) כעת יש לנו קוד קצר שניתן להעתיק ולהדביק בפוסט או בסרגל צד על מנת להציג את הטופס - contact-form-7 id="1252" title="טופס מספר 1" (надо взять в квадратные скобки как на рисунке).!}

7) כך נראה הטופס שלנו:

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

כיצד להציג טופס צור קשר 7 בכל מקום בתבנית

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

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

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

הודות לו, יהיו לך בנוסף תיבות כגון:

הגדרת תשובה לטופס יצירת קשר 7

בגרסה החדשה של תוסף CF7 4.4 ומעלה, המפתח ממליץ להיכנס מהשטח (הנה זה על העור למטה)

הכתובת הנכונה התואמת לדומיין שלך. גלוי מהעור, והמלצה זו יוצרת בעיה:

כיצד להשיב למשתמש ממייל?

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

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

להגיב ל:

כמובן, יש להחליף את ה-email-sh שלך בקוד הקיצור של האימייל שלך. ראה את העור למטה:

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

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

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

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

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

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

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

"הגדרות כלליות" - אתה יכול להגדיר את צבע הרקע, רוחב הצורה (מוגדר ב-px, % לא ניסית), עובי הגבול, צורה (מנוקד, מוצק וכו'), צבע, עיגול.

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

"הגדרות כפתור שלח" - הגדרות של כפתור שליחת הטופס. ההגדרות הזמינות הן גודל לחצן, עיגול, צבע, סוג גבול וצבע גבול.

בעיות בשימוש.

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

עד כה, חוץ משינוי ידני של הסגנונות, זה לא הצליח פחות או יותר בצורה הגונה... נס לא קרה.

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

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

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

הגדרת תוסף Contact Form 7 Style

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

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

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

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

כבר דיברתי על זה בעבר, אבל בואו לא נדבר על זה עכשיו, אלא בואו נעבור ישר לשינויים העיצוביים הנדרשים.

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

1. צור קשר עם הכרטיסייה טופס 7 לעריכת הטופס.
2. עמוד באתר עם טופס משוב.
3. עורך עם קובץ CSS פתוח.

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

הוספת שיעורים לטופס יצירת קשר 7.

כשנפתח את הטופס לעריכה, נראה משהו כמו התמונה הבאה:

טופס המשוב הזה ייראה בערך כך:

זה משעמם, יוצא מפרופורציה, ולמען האמת, לא יפה.

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

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

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

קבע את המזהה של הטופס בדף.

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

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

בקוד שנפתח, אנו מחפשים את תחילת הטופס שלנו, זה נראה כך:

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

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

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

עיצוב טופס יצירת קשר 7, עבודה עם הקובץ style.css

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

שנה את צבע הרקע, הזחות והגופן של הטופס.

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

ראשית, נעבור לקובץ style.css, נוסיף את הכללים הראשונים של מזהה הטופס (אתה צריך להוסיף אותו ממש בתחתית הקובץ), במקרה שלי זה wpcf7-f172-p34-o1, אתה צריך החלף את תעודת הזהות שלך:

#wpcf7-f172-p34-o1 (
שוליים: 5 פיקסלים;
ריפוד: 10px;
רקע: #B3AFAF;
font-family: Georgia, "Times New Roman", Times, serif;
צבע: #000;
}

עכשיו בואו נסתכל על הכל ביתר פירוט:

1. בוא נעסוק קודם כל בכניסות. ריפוד חיצוני (מהקצה לתחילת הטופס) - שוליים: 5px, ריפוד פנימי (מתחילת הטופס לאלמנטים הפנימיים) - ריפוד: 10px.
2. המילוי של הטופס או הרקע שלו נקבע על ידי מאפיין הרקע: #B3AFAF, אתה יכול לבחור כל צבע שאתה אוהב פשוט על ידי החלפת הערך.
3. אנו מחליטים על משפחת הגופנים; אם אינך רוצה לשנות אותה, תוכל לדלג על כלל זה (משפחת גופנים: ג'ורג'יה, "Times New Roman", Times, serif).
4. צבע הטקסט נקבע על פי מאפיין הצבע, המוגדר כעת לשחור (צבע: #000).

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

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

בואו נעבור לשדות שלנו, הוסף כניסות:

#wpcf7-f172-p34-o1 p(
margin:5px;
}

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

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

#wpcf7-f172-p34-o1 input,textarea (
גבול: 3px כפול #000;
}

עוד קצת על המסגרת. ערך של 3px הוא רוחב המסגרת, כפול משמש פעמיים (אם אין צורך, אתה יכול להסיר את המילה הזו), #000 צבע המסגרת, אתה יכול גם לבחור משלך.

שנה את רוחב השדות ואת מיקומם.

שם-cf (
לצוף:שמאל;
ריפוד: 2px;
}
קלט ‎.name-cf (
רוחב: 270px;
}
קלט ‎.thems-cf (
רוחב: 100%;
}
.clear-cf (
תנקה את שניהם;
}
‎.text-cf textarea (
רוחב: 100%;
}

עכשיו בואו נסתכל על הכל ביתר פירוט:

1. השיעור הראשון אליו נפנה שם-cfזה שייך לשדות עם שם ואימייל. עבורם הגדרנו מרווח של 2px ( ריפוד: 2 פיקסלים) וזורמים ( לצוף: שמאל) כדי ליישר שני שדות בשורה אחת.
2. לאחר מכן, נתאים את רוחב השדות על ידי הגדרתם לגודל האופטימלי (עבור התבנית שלי) של 270px ( קלט ‎.name-cf ( רוחב: 270px; )). אם השוליים שלך הם עדיין שורה אחת או שהגודל קטן מדי, בחר באפשרות משלך.
3. אנו נגרום לשדה עם שם הנושא למלא את כל רוחב הטופס, מכיוון שייתכן שיש בו יותר טקסט (קלט .thems-cf (רוחב: 100%;)). אם אתה רוצה משלך, נא לציין את הערך המדויק בפיקסלים.
4. הבלוק הבא שהוספנו לטופס נועד לבטל את הזרימה ( קלט ‎.thems-cf (רוחב: 100%; )).
5. בדיוק כמו במקרה הקודם, אנו הופכים את השדה עם טקסט ההודעה לרוחב מלא ( text-cf textarea (רוחב: 100%;)).

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

יישר את כפתור "שלח" למרכז, שנה את הרקע והרוחב.

בוא נלך אל הכפתור שלנו, ניישר אותו למרכז ונוסיף רקע:

שלח-cf (
רוחב: 200 פיקסלים; /*רוחב בלוק*/
גובה: 25 פיקסלים; /*גוֹבַה*/
שוליים: 0 אוטומטי; /* ריפוד שמאל וימין */
}
קלט .submit-cf (
רוחב: 200 פיקסלים;
רקע:#96B195;
}

באופן מסורתי, אני מסביר מה זה מה:

1. הכלל הראשון הוא לקבוע את רוחב וגובה הבלוק בו ימוקם הכפתור ולהציב אותו במרכז הטופס.
2. הכלל השני הוא להגדיר את צבע הרקע של הכפתור ( רקע:#96B195,אם לא תציין שזה יהיה באותו צבע כמו כל שאר השדות), הגדר את רוחב הלחצן ( רוחב: 200 פיקסלים, רצוי שיהיה בגודל זהה לרוחב הבלוק, כדי שהכפתור לא יזוז לצדדים).

אנו שומרים את ההגדרות שלנו ונראה מה קיבלנו:

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

אני מקווה שהמאמר היה שימושי עבורך, אבל אם משהו לא בסדר או שיש לך בעיות, השאר תגובה ואני אנסה לענות (לתקן).