יש מגוון בקשות שלקוחות מבקשים, להלן כמה התאמות נפוצות והקודים הרלוונטיים. ניתן להגדיר את הקודים רוחבי (כל האתר) או לחלופין להוסיף 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; }
אתר מונגש
אנו רואים חשיבות עליונה בהנגשת אתר האינטרנט שלנו לאנשים עם מוגבלויות, וכך לאפשר לכלל האוכלוסיה להשתמש באתרנו בקלות ובנוחות. באתר זה בוצעו מגוון פעולות להנגשת האתר, הכוללות בין השאר התקנת רכיב נגישות ייעודי.
סייגי נגישות
למרות מאמצנו להנגיש את כלל הדפים באתר באופן מלא, יתכן ויתגלו חלקים באתר שאינם נגישים. במידה ואינם מסוגלים לגלוש באתר באופן אופטימלי, אנה צרו איתנו קשר
רכיב נגישות
באתר זה הותקן רכיב נגישות מתקדם, מבית all internet - בניית אתרים. רכיב זה מסייע בהנגשת האתר עבור אנשים בעלי מוגבלויות.