מאז תיקון 13 לחוק הגנת הפרטיות, כל טופס באתר שכולל איסוף מידע אישי חייב להכיל צ’קבוקס להסכמה מדעת של המשתמש.
במקרים מסוימים, במיוחד בעיצוב נקי ומינימליסטי, עדיף שהצ’קבוקס יופיע אחרי כפתור השליחה.
באמצעאות הקוד הבא תעשו את זה בקלות עם CSS פשוט בלבד, בלי לשבור את המבנה של הטופס.
הדביקו את הקוד הבא בלשונית 'מתקדם' של הטופס במקום הייעודי תחת 'CSS מותאם'.
/* הגדרת כפתור השליחה לסדר 1 */
selector .elementor-field-group.elementor-field-type-submit {
order: 2;
}
/* הגדרת שדה ההסכמה לסדר 3 */
selector .elementor-field-group.elementor-field-type-acceptance {
order: 3;
/*border-top: 2px solid #dddddd; /* הקו עצמו */
/*padding-top: 20px; /* מרווח פנימי מתחת לכפתור */
/*margin-top: 5px; /* מרווח חיצוני מתחת לקו */
}
/* איפוס הסדר של כל שאר השדות */
selector .elementor-field-group {
order: 1;
}
במקום ריבוע סימון סטנדרטי, ניצור מתג מודרני (switch) שנראה מעולה גם בנייד וגם בדסקטופ.
הקוד כולל רק כמה שורות CSS וניתן להטמיע בכל אתר.
ע"י לחיצה על מקש F12 במקלדת תפתחו את חלון הקונסול של הדפדפן. תמצאו שם את הריבוע של הצ'קבוקס שבטופס אלמנטור ותחלצו מתוך ה-ID את רצף הספרות והסימנים הייחודיים של ה-ID הספציפי לצ'קבוקס הזה. העתיקו והדביקו לאורך הקוד בכל סלקטור ב-6 מקומות שסימנתי ב- *******
הדביקו את הקוד הבא בלשונית 'מתקדם' של הטופס במקום הייעודי תחת 'CSS מותאם'.
/* 1) מנקים מראה דיפולטי ומכינים את הסוויץ’ */
#form-field-field_******* {
-webkit-appearance: none;
appearance: none;
width: 54px;
height: 30px;
border-radius: 999px;
margin-bottom: -8px;
background: #e0e0e0; /* מצב כבוי: אפור בהיר */
position: relative;
outline: none;
cursor: pointer;
transition: background .35s ease, box-shadow .3s ease;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.1);
}
/* הכדור שבתוך הסוויץ’ */
#form-field-field_*******::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 24px;
height: 24px;
border-radius: 999px;
background: white;
box-shadow: 0 2px 6px rgba(0,0,0,.15);
transition: transform .35s ease, box-shadow .35s ease;
}
/* מצב פעיל (מסומן) – צבעים חזקים עם גרדיאנט */
#form-field-field_*******:checked {
background: linear-gradient(35deg, #4E7CBF, #263C97);
}
#form-field-field_*******:checked::after {
transform: translateX(24px);
}
/* פוקוס נגיש */
#form-field-field_*******:focus-visible {
box-shadow:
0 0 0 3px rgba(255,255,255,.6),
0 0 0 6px rgba(78,124,191,.35);
}
/* הובר קטן */
#form-field-field_*******:hover::after {
box-shadow: 0 3px 10px rgba(0,0,0,.22);
}
נגרום לכפתור להיראות בהיר (לא פעיל) עד שכל השדות סומנו, כולל הצ’קבוקס להסכמה.
ברגע שהכול תקין – הכפתור משנה צבע וניתן לשליחה.
הוסיפו תחת לשונית 'מתקדם' בעריכת הטופס את ה-ID הבא: my-contact-form
הדביקו את הקוד הבא בלשונית 'מתקדם' של הטופס במקום הייעודי תחת 'CSS מותאם'.
/* עיצוב הכפתור כשהוא במצב "לא פעיל" */
#my-contact-form .elementor-button[disabled] {
background-color: #cccccc !important; /* צבע רקע אפור */
color: #666666 !important; /* צבע טקסט עמום */
cursor: not-allowed !important; /* שינוי סמן העכבר לסימן "אין כניסה" */
opacity: 0.7; /* שקיפות קלה */
}
/* (אופציונלי) עיצוב הכפתור כשהוא חוזר להיות פעיל */
#my-contact-form .elementor-button {
transition: all 0.3s ease; /* אנימציה נחמדה למעבר בין המצבים */
}
מיד אחרי הטופס הוסיפו בעמוד ווידג'ט HTML והכניסו בו את הסקריפט הבא:
האתר משתמש בקובצי Cookies כדי לשפר את חוויית הגלישה.
בשימושך באתר, את/ה מאשר/ת את מדיניות הפרטיות שלנו.