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

תיקון באג הוספת p אוטומטי

ב-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;
}