Changeset 3322961

Timestamp:

07/06/2025 08:59:54 AM (5 months ago)

Author:

wpnoman0

Message:

Updated plugin code and readme for version 1.0.2

Location:

image-select-field-for-elementor-forms/trunk

Files:

• assets/css/isfef-style.css (modified) (7 diffs)
• assets/js/isfef-scripts.js (modified) (1 diff)
• image-select-field-for-elementor-forms.php (modified) (1 diff)
• includes/class-isfeforms-widgets-control.php (modified) (2 diffs)
• readme.txt (modified) (1 diff)

image-select-field-for-elementor-forms/trunk/assets/css/isfef-style.css

@@ +1 @@
+/* add variable color */
+:root {
+    --isfef_theme_color: #0073e6;
+}
+
 .isfef-image-select .elementor-field-subgroup.elementor-subgroup-inline {
     width: 100%;
@@ -8 +13 @@
 }
 
-.elementor-field-type-checkbox:not(.isfef-image-select) input[type="checkbox"] {
-    display: none !important;
+.isfef-modernize-radio-checkbox .elementor-field-type-checkbox:not(.isfef-image-select) input[type="checkbox"],
+.isfef-modernize-radio-checkbox .elementor-field-type-radio:not(.isfef-image-select) input[type="radio"] {
+    /*     display: none !important; */
+    opacity: 0;
+    width: .3px;
 }
 
-.elementor-field-type-checkbox:not(.isfef-image-select) input[type="checkbox"]+label {
+.isfef-modernize-radio-checkbox .elementor-field-type-checkbox:not(.isfef-image-select) input[type="checkbox"]+label,
+.isfef-modernize-radio-checkbox .elementor-field-type-radio:not(.isfef-image-select) input[type="radio"]+label {
     display: inline-block;
-    padding: 10px 20px;
+    padding: 2px 10px;
     background-color: #f3f3f3;
     color: #333;
@@ -23 +32 @@
     font-weight: 500;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    font-size: 15px;
 }
 
-.elementor-field-type-checkbox:not(.isfef-image-select) input[type="checkbox"]+label {
-    display: inline-block;
-    padding: 10px 20px;
-    background-color: #f3f3f3;
-    color: #333;
-    border: 2px solid #ccc;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-weight: 500;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-}
-
-.elementor-field-type-checkbox:not(.isfef-image-select) input[type="checkbox"]:checked+label {
-    background-color: #0073e6;
-    border-color: #0073e6;
+.isfef-modernize-radio-checkbox .elementor-field-type-checkbox:not(.isfef-image-select) input[type="checkbox"]:checked+label,
+.isfef-modernize-radio-checkbox .elementor-field-type-radio:not(.isfef-image-select) input[type="radio"]:checked+label {
+    background-color: var(--isfef_theme_color);
+    border-color: var(--isfef_theme_color);
     color: #fff;
 }
@@ -46 +44 @@
 /* image select */
 .isfef-image-select label {
-    padding: 0 !important;
+    /*     padding: 0 !important; */
     border: 0 !important;
 }
@@ -61 +59 @@
     margin: 5px;
     transition: all 0.3s ease;
+    position: relative;
+}
+
+.isfef-image-select input:checked+label:before {
+    content: '';
+    background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http://www.w3.org/2000/svg%22 version%3D%221.1%22 xmlns:xlink%3D%22http://www.w3.org/1999/xlink%22 width%3D%22512%22 height%3D%22512%22 viewBox%3D%220 0 254000 254000%22 style%3D%22enable-background%3Anew 0 0 512 512%22 xml:space%3D%22preserve%22 fill-rule%3D%22evenodd%22%3E%3Ccircle r%3D%22127000%22 cx%3D%22127000%22 cy%3D%22127000%22 fill%3D%22%23ffffff%22 transform%3D%22matrix(0.69%2C0%2C0%2C0.69%2C39370%2C39370)%22/%3E%3Cg transform%3D%22matrix(1%2C0%2C0%2C1%2C0%2C0)%22%3E%3Cpath fill%3D%22%2348b02c%22 d%3D%22M127000 254000C56871 254000 0 197129 0 127000S56871 0 127000 0s127000 56871 127000 127000-56871 127000-127000 127000zm-17473-104654 76212-76211c2637-2638 6967-2611 9578 0l8642 8642c2611 2611 2611 6968 0 9578l-89509 89510c-1601 1601-3850 2231-5957 1869-1442-181-2833-814-3919-1899l-54525-54525c-2606-2606-2637-6941 0-9579l8642-8642c2638-2637 6941-2637 9579 0z%22 opacity%3D%221%22/%3E%3C/g%3E%3C/svg%3E");
+
+
+    background-size: cover;
+    background-repeat: no-repeat;
+    position: absolute;
+    left: 5px;
+    width: 20px;
+    height: 20px;
+    top: 5px;
 }
 
@@ -78 +91 @@
 
 .isfef-image-select input:checked+label img {
-    box-shadow: 0px 0px 0px 2px #094a94;
+    box-shadow: 0px 0px 0px 2px var(--isfef_theme_color);
 }
 
@@ -89 +102 @@
     row-gap: 10px;
 }
+
+.isfef-image-select label img {
+    padding: 25px;
+}
+
+.isfef-image-select .elementor-field-subgroup label {
+    line-height: 1.4;
+}
+
+.isfef-image-select input+label img {
+    box-shadow: 0px 0px 0px 2px #eee;
+}
+
+.elementor-field-group:not(.isfef-image-select) .elementor-field-subgroup {
+    gap: 6px;
+}
+
+.isfef-modernize-radio-checkbox .elementor-field-type-checkbox:not(.isfef-image-select) input[type="checkbox"]:checked+label,
+.isfef-modernize-radio-checkbox .elementor-field-type-radio:not(.isfef-image-select) input[type="radio"]:checked+label {
+    padding-left: 25px;
+    position: relative;
+}
+
+.isfef-modernize-radio-checkbox .elementor-field-type-checkbox:not(.isfef-image-select) input[type="checkbox"]:checked+label:before,
+.isfef-modernize-radio-checkbox .elementor-field-type-radio:not(.isfef-image-select) input[type="radio"]:checked+label:before {
+    content: '';
+    background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http://www.w3.org/2000/svg%22 version%3D%221.1%22 xmlns:xlink%3D%22http://www.w3.org/1999/xlink%22 width%3D%22512%22 height%3D%22512%22 viewBox%3D%220 0 254000 254000%22 style%3D%22enable-background%3Anew 0 0 512 512%22 xml:space%3D%22preserve%22 fill-rule%3D%22evenodd%22%3E%3Ccircle r%3D%22127000%22 cx%3D%22127000%22 cy%3D%22127000%22 fill%3D%22%23ffffff%22 transform%3D%22matrix(0.69%2C0%2C0%2C0.69%2C39370%2C39370)%22/%3E%3Cg transform%3D%22matrix(1%2C0%2C0%2C1%2C0%2C0)%22%3E%3Cpath fill%3D%22%2348b02c%22 d%3D%22M127000 254000C56871 254000 0 197129 0 127000S56871 0 127000 0s127000 56871 127000 127000-56871 127000-127000 127000zm-17473-104654 76212-76211c2637-2638 6967-2611 9578 0l8642 8642c2611 2611 2611 6968 0 9578l-89509 89510c-1601 1601-3850 2231-5957 1869-1442-181-2833-814-3919-1899l-54525-54525c-2606-2606-2637-6941 0-9579l8642-8642c2638-2637 6941-2637 9579 0z%22 opacity%3D%221%22/%3E%3C/g%3E%3C/svg%3E");
+
+    background-size: cover;
+    background-repeat: no-repeat;
+    position: absolute;
+    left: 5px;
+    width: 16px;
+    height: 16px;
+    top: 25%;
+}

image-select-field-for-elementor-forms/trunk/assets/js/isfef-scripts.js

@@ -3 +3 @@
 
     $(document).ready(function () {
+
+        $("[data-isfef-modernize]").each(function () {
+            var $form = $(this);
+            var imageSelectFields = $form.data("isfef-modernize");
+            console.log(imageSelectFields)
+            if (imageSelectFields == true) {
+                // Add class to the form for modernizing radio and checkbox styles
+                $form.addClass('isfef-modernize-radio-checkbox');
+            }
+        });
 
         $("[data-isfef-images]").each(function () {

image-select-field-for-elementor-forms/trunk/image-select-field-for-elementor-forms.php

@@ -4 +4 @@
  * Plugin name: Image Select Field for Elementor Forms
  * Description: Image Select Field for Elementor Forms is a powerful addon that extends the native Elementor Form widget by adding a custom image selection field. Let your users select options visually through images—perfect for forms that require choices like product styles, services, packages, or preferences.
- * Version:     1.0.1
+ * Version:     1.0.2
  * Author:      WP Noman
  * License:     GPLv2 or later

image-select-field-for-elementor-forms/trunk/includes/class-isfeforms-widgets-control.php

@@ -77 +77 @@
                 'fields'  => $repeater->get_controls(),
             )
+        );
+
+        $element->add_control(
+            'isfeforms_img_icon_adjustment_slider',
+            [
+                'label' => __('Icon Adjustment ( Image Selector )', 'image-select-field-for-elementor-forms'),
+                'type' => \Elementor\Controls_Manager::SLIDER,
+                'size_units' => ['%'],
+                'range' => [
+                    '%' => [
+                        'min' => 0,
+                        'max' => 100,
+                    ],
+                ],
+                'selectors' => [
+                    '{{WRAPPER}} .isfef-image-select input:checked+label:before' => 'top: {{SIZE}}{{UNIT}};',
+                ],
+            ]
+        );
+
+        $element->add_control(
+            'isfeforms_img_icon_size',
+            [
+                'label' => __('Icon Size ( Image Selector )', 'image-select-field-for-elementor-forms'),
+                'type' => \Elementor\Controls_Manager::SLIDER,
+                'size_units' => ['px'],
+                'range' => [
+                    'px' => [
+                        'min' => 0,
+                        'max' => 100,
+                    ],
+                ],
+                'selectors' => [
+                    '{{WRAPPER}} .isfef-image-select input:checked+label:before' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
+                ],
+            ]
+        );
+
+        $element->add_control(
+            'modernize_radio_checkbox',
+            [
+                'label' => esc_html__('Modernize Your Radio/Checkbox', 'textdomain'),
+                'type' => \Elementor\Controls_Manager::SWITCHER,
+                'label_on' => esc_html__('Yes', 'textdomain'),
+                'label_off' => esc_html__('No', 'textdomain'),
+            ]
+        );
+
+        $element->add_control(
+            'isfeforms_icon_adjustment_slider',
+            [
+                'label' => __('Icon Adjustment ( Radio/Checkbox Selector )', 'image-select-field-for-elementor-forms'),
+                'type' => \Elementor\Controls_Manager::SLIDER,
+                'size_units' => ['%'],
+                'range' => [
+                    '%' => [
+                        'min' => 0,
+                        'max' => 100,
+                    ],
+                ],
+                'selectors' => [
+                    '{{WRAPPER}} .elementor-field-type-radio:not(.isfef-image-select) input[type="radio"]:checked+label:before, {{WRAPPER}} .elementor-field-type-checkbox:not(.isfef-image-select) input[type="checkbox"]:checked+label' => 'top: {{SIZE}}{{UNIT}};',
+                ],
+            ]
+        );
+        $element->add_control(
+            'isfeforms_rc_icon_size',
+            [
+                'label' => __('Icon Size ( Radio/Checkbox Selector )', 'image-select-field-for-elementor-forms'),
+                'type' => \Elementor\Controls_Manager::SLIDER,
+                'size_units' => ['px'],
+                'range' => [
+                    'px' => [
+                        'min' => 0,
+                        'max' => 100,
+                    ],
+                ],
+                'selectors' => [
+                    '{{WRAPPER}} .elementor-field-type-radio:not(.isfef-image-select) input[type="radio"]:checked+label:before, {{WRAPPER}} .elementor-field-type-checkbox:not(.isfef-image-select) input[type="checkbox"]:checked+label' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
+                ],
+            ]
+        );
+
+        // color
+        $element->add_control(
+            'isfeforms_icon_color',
+            [
+                'label' => __('Theme Color', 'image-select-field-for-elementor-forms'),
+                'type' => \Elementor\Controls_Manager::COLOR,
+                'selectors' => [
+                    '{{WRAPPER}}' => '--isfef_theme_color: {{VALUE}};',
+                ],
+            ]
         );
 
@@ -111 +204 @@
                     $element->add_render_attribute('_wrapper', [
                         'data-isfef-images' => esc_attr(json_encode($rep_data)),
+                        'data-isfef-modernize' => !empty($settings['modernize_radio_checkbox']) && $settings['modernize_radio_checkbox'] === 'yes' ? 'true' : 'false',
                     ]);
                 }

image-select-field-for-elementor-forms/trunk/readme.txt

@@ -1 +1 @@
 === Image Select Field for Elementor Forms ===
-Contributors: WPNoman0
-Tags: image select field, elementor form, Elementor widgets, widgets for Elementor, elementor addon
-Requires at least: 5.9
-Tested up to: 6.8
-Requires PHP: 7.4
-Stable tag: 1.0.1
-License: GPLv2 or later
-License URI: https://www.gnu.org/licenses/gpl-2.0.html
+Contributors: WPNoman0  
+Tags: elementor addon, image select, visual form field, elementor form field, image radio, elementor form widget, form builder, custom form field, image choice, image options  
+Requires at least: 5.9  
+Tested up to: 6.8  
+Requires PHP: 7.4  
+Stable tag: 1.0.2
+License: GPLv2 or later  
+License URI: https://www.gnu.org/licenses/gpl-2.0.html  
 
-Simple elementor addon to Extend elementor form
+Enhance Elementor Forms with image-based selection options. Add image select fields to your Elementor forms for visual, intuitive form inputs.
 
 == Description ==
 
-**Image Select Field for Elementor Forms** 
-Image Select Field for Elementor Forms is a powerful addon that extends the native Elementor Form widget by adding a custom image selection field. Let your users select options visually through images—perfect for forms that require choices like product styles, services, packages, or preferences.
+<strong>Image Select Field for Elementor Forms</strong> is a lightweight yet powerful addon that adds a visual image-based selection field to the native Elementor Form widget. Allow users to select from custom image options—perfect for choosing products, styles, packages, services, or preferences.
 
-Features:
-- Add Elementor image select field in native Elementor Form widget
+This plugin is ideal for anyone looking to create more interactive and visually engaging forms using Elementor. No need for third-party form builders—this addon works directly within Elementor’s native form widget.
+
+**Use Cases:**
+- Product style or color selection
+- Plan/package comparison
+- Image-based quizzes or surveys
+- Visual service selection
+- Booking options with icons/images
+
+**Key Features:**
+- Seamlessly integrates with Elementor Form widget
+- Adds a custom image select field type
+- Visual and intuitive UX for users
+- Fully responsive and mobile-friendly
+- Easy to use—no coding required
+- Compatible with Elementor Free & Pro
+
+== Installation ==
+
+1. Upload the plugin files to the `/wp-content/plugins/image-select-field-for-elementor-forms` directory, or install the plugin through the WordPress Plugins screen.
+2. Activate the plugin through the ‘Plugins’ menu in WordPress.
+3. Open any page using the Elementor editor.
+4. Add or edit a form using the native Elementor Form widget.
+5. Use the new “Image Select” field under the “Advanced Addons” or “Extra Fields” section.
+
+== Frequently Asked Questions ==
+
+= Where can I find the image select field? =  
+Open the Elementor editor and add the Form widget. You’ll find “Image Select” as a new field type in the form field list.
+
+= Can I use this without Elementor Pro? =  
+No, this plugin extends the native Elementor Form widget, which is available only in Elementor Pro.
+
+= Can I add custom styling to the images? =  
+Yes, you can style the image options using custom CSS or using the Elementor Style tab.
+
+= Elementor editor not loading or crashing? =  
+This can happen due to low server PHP settings. Please increase:
+- PHP memory_limit to at least 512M
+- max_execution_time to at least 300 seconds  
+Contact your hosting provider for help.
+
+== Screenshots ==
+
+1. Image select field in Elementor form editor  
+2. Frontend display of image selection field  
+3. Multiple images with labels as options
 
 == Changelog ==
 
+= 1.0.1 =
 * Initial release
 
+== Upgrade Notice ==
 
-== Installation ==
-
-
-1. Upload the plugin files to the `/wp-content/plugins/image-select-field-for-elementor-forms` directory, or install the plugin through the WordPress plugins screen directly.
-2. Activate the plugin through the 'Plugins' screen in WordPress
-3. (Make your instructions match the desired user flow for activating and installing your plugin. Include any steps that might be needed for explanatory purposes)
-4. Edit an page with elementor and search for Advanced Addon Category
-5. Enjoin the plugin.
-
-
-
-== Frequently Asked Questions ==
-
-= How to use Advanced addon Table? =
-
-Login your WordPress dashboard,  Active Image Select Field for Elementor Forms plugin go page and search widgets.
-
-
-= Elementor editor fails to load or not working? =
-It's due to your servers' PHP settings. Increase your server PHP memory limit from the wp-config.php file or php.ini file.  If you don't have an idea about it. Please contact your hosting provider and ask to increase
-* PHP memory_limit = 512M
-* max_execution_time = 300
+= 1.0.1 =
+First version – adds Image Select Field to Elementor Forms.