שאלון מעוצב

יצירת שאלון אינטראקטיבי באמצעות אלמנטור וקצת css

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

הקוד css הבא מגדיר את העיצוב של ה RADIO BUTTONS
מומלץ לתת ID לטופס ולהוסיף אותו לסלקטורים כדי שזה לא יחול על טפסים אחרים באתר

				
					    .elementor-field-subgroup .elementor-field-option input[type="radio"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

    .elementor-field-subgroup .elementor-field-option label {
        display: inline-block;
        padding: 15px 15px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        background-color: white;
        user-select: none;
    }

הקוד css הבא מגדיר את העיצוב של ה RADIO BUTTONS כאשר הוא נבחר

				
					    .elementor-field-subgroup .elementor-field-option input[type="radio"]:checked + label {
        background-color: #f0f0f0;
        border-style: solid;
        border-color: #D5D8DC;
        border-width: 1px;
    }

    /* Hover state */
    .elementor-field-subgroup .elementor-field-option label:hover {
        background-color: white;
    }

אם מוסיפים אייקון תמונה אפשר להוסיף את ה CSS הזה כדי למרכז אותו לטקסט

				
					.elementor-field-option img {
    vertical-align: middle;
}

קוד CSS המלא:

				
					/* Elementor Radio Button Styling */

    .elementor-field-subgroup .elementor-field-option input[type="radio"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

    .elementor-field-subgroup .elementor-field-option label {
        display: inline-block;
        padding: 15px 15px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        background-color: white;
        user-select: none;
    }

/* Checked styling */
    .elementor-field-subgroup .elementor-field-option input[type="radio"]:checked + label {
        background-color: #f0f0f0;
        border-style: solid;
        border-color: #D5D8DC;
        border-width: 1px;
    }

/* center an image to text */
.elementor-field-option img {
    vertical-align: middle;
}

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

				
					<img decoding="async" src="https://test.co.il/wp-content/uploads/pic.png" style="width:20px" > בחירה א
 <img decoding="async" src="https://test.co.il/wp-content/uploads/img.png" style="width:20px" > בחירה ב

בכדי להוסיף אייקון רגיל של Font Awesome יש להוסיף קוד האייקון לצד אפשרויות הבחירה ככה:

				
					<i class="fa fa-suitcase"></i> בחירה א
<i class="fa fa-plane"></i> בחירה ב

תפריט

Better Site

שאלון מעוצב

יצירת שאלון אינטראקטיבי באמצעות אלמנטור וקצת css

ליצירת קשר השאירו פרטים כאן

השאר פרטים ואחזור אליך בהקדם

Better Site