Fix: Hidden CSS class removes fields from builder

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

@@ -188,5 +188,58 @@ Vue.component('builder-stage-v4-1', {
                 comp.openFieldPicker();
             }
         },
+
+        hiddenClasses: function() {
+            return [
+                'hidden',           // Tailwind: display: none
+                'wpuf_hidden_field',
+                'screen-reader-text'
+            ];
+        },
+
+        /**
+         * Filter CSS classes to prevent hiding fields in the builder
+         * Removes classes that would make the field invisible or hidden in the backend
+         * while preserving them for frontend rendering
+         *
+         * @param {string} cssClasses - Space-separated CSS class names
+         * @return {string} Filtered CSS classes safe for builder
+         */
+        filter_builder_css_classes: function(cssClasses) {
+            if (!cssClasses || typeof cssClasses !== 'string') {
+                return '';
+            }
+
+            // Split classes, filter out forbidden ones, and rejoin
+            var classes = cssClasses.split(/\s+/).filter(function(className) {
+                return className && this.hiddenClasses().indexOf(className.toLowerCase()) === -1;
+            }.bind(this));
+
+            return classes.join(' ');
+        },
+
+        /**
+         * Check if field has CSS classes that would hide it on the frontend
+         * Used to display a visual indicator in the builder
+         *
+         * @param {string} cssClasses - Space-separated CSS class names
+         * @return {boolean} True if field has hiding CSS classes
+         */
+        has_hidden_css_class: function(cssClasses) {
+            if (!cssClasses || typeof cssClasses !== 'string') {
+                return false;
+            }
+
+            var hiddenClasses = this.hiddenClasses();
+            var classes = cssClasses.toLowerCase().split(/\s+/);
+
+            for (var i = 0; i < hiddenClasses.length; i++) {
+                if (classes.indexOf(hiddenClasses[i]) !== -1) {
+                    return true;
+                }
+            }
+
+            return false;
+        },
     }
 });

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

@@ -14,7 +14,7 @@ class="wpuf-form sortable-list wpuf-py-8">
             :data-index="index"
             data-source="stage"
             :class="[
-                        'field-items', 'wpuf-el', field.name, field.css, 'form-field-' + field.template,
+                        'field-items', 'wpuf-el', field.name, filter_builder_css_classes(field.css), 'form-field-' + field.template,
                         field.width ? 'field-size-' + field.width : '',
                         ('custom_hidden_field' === field.template) ? 'hidden-field' : ''
                     ]"
@@ -24,7 +24,7 @@ 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'" 
+                    <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>
@@ -34,8 +34,16 @@ class="wpuf-field-label-icon wpuf-inline-flex wpuf-items-center wpuf-mr-1">
                         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>
+                        <span v-if="has_hidden_css_class(field.css)"
+                              class="wpuf-inline-flex wpuf-items-center wpuf-ml-2 wpuf-px-2 wpuf-py-0.5 wpuf-rounded wpuf-text-xs wpuf-font-medium wpuf-bg-yellow-100 wpuf-text-yellow-800 wpuf-border wpuf-border-yellow-300"
+                              title="This field will be hidden on the frontend due to CSS class">
+                            <svg class="wpuf-w-3 wpuf-h-3 wpuf-mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
+                            </svg>
+                            Hidden on frontend
+                        </span>
                     </label>
-                    <span v-if="field.show_icon === 'yes' && field.field_icon && field.icon_position === 'right_label'" 
+                    <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>

assets/css/frontend-forms.css

@@ -1794,3 +1794,32 @@ img.wpuf-eye {
   top: 50%;
   transform: translateY(-50%) translateX(-6%);
 }
+/* CSS utility classes for hiding fields on frontend */
+.wpuf-form .hidden,
+.wpuf-form .Hidden,
+.wpuf-form .HIDDEN,
+.wpuf-form .d-none,
+.wpuf-form .D-none,
+.wpuf-form .D-None,
+.wpuf-form .hide,
+.wpuf-form .Hide,
+.wpuf-form .HIDE {
+  display: none !important;
+}
+.wpuf-form .invisible,
+.wpuf-form .Invisible,
+.wpuf-form .INVISIBLE {
+  visibility: hidden !important;
+}
+.wpuf-form .sr-only,
+.wpuf-form .visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}

assets/js-templates/form-components.php

@@ -107,7 +107,7 @@ class="wpuf-form sortable-list wpuf-py-8">
             :data-index="index"
             data-source="stage"
             :class="[
-                        'field-items', 'wpuf-el', field.name, field.css, 'form-field-' + field.template,
+                        'field-items', 'wpuf-el', field.name, filter_builder_css_classes(field.css), 'form-field-' + field.template,
                         field.width ? 'field-size-' + field.width : '',
                         ('custom_hidden_field' === field.template) ? 'hidden-field' : ''
                     ]"
@@ -117,7 +117,7 @@ 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'" 
+                    <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>
@@ -127,8 +127,16 @@ class="wpuf-field-label-icon wpuf-inline-flex wpuf-items-center wpuf-mr-1">
                         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>
+                        <span v-if="has_hidden_css_class(field.css)"
+                              class="wpuf-inline-flex wpuf-items-center wpuf-ml-2 wpuf-px-2 wpuf-py-0.5 wpuf-rounded wpuf-text-xs wpuf-font-medium wpuf-bg-yellow-100 wpuf-text-yellow-800 wpuf-border wpuf-border-yellow-300"
+                              title="This field will be hidden on the frontend due to CSS class">
+                            <svg class="wpuf-w-3 wpuf-h-3 wpuf-mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
+                            </svg>
+                            Hidden on frontend
+                        </span>
                     </label>
-                    <span v-if="field.show_icon === 'yes' && field.field_icon && field.icon_position === 'right_label'" 
+                    <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>

assets/js/wpuf-form-builder-components.js

@@ -375,6 +375,59 @@ Vue.component('builder-stage-v4-1', {
                 comp.openFieldPicker();
             }
         },
+
+        hiddenClasses: function() {
+            return [
+                'hidden',
+                'wpuf_hidden_field',
+                'screen-reader-text'
+            ];
+        },
+
+        /**
+         * Filter CSS classes to prevent hiding fields in the builder
+         * Removes classes that would make the field invisible or hidden in the backend
+         * while preserving them for frontend rendering
+         *
+         * @param {string} cssClasses - Space-separated CSS class names
+         * @return {string} Filtered CSS classes safe for builder
+         */
+        filter_builder_css_classes: function(cssClasses) {
+            if (!cssClasses || typeof cssClasses !== 'string') {
+                return '';
+            }
+
+            // Split classes, filter out forbidden ones, and rejoin
+            var classes = cssClasses.split(/\s+/).filter(function(className) {
+                return className && this.hiddenClasses().indexOf(className.toLowerCase()) === -1;
+            }.bind(this));
+
+            return classes.join(' ');
+        },
+
+        /**
+         * Check if field has CSS classes that would hide it on the frontend
+         * Used to display a visual indicator in the builder
+         *
+         * @param {string} cssClasses - Space-separated CSS class names
+         * @return {boolean} True if field has hiding CSS classes
+         */
+        has_hidden_css_class: function(cssClasses) {
+            if (!cssClasses || typeof cssClasses !== 'string') {
+                return false;
+            }
+
+            var hiddenClasses = this.hiddenClasses();
+            var classes = cssClasses.toLowerCase().split(/\s+/);
+
+            for (var i = 0; i < hiddenClasses.length; i++) {
+                if (classes.indexOf(hiddenClasses[i]) !== -1) {
+                    return true;
+                }
+            }
+
+            return false;
+        },
     }
 });
 

assets/less/frontend-forms.less

@@ -2086,3 +2086,37 @@ img.wpuf-eye {
     top: 50%;
     transform: translateY(-50%) translateX(-6%);
 }
+
+/* CSS utility classes for hiding fields on frontend */
+.wpuf-form {
+    .hidden,
+    .Hidden,
+    .HIDDEN,
+    .d-none,
+    .D-none,
+    .D-None,
+    .hide,
+    .Hide,
+    .HIDE {
+        display: none !important;
+    }
+
+    .invisible,
+    .Invisible,
+    .INVISIBLE {
+        visibility: hidden !important;
+    }
+
+    .sr-only,
+    .visually-hidden {
+        position: absolute !important;
+        width: 1px !important;
+        height: 1px !important;
+        padding: 0 !important;
+        margin: -1px !important;
+        overflow: hidden !important;
+        clip: rect(0, 0, 0, 0) !important;
+        white-space: nowrap !important;
+        border: 0 !important;
+    }
+}

includes/Admin/Forms/Field_Manager.php

@@ -131,7 +131,7 @@
      * @return array
      */
     private function get_custom_fields() {
         // $fields = apply_filters( 'wpuf-form-builder-fields-custom-fields', array(
         $fields = apply_filters(
             'wpuf_form_fields_custom_fields',
             [
@@ -215,13 +215,13 @@
      *
      * @return void
      */
     public function render_fields( $fields, $form_id, $atts = [], $type = 'post', $post_id = NULL ) {
         if ( ! $fields ) {
             return;
         }
         $fields = apply_filters( 'wpuf_render_fields', $fields, $form_id );
         foreach ( $fields as $field ) {
             if ( ! $field_object = $this->field_exists( $field['template'] ) ) {
                 if ( defined( 'WP_DEBUG' && WP_DEBUG ) ) {
                     echo wp_kses_post( '<h4 style="color: red;"><em>' . $field['template'] . '</em> field not found.</h4>' );
                 }
@@ -250,14 +250,14 @@
             $visibility_selected = $form_field['wpuf_visibility']['selected'];
             $visibility_choices  = $form_field['wpuf_visibility']['choices'];
             $show_field          = false;
             if ( $visibility_selected == 'everyone' ) {
                 $show_field = true;
             }
             if ( $visibility_selected == 'hidden' ) {
-                $form_field['css'] .= 'wpuf_hidden_field';
+                $form_field['css'] .= ' wpuf_hidden_field';
                 $show_field        = true;
             }
             if ( $visibility_selected == 'logged_in' && is_user_logged_in() ) {
                 if ( empty( $visibility_choices ) ) {
                     $show_field = true;
                 } else {
@@ -270,13 +270,13 @@
                     }
                 }
             }
             if ( $visibility_selected == 'subscribed_users' && is_user_logged_in() ) {
                 $user_pack = ( new Subscription() )->get_user_pack( get_current_user_id() );
                 if ( empty( $visibility_choices ) && ! empty( $user_pack ) ) {
                     $show_field = true;
                 } else if ( ! empty( $user_pack ) && ! empty( $visibility_choices ) ) {
                     foreach ( $visibility_choices as $pack => $id ) {
                         if ( $user_pack['pack_id'] == $id ) {
                             $show_field = true;
                             break;
                         }