diff --git a/admin/form-builder/assets/js/components/builder-stage-v4-1/index.js b/admin/form-builder/assets/js/components/builder-stage-v4-1/index.js index eda337500..7c4d217ba 100644 --- a/admin/form-builder/assets/js/components/builder-stage-v4-1/index.js +++ b/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; + }, } }); diff --git a/admin/form-builder/assets/js/components/builder-stage-v4-1/template.php b/admin/form-builder/assets/js/components/builder-stage-v4-1/template.php index 91635c9c6..1af724a6e 100644 --- a/admin/form-builder/assets/js/components/builder-stage-v4-1/template.php +++ b/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">
- @@ -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 }} * + + + + + Hidden on frontend + - diff --git a/assets/css/frontend-forms.css b/assets/css/frontend-forms.css index 763e68208..5b8b2d27f 100644 --- a/assets/css/frontend-forms.css +++ b/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; +} diff --git a/assets/js-templates/form-components.php b/assets/js-templates/form-components.php index 7001a5830..c343ae5c9 100644 --- a/assets/js-templates/form-components.php +++ b/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">
- @@ -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 }} * + + + + + Hidden on frontend + - diff --git a/assets/js/wpuf-form-builder-components.js b/assets/js/wpuf-form-builder-components.js index e223647e8..251571170 100644 --- a/assets/js/wpuf-form-builder-components.js +++ b/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; + }, } }); diff --git a/assets/less/frontend-forms.less b/assets/less/frontend-forms.less index b4dc7c0dd..af03225b1 100644 --- a/assets/less/frontend-forms.less +++ b/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; + } +} diff --git a/includes/Admin/Forms/Field_Manager.php b/includes/Admin/Forms/Field_Manager.php index daf9a5ca3..339b036d2 100755 --- a/includes/Admin/Forms/Field_Manager.php +++ b/includes/Admin/Forms/Field_Manager.php @@ -254,7 +254,7 @@ public function check_field_visibility( &$form_field ) { $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() ) {