Feature/dynamic field icons

admin/form-builder/assets/js/components/builder-stage-v4-1/template.php

@@ -24,16 +24,20 @@ class="wpuf-group wpuf-rounded-lg hover:!wpuf-bg-green-50 wpuf-transition wpuf-d
                 :class="parseInt(editing_form_id) === parseInt(field.id) ? 'wpuf-bg-green-50 wpuf-border-green-400' : 'wpuf-border-transparent'"
                 class="wpuf-flex wpuf-justify-between wpuf-p-6 wpuf-rounded-t-md wpuf-border-t wpuf-border-r wpuf-border-l wpuf-border-dashed group-hover:wpuf-border-green-400 group-hover:wpuf-cursor-pointer !wpuf-pb-3">
                 <div v-if="!(is_full_width(field.template) || is_pro_preview(field.template))" class="wpuf-w-1/4 wpuf-flex wpuf-items-center">
+                    <span v-if="field.show_icon === 'yes' && field.field_icon && field.icon_position === 'left_label'" 
+                          class="wpuf-field-label-icon wpuf-inline-flex wpuf-items-center wpuf-mr-1">
+                          <i :class="[field.field_icon, 'wpuf-field-icon']"></i>
+                    </span>
                     <label
                         v-if="!is_invisible(field)"
                         :for="'wpuf-' + field.name ? field.name : 'cls'"
                         class="wpuf-block wpuf-text-sm wpuf-font-medium wpuf-leading-6 wpuf-text-gray-900">
                         {{ field.label }} <span v-if="field.required && 'yes' === field.required"
                                                 class="required">*</span>
                     </label>
-                    <span v-if="field.icon && field.show_icon === 'yes'" 
-                          class="wpuf-field-label-icon wpuf-inline-flex wpuf-items-center wpuf-ml-2"
-                          v-html="field.icon">
+                    <span v-if="field.show_icon === 'yes' && field.field_icon && field.icon_position === 'right_label'" 
+                          class="wpuf-field-label-icon wpuf-inline-flex wpuf-items-center wpuf-ml-2">
+                          <i :class="[field.field_icon, 'wpuf-field-icon']"></i>
                     </span>
                 </div>
                 <div

admin/form-builder/assets/js/components/builder-stage/template.php

@@ -17,12 +17,16 @@
             data-source="stage"
         >
             <div v-if="!is_full_width(field.template)" class="wpuf-label">
+                <span v-if="field.show_icon === 'yes' && field.field_icon && field.icon_position === 'left_label'" 
+                      class="wpuf-field-label-icon wpuf-inline-flex wpuf-items-center wpuf-mr-1">
+                      <i :class="[field.field_icon, 'wpuf-field-icon']"></i>
+                </span>
                 <label v-if="!is_invisible(field)" :for="'wpuf-' + field.name ? field.name : 'cls'">
                     {{ field.label }} <span v-if="field.required && 'yes' === field.required" class="required">*</span>
                 </label>
-                <span v-if="field.icon && field.show_icon === 'yes'" 
-                      class="wpuf-field-label-icon wpuf-inline-flex wpuf-items-center wpuf-ml-2"
-                      v-html="field.icon">
+                <span v-if="field.show_icon === 'yes' && field.field_icon && field.icon_position === 'right_label'" 
+                      class="wpuf-field-label-icon wpuf-inline-flex wpuf-items-center wpuf-ml-2">
+                      <i :class="[field.field_icon, 'wpuf-field-icon']"></i>
                 </span>
             </div>
 

admin/form-builder/assets/js/components/field-icon_selector/index.js

@@ -0,0 +1,109 @@
+Vue.component('field-icon_selector', {
+    template: '#tmpl-wpuf-field-icon_selector',
+
+    mixins: [
+        wpuf_mixins.option_field_mixin
+    ],
+
+    mounted: function() {
+        document.addEventListener('click', this.handleClickOutside);
+    },
+
+    data: function () {
+        return {
+            showIconPicker: false,
+            searchTerm: '',
+            icons: wpuf_form_builder.icons || []
+        };
+    },
+
+    computed: {
+        value: {
+            get: function () {
+                return this.editing_form_field[this.option_field.name];
+            },
+
+            set: function (value) {
+                this.$store.commit('update_editing_form_field', {
+                    editing_field_id: this.editing_form_field.id,
+                    field_name: this.option_field.name,
+                    value: value
+                });
+            }
+        },
+
+        selectedIconDisplay: function() {
+            if (this.value) {
+                var icon = this.icons.find(function(item) {
+                    return item.class === this.value;
+                }.bind(this));
+                return icon ? icon.name : this.value;
+            }
+            return 'Select an icon';
+        },
+
+        filteredIcons: function() {
+            var self = this;
+            if (!this.icons.length) return [];
+
+            if (!this.searchTerm) return this.icons;
+
+            var searchLower = this.searchTerm.toLowerCase();
+            return this.icons.filter(function(icon) {
+                return icon.name.toLowerCase().indexOf(searchLower) !== -1 ||
+                       icon.keywords.toLowerCase().indexOf(searchLower) !== -1;
+            });
+        }
+    },
+
+    watch: {
+        'editing_form_field.show_icon': function(newVal, oldVal) {
+            // When show_icon changes from 'no' to 'yes' and field_icon is empty or 'fas fa-0'
+            if (newVal === 'yes' && oldVal === 'no') {
+                if (!this.editing_form_field.field_icon || this.editing_form_field.field_icon === 'fas fa-0') {
+                    // Set a proper default icon based on field type
+                    var defaultIcons = wpuf_form_builder.defaultIcons || {};
+
+                    // Get the field type/template
+                    var fieldType = this.editing_form_field.template || this.editing_form_field.input_type || 'text';
+
+                    // Set the default icon based on field type
+                    var defaultIcon = defaultIcons[fieldType] || 'fa-solid fa-circle';
+
+                    this.$store.commit('update_editing_form_field', {
+                        editing_field_id: this.editing_form_field.id,
+                        field_name: 'field_icon',
+                        value: defaultIcon
+                    });
+                }
+            }
+        }
+    },
+
+    methods: {
+
+        selectIcon: function(iconClass) {
+            this.value = iconClass;
+            this.showIconPicker = false;
+        },
+
+        clearIcon: function() {
+            this.value = '';
+            this.showIconPicker = false;
+        },
+
+        togglePicker: function() {
+            this.showIconPicker = !this.showIconPicker;
+        },
+
+        handleClickOutside: function(event) {
+            if (!this.$el.contains(event.target)) {
+                this.showIconPicker = false;
+            }
+        }
+    },
+
+    beforeDestroy: function() {
+        document.removeEventListener('click', this.handleClickOutside);
+    }
+});

admin/form-builder/assets/js/components/field-icon_selector/template.php

@@ -0,0 +1,67 @@
+<div class="panel-field-opt panel-field-opt-icon-selector">
+    <div class="wpuf-flex">
+        <label v-if="option_field.title" class="!wpuf-mb-0">
+            {{ option_field.title }} <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text>
+        </label>
+    </div>
+
+    <div class="option-fields-section wpuf-relative">
+        <div
+            @click.stop="togglePicker"
+            class="wpuf-w-full wpuf-min-w-full !wpuf-py-[10px] !wpuf-px-[14px] wpuf-text-gray-700 wpuf-font-medium !wpuf-shadow-sm wpuf-border !wpuf-border-gray-300 !wpuf-rounded-[6px] hover:!wpuf-text-gray-700 wpuf-flex wpuf-justify-between wpuf-items-center !wpuf-text-base wpuf-cursor-pointer"
+        >
+            <div class="wpuf-flex wpuf-items-center wpuf-gap-2">
+                <i v-if="value" :class="value" class="wpuf-text-gray-600"></i>
+                <span>{{ selectedIconDisplay }}</span>
+            </div>
+            <div class="wpuf-flex wpuf-items-center wpuf-gap-1">
+                <i v-if="value" @click.stop="clearIcon" class="fa fa-times wpuf-text-gray-500 hover:wpuf-text-red-500 wpuf-cursor-pointer wpuf-p-1"></i>
+                <i :class="showIconPicker ? 'fa-angle-up' : 'fa-angle-down'" class="fa wpuf-text-base"></i>
+            </div>
+        </div>
+
+        <div
+            v-if="showIconPicker"
+            @click.stop
+            class="wpuf-absolute wpuf-bg-white wpuf-border wpuf-border-gray-300 wpuf-rounded-lg wpuf-w-full wpuf-z-50 wpuf-mt-1 wpuf-shadow-lg wpuf-right-0"
+            style="max-height: 300px; min-width: 320px; max-width: 400px;"
+        >
+            <!-- Search -->
+            <div class="wpuf-p-3 wpuf-border-b wpuf-border-gray-200">
+                <input 
+                    v-model="searchTerm"
+                    type="text" 
+                    placeholder="Search icons... (e.g., user, email, home)"
+                    class="wpuf-w-full !wpuf-px-4 !wpuf-py-1.5 wpuf-border wpuf-border-gray-300 wpuf-rounded wpuf-text-sm wpuf-text-gray-900 placeholder:wpuf-text-gray-400 wpuf-shadow focus:!wpuf-shadow-none"
+                >
+                <div class="wpuf-text-xs wpuf-text-gray-500 wpuf-mt-1">
+                    {{ filteredIcons.length }} icons {{ searchTerm ? 'found' : 'available' }}
+                </div>
+            </div>
+
+            <!-- Icons Grid -->
+            <div class="wpuf-icon-grid-container" style="max-height: 210px; overflow-y: auto; padding: 10px;">
+                <!-- Icons Grid -->
+                <div v-if="filteredIcons.length > 0" class="wpuf-icon-grid" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;">
+                    <div
+                        v-for="icon in filteredIcons"
+                        :key="icon.class"
+                        @click="selectIcon(icon.class)"
+                        :class="['wpuf-icon-grid-item', { 'selected': value === icon.class }]"
+                        :title="icon.name + ' - ' + icon.keywords"
+                        style="padding: 10px 5px; text-align: center; border: 1px solid #e0e0e0; border-radius: 4px; cursor: pointer; transition: all 0.2s; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center;"
+                    >
+                        <i :class="icon.class" style="font-size: 18px; margin-bottom: 4px; color: #555;"></i>
+                        <div style="font-size: 10px; color: #666; line-height: 1.2; word-break: break-word; max-width: 100%;">{{ icon.name }}</div>
+                    </div>
+                </div>
+
+                <!-- No Results -->
+                <div v-else class="wpuf-text-center wpuf-py-8 wpuf-text-gray-500">
+                    <div style="font-size: 16px; margin-bottom: 8px;">🔍 No icons found</div>
+                    <div style="font-size: 12px;">Try searching with different keywords like "user", "email", "home"</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

admin/form-builder/assets/js/components/field-radio/template.php

@@ -17,7 +17,6 @@ class="wpuf-block text-sm/6 wpuf-font-medium wpuf-text-gray-900 !wpuf-mb-0">
                     type="radio"
                     :name="'radio_' + editing_form_field.id + '_' + option_field.name"
                     :value="key"
-                    :name="option_field.name"
                     v-model="value"
                     :class="builder_class_names('radio')">
                 {{ option }}
@@ -35,7 +34,6 @@ class="wpuf-flex wpuf-items-center"
                 :name="'radio_' + editing_form_field.id + '_' + option_field.name"
                 :value="key"
                 v-model="value"
-                :name="option_field.name"
                 :class="builder_class_names('radio')">
             {{ option }}
         </label>

admin/form-builder/assets/js/form-builder.js

@@ -185,6 +185,16 @@
 
             // add new form field element
             add_form_field_element: function (state, payload) {
+                // Initialize icon properties for new fields to ensure Vue reactivity
+                if (!payload.field.hasOwnProperty('show_icon')) {
+                    payload.field.show_icon = 'no';
+                }
+                if (!payload.field.hasOwnProperty('field_icon')) {
+                    payload.field.field_icon = '';
+                }
+                if (!payload.field.hasOwnProperty('icon_position')) {
+                    payload.field.icon_position = 'left_label';
+                }
 
                 state.form_fields.splice(payload.toIndex, 0, payload.field);
                 var sprintf = wp.i18n.sprintf;
@@ -729,6 +739,24 @@
         },
 
         mounted: function () {
+            // Ensure all fields have proper default values for icon settings when editing existing forms
+            this.$store.state.form_fields.forEach(function(field) {
+                // If show_icon is not set in the database, default it to 'no'
+                if (field.show_icon === undefined || field.show_icon === null) {
+                    field.show_icon = 'no';
+                }
+
+                // If field_icon is not set in the database, set it to default icon fas fa-0
+                if (field.field_icon === undefined || field.field_icon === null) {
+                    field.field_icon = 'fas fa-0';
+                }
+
+                // If icon_position is not set, default it to 'left_label'
+                if (field.icon_position === undefined || field.icon_position === null) {
+                    field.icon_position = 'left_label';
+                }
+            });
+
             // Check if there are hidden custom taxonomy fields and show warning
             if (wpuf_form_builder.has_hidden_taxonomies && !wpuf_form_builder.is_pro_active) {
                 var self = this;

admin/form-builder/assets/less/form-builder.less

@@ -1537,5 +1537,12 @@ span.pro-icon svg path {
     fill: #fff;
 }
 
+/* Form Builder Field Icons */
+.wpuf-field-label-icon .wpuf-field-icon {
+    font-size: 20px;
+    color: #059669; /* emerald-600 */
+    margin-right: 6px;
+}
+
 @import "builder-responsive.less";
 

assets/css/admin/form-builder.css

@@ -4580,6 +4580,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
   justify-content: space-evenly;
 }
 
+.wpuf-gap-1 {
+  gap: 0.25rem;
+}
+
 .wpuf-gap-12 {
   gap: 3rem;
 }
@@ -6820,6 +6824,11 @@ button.swal2-cancel.swal2-styled.swal2-default-outline {
   color: rgb(5 150 105 / var(--tw-text-opacity));
 }
 
+.hover\:wpuf-text-red-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
 .hover\:wpuf-text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));

assets/css/wpuf-form-builder.css

@@ -1237,6 +1237,13 @@ span.pro-icon svg {
 span.pro-icon svg path {
   fill: #fff;
 }
+/* Form Builder Field Icons */
+.wpuf-field-label-icon .wpuf-field-icon {
+  font-size: 20px;
+  color: #059669;
+  /* emerald-600 */
+  margin-right: 6px;
+}
 @media (min-width: 768px) and (max-width: 991px) {
   #wpuf-form-builder {
     width: 100% !important;