יש מגוון בקשות שלקוחות מבקשים, להלן כמה התאמות נפוצות והקודים הרלוונטיים. ניתן להגדיר את הקודים רוחבי (כל האתר) או לחלופין להוסיף Class ל-Column של formstyle1. אם ההגדרה היא כלל האתר, יש להשתמש ב-wpcf7 במקום ה-formstyle1 כ-Class בקוד ה-CSS.
הגדלת הפונטים והשדה – יש להגדיל גם את הפונטים של מחזיקי המקום, וגם את הפונטים של הטקסט הנכתב:
.formstyle1 input[type="text"], .formstyle1 input[type="tel"], .formstyle1 input[type="email"] { font-size: 24px !important; line-height:50px; }
החלפת הצבע של מחזיק המקום:
.formstyle1 input[type="text"]::placeholder, .formstyle1 input[type="tel"]::placeholder, .formstyle1 input[type="email"]::placeholder { color:#333; }
ניתן להחליף את הצבע של מחזיק המקום (גלובלי) + הצבע של האקסנט של הטופס בהגדרות BeTheme Options > Colors > Contact.
הוספת ריווח לשדות:
.formstyle1 span.wpcf7-form-control-wrap .wpcf7-text, .formstyle1 textarea.wpcf7-form-control.wpcf7-textarea { padding-top:15px; padding-bottom:15px; margin-bottom:20px; }
שינויי גודל, הרחבת כפתור השליחה ל-100%, הרחבת הכפתור: (ניתן לשנות או למחוק חלק לפי הצורך)
.formstyle1 input.wpcf7-submit { width:100%; font-size:30px; line-height:50px; padding-top:15px; padding-bottom:15px; }
מירכוז הכפתור:
.formstyle1 .column.one { text-align:center; }
התאמות גובה שורה + רוחב הכפתור (padding) ועיגול פינות כאופציה:
.formstyle1 input[type=submit] { line-height:250% !important; padding-right:100px; padding-left:100px; border-radius:50px; }
שבירת שורה של הכפתור (אם הטקסט עובר את המסגרת):
.formstyle1 input.wpcf7-submit { white-space:normal; }
הוספת אייקון (למשל חץ) לכפתור השליחה, תתבצע באמצעות הוספת רקע כללי, כך:
.formstyle1 .icon1 input.wpcf7-submit { background:url("http://upgrade.aitech.co.il/wp-content/uploads/2020/10/ArrowLeftForm.png") #fff no-repeat; background-position:5% 25px; }
הוספת צל לכפתור השליחה, יש לבצע באמצעות הקוד הבא: (יש לשים לב לבחור צבע צל התואם לרקע, אין אופציה לשקיפות הצל):
.formstyle1 input.wpcf7-submit { box-shadow: 5px 10px 30px #821446; }
שינויי צבעים של הכפתור של הטופס: (תחת ה-Class של formstyle1)
div.formstyle1 input.wpcf7-submit { background-color:#2bd5f1 !important; } .formstyle1 input.wpcf7-submit:hover { background-color:white !important; color:#3382e2; } .formstyle1 input.wpcf7-submit,.formstyle1 input.wpcf7-submit:hover { -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
הוספת חץ מטה לבחירה מרובה:
select.wpcf7-form-control.wpcf7-select { -webkit-appearance: menulist; }
כדי לשנות את הרוחב של השדה, יש להשתמש ב-one, one-second, one-third, one-fourth כ-Class שמגדיר את הרוחב. (עריכת תחת צור קשר > טפסי יצירת קשר)
ליצירת טופס בחירה מרובה עם מחזיק מקום (תיאור לבחירה המרובה) + שדה חובה:
[select* Q2 first_as_label "Choose One" "Strongly Agree" "Somewhat Agree" "Somewhat Disagree" "Strongly Disagree"]
הסתרת הרקע של השדות (טופס שקוף) – יש להגדיר Class של hideformbkg:
.hideformbkg input[type="text"], .hideformbkg input[type="tel"], .hideformbkg input[type="email"] { background:transparent; color:white; } .hideformbkg input[type="text"]:focus, .hideformbkg input[type="tel"]:focus, .hideformbkg input[type="email"]:focus { background:transparent !important; }
הסתרת הרקע והמסגרת, (טופס פס תחתון) – יש להגדיר Class של bottomlineform:
.bottomlineform input[type="text"], .bottomlineform input[type="tel"], .bottomlineform input[type="email"] { background:transparent; border:none; border-bottom:3px solid #505033; } .bottomlineform input[type="text"]:focus, .bottomlineform input[type="tel"]:focus, .bottomlineform input[type="email"]:focus { background:transparent !important; } .bottomlineform input[type="date"], .bottomlineform input[type="email"], .bottomlineform input[type="number"], .bottomlineform input[type="search"], .bottomlineform input[type="tel"], .bottomlineform input[type="text"], .bottomlineform select, .bottomlineform textarea { box-shadow:none; }
כדי להחליף את הודעת האישור מהתצוגה המודרנית לקלאסית (בלוק ירוק) יש להשתמש בקוד הבא:
.wpcf7 form.sent .wpcf7-response-output { display:block !important; background-color:#46b450; color:white; clear:both; margin-right:0px !important; left:0px !important; }
וכדי להתאים את הבלוק האדום (הודעת שגיאה) – יש להשתמש בקוד הבא:
.wpcf7 form.invalid .wpcf7-response-output { display:block !important; background-color:#ed3b2e; color:white; clear:both; margin-right:0px !important; left:0px !important; border:none !important; }
(הכהייה במקרה של טפסים עם רקע כהה באתר)
input[type="text"]::placeholder, input[type="tel"]::placeholder, input[type="email"]::placeholder,textarea::placeholder { color:#333; } input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus,textarea:focus { color:#fff !important; background-color:#b4b4b4 !important; }
ב-CF7 לעיתים נוצר מצב שלמרות הפיצול של העמודות, כל שדה עובר שורה ואז זה נראה כמו מדרגות. הסיבה היא כי CF7 מוסיף <p> ו-<br> אוטומטית.
הדרך למנוע את זה זה להוסיף את הקוד הבא תחת תוספים > עריכת תוסף, לבחור Contact Form 7 ובקובץ הראשי wp-contact-form-7.php, להוסיף סביב שורה 29 (סוף ההגדרות):
define( 'WPCF7_AUTOP', false );
רפרנס:
https://stackoverflow.com/questions/32539905/contact-form-7-auto-added-p-tags
יש להפעיל את הקוד הבא:
div form div.column .wpcf7-not-valid-tip { right:0px !important; left: auto !important; } body:not(.cf7p-message) span.wpcf7-not-valid-tip:before { left:-5px !important; right: auto !important; }