# contact-forms/2.2.4/assets/js/admin/form-fields.js

Contact Forms by Cimatti, version 2.2.4. 581 lines.

- Page: https://pluginprobe.com/plugins/contact-forms/2.2.4/code/assets/js/admin/form-fields.js
- Raw: https://pluginprobe.com/plugins/contact-forms/2.2.4/raw/assets/js/admin/form-fields.js
- Modified: 2026-05-25T14:50:52+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/contact-forms/2.2.4/code/assets/js/admin/form-fields.js#L10-L20`.

```javascript
var accuaWidgets = {};
(function($) {

accuaWidgets = {

    init : function() {
        var rem, sidebars = $('div.widgets-sortables'), isRTL = !! ( 'undefined' != typeof isRtl && isRtl ),
            margin = ( isRtl ? 'marginRight' : 'marginLeft' ), the_id;
        
        //Evento per widget-action (aggiunto in modalità "live")
        // Uses CSS class toggle instead of jQuery slideDown/slideUp
        $(document).on('click', 'a.widget-action', function(){
            var $action = $(this),
                widget = $action.closest('div.widget'),
                $inside = widget.find('.widget-inside'),
                isOpen = widget.hasClass('open');

            if ( !isOpen ) {
                // Opening: add .open class, fix labels, update ARIA
                accuaWidgets.fixLabels(widget);
                widget.addClass('open');
                // Remove any inline display style (from jQuery .hide() during drag)
                $inside.css('display', '');
                $action.attr('aria-expanded', 'true');
            } else {
                // Closing: remove .open class, update ARIA
                widget.removeClass('open');
                $action.attr('aria-expanded', 'false');
            }
            return false;
        });

        //Click sul bottone di salvataggio
        // $('input.widget-control-save').live('click', function(){
        $(document).on('click', 'input.widget-control-save', function(){
            var $button = $(this);
            var originalText = $button.val();
            
            // Add saving state with "Saving..." text
            $button.addClass('accua-saving-active').val(accua_forms_i18n.saving || 'Saving...');
            
            accuaWidgets.save( $button.closest('div.widget'), 0, 1, 0, function(success) {
                // Restore button text immediately
                $button.val(originalText);
                
                if (success) {
                    // Show success state
                    $button.removeClass('accua-saving-active').addClass('accua-saved-active');
                    
                    // Remove success state after 1.5 seconds
                    setTimeout(function() {
                        $button.removeClass('accua-saved-active');
                    }, 1500);
                } else {
                    // Show error state
                    $button.removeClass('accua-saving-active').addClass('accua-error');
                    
                    // Remove error state after 2 seconds
                    setTimeout(function() {
                        $button.removeClass('accua-error');
                    }, 2000);
                }
            });
            return false;
        });

        //Click sul bottone di rimozione
        //$('a.widget-control-remove').live('click', function(){
        $(document).on('click', 'a.widget-control-remove', function(){
            accuaWidgets.save( $(this).closest('div.widget'), 1, 1, 0 );
            return false;
        });

        //Click sul bottone di chiusura
        //$('a.widget-control-close').live('click', function(){
        $(document).on('click', 'a.widget-control-close', function(){
            accuaWidgets.close( $(this).closest('div.widget') );
            return false;
        });

        // Click "+" button to add field to form
        $(document).on('click', '#widget-list a.widget-add-action', function(e){
            e.preventDefault();
            var widget = $(this).closest('div.widget');
            accuaWidgets.addFieldToForm(widget);
        });

        // Refresh Preview link for Custom HTML fields
        $(document).on('click', 'a.accua-refresh-preview', function(e){
            e.preventDefault();
            var widget = $(this).closest('div.widget');
            accuaWidgets.save( widget, 0, 0, 0, function(success) {
                if (success) {
                    accuaWidgets.refreshPreviewWithCurrentOrder();
                }
            });
        });

        // Auto-save + preview refresh when field options change
        // Only for widgets inside the form area (not the available-widgets sidebar)
        var previewDebounceTimers = {};

        function saveAndRefreshPreview(widget) {
            accuaWidgets.saveSilent(widget, function(success) {
                if (success) {
                    accuaWidgets.refreshPreviewWithCurrentOrder();
                }
            });
        }

        function debouncedSaveAndRefresh(widget, delay) {
            var widgetId = widget.attr('id');
            if (previewDebounceTimers[widgetId]) {
                clearTimeout(previewDebounceTimers[widgetId]);
            }
            previewDebounceTimers[widgetId] = setTimeout(function() {
                delete previewDebounceTimers[widgetId];
                saveAndRefreshPreview(widget);
            }, delay);
        }

        // Immediate change: checkboxes, selects
        $(document).on('change', 'div.widgets-sortables .widget-content select, div.widgets-sortables .widget-content input[type="checkbox"]', function() {
            var widget = $(this).closest('div.widget');
            saveAndRefreshPreview(widget);
        });

        // Debounced change: text inputs and textareas (800ms delay)
        $(document).on('input', 'div.widgets-sortables .widget-content input[type="text"], div.widgets-sortables .widget-content textarea', function() {
            var widget = $(this).closest('div.widget');
            debouncedSaveAndRefresh(widget, 800);
        });

        //Impostazione titolo e apertura widget se c'è un errore
        sidebars.children('.widget').each(function() {
            accuaWidgets.appendTitle(this);
            if ( $('p.widget-error', this).length )
                $('a.widget-action', this).click();
        });

        //Trascinabilità dei widget nella lista
        $('#widget-list').children('.widget').draggable({
            connectToSortable: 'div.widgets-sortables',
            handle: '> .widget-top > .widget-title',
            distance: 2,
            helper: 'clone',
            zIndex: 5,
            containment: 'document',
            start: function(e,ui) {
                accuaWidgets.fixWebkit(1);
                ui.helper.find('div.widget-description').hide();
                the_id = this.id;
            },
            stop: function(e,ui) {
                if ( rem )
                    $(rem).hide();
                rem = '';
                accuaWidgets.fixWebkit();
            }
        });

        //Ordinabilità dei widget
        sidebars.sortable({
            placeholder: 'widget-placeholder',
            items: '> .widget',
            handle: '> .widget-top > .widget-title',
            cursor: 'move',
            distance: 2,
            containment: 'document',
            start: function(e,ui) {
                accuaWidgets.fixWebkit(1);
                ui.item.children('.widget-inside').hide();
                ui.item.css({margin:'', 'width':''});
            },
            stop: function(e,ui) {
                // Mark form as having unsaved changes
                if (window.accuaFormsEditorDirty) { window.accuaFormsEditorDirty.mark(); }

                if ( ui.item.hasClass('ui-draggable') && ui.item.data('draggable') )
                    ui.item.draggable('destroy');

                if ( ui.item.hasClass('deleting') ) {
                    accuaWidgets.save( ui.item, 1, 0, 1 ); // delete widget
                    ui.item.remove();
                    return;
                }

                var add = ui.item.find('input.add_new').val(),
                    n = ui.item.find('input.multi_number').val(),
                    id = the_id,
                    sb = $(this).attr('id');

                ui.item.css({margin:'', 'width':''});
                the_id = '';
                
                accuaWidgets.fixWebkit();
                if ( add ) {
                    if ( 'multi' == add ) {
                        ui.item.html( ui.item.html().replace(/<[^<>]+>/g, function(m){ return m.replace(/__i__|%i%/g, n); }) );
                        ui.item.attr( 'id', id.replace(/__i__|%i%/g, n) );
                        n++;
                        $('div#' + id).find('input.multi_number').val(n);
                    } else if ( 'single' == add ) {
                        ui.item.attr( 'id', 'new-' + id );
                        rem = 'div#' + id;
                    }
                    // Save the new widget to DB, but DON'T save order yet
                    accuaWidgets.save( ui.item, 0, 0, 0, function(success) {
                        if (success) {
                            // Refresh preview with current order
                            accuaWidgets.refreshPreviewWithCurrentOrder();
                        }
                    });
                    ui.item.find('input.add_new').val('');
                    ui.item.find('a.widget-action').click();
                    return;
                }
                // Refresh preview (without saving to database)
                accuaWidgets.refreshPreviewWithCurrentOrder();
            },
            receive: function(e,ui) {
                var t = $(this);
                if ( !t.is(':visible') ) {
                    t.sortable('cancel');
                }
            }
        }).sortable('option', 'connectWith', 'div.widgets-sortables').parent().filter('.closed').children('.widgets-sortables').sortable('disable');

        //Droppabilità dei widget disponibili
        $('#available-widgets').droppable({
            tolerance: 'pointer',
            accept: function(o){
                return $(o).parent().attr('id') != 'widget-list';
            },
            drop: function(e,ui) {
                // Mark form as having unsaved changes
                if (window.accuaFormsEditorDirty) { window.accuaFormsEditorDirty.mark(); }
                ui.draggable.addClass('deleting');
                $('#removing-widget').hide().children('span').html('');
            },
            over: function(e,ui) {
                ui.draggable.addClass('deleting');
                $('div.widget-placeholder').hide();

                if ( ui.draggable.hasClass('ui-sortable-helper') )
                    $('#removing-widget').show().children('span')
                    .html( ui.draggable.find('div.widget-title').children('h4').html() );
            },
            out: function(e,ui) {
                ui.draggable.removeClass('deleting');
                $('div.widget-placeholder').show();
                $('#removing-widget').hide().children('span').html('');
            }
        });
        
        // Wrapper divs are now in PHP to prevent layout shift on load
        // var holders = $('#widgets-left .widget-holder, #widgets-right .widgets-sortables');
        // holders.wrap('<div class="accua-form-widget-scroll-wrapper"></div>');
    },

    // Get current field order from sortable areas (without saving)
    getCurrentOrder: function() {
        var order = {};
        $('div.widgets-sortables').each(function() {
            var $sortable = $(this);
            if ($sortable.sortable) {
                order[$sortable.attr('id')] = $sortable.sortable('toArray').join(',');
            }
        });
        return order;
    },

    // Refresh preview with current (unsaved) order via POST
    refreshPreviewWithCurrentOrder: function() {
        var self = this;
        var $iframe = $('#accua_form_preview_area');
        var $wrapper = $('#accua_form_preview_area_wrapper');
        
        if (!$iframe.length || typeof accua_forms_nonces === 'undefined') {
            return;
        }
        
        var formId = $('#accua_form_save_settings_id').val();
        if (!formId) {
            return;
        }
        
        // Show loading state
        $wrapper.addClass('accua-form-preview-loading');
        
        // Get current unsaved order
        var orderData = self.getCurrentOrder();
        
        // Create a hidden form to POST the order to a new iframe
        // This allows preview to render with unsaved order
        var previewUrl = 'admin-ajax.php?action=accua_forms_preview&fid=' + formId + '&_wpnonce=' + accua_forms_nonces.preview_nonce;
        
        // Add order as URL parameter (encoded JSON)
        previewUrl += '&preview_order=' + encodeURIComponent(JSON.stringify(orderData));
        
        $iframe[0].src = previewUrl;
        
        // Remove loading state when iframe loads
        $iframe.off('load.previewRefresh').on('load.previewRefresh', function() {
            $wrapper.removeClass('accua-form-preview-loading');
        });
    },

    // Refresh preview from database (after save)
    refreshPreview : function() {
        var $iframe = $('#accua_form_preview_area');
        var $wrapper = $('#accua_form_preview_area_wrapper');
        if ($iframe.length && typeof accua_forms_nonces !== 'undefined') {
            var formId = $('#accua_form_save_settings_id').val();
            if (formId) {
                // Show loading state
                $wrapper.addClass('accua-form-preview-loading');
                // Refresh from database
                $iframe[0].src = 'admin-ajax.php?action=accua_forms_preview&fid=' + formId + '&_wpnonce=' + accua_forms_nonces.preview_nonce;
                // Remove loading state when iframe loads
                $iframe.off('load.previewRefresh').on('load.previewRefresh', function() {
                    $wrapper.removeClass('accua-form-preview-loading');
                });
            }
        }
    },

    // Save field order to database via AJAX
    saveOrder : function(sb, callback) {
        var self = this;
        
        // Collect field order from all sortable areas
        var orderData = {
            action: 'accua-form-fields-order',
            _nonce_edit_form: $('#_nonce_edit_form').val(),
            sidebars: self.getCurrentOrder()
        };

        // Save field order via AJAX
        $.post(ajaxurl, orderData, function(response) {
            if (typeof callback === 'function') {
                callback(true);
            }
        }).fail(function() {
            console.error('Failed to save field order');
            if (typeof callback === 'function') {
                callback(false);
            }
        });

        self.resize();
    },

    //Salvataggio stato widget
    save : function(widget, del, animate, order, callback) {
        var sb = widget.closest('div.widgets-sortables').attr('id'), data = widget.find('form').serialize(), a;
        widget = $(widget);

        a = {
            action: 'accua-save-form-field',
            _nonce_edit_form: $('#_nonce_edit_form').val(),
            sidebar: sb
        };

        if ( del )
            a['delete_widget'] = 1;

        data += '&' + $.param(a);

        $.post( ajaxurl, data, function(r){
            var id;

            if ( del ) {
                if ( !$('input.widget_number', widget).val() ) {
                    id = $('input.widget-id', widget).val();
                    $('#available-widgets').find('input.widget-id').each(function(){
                        if ( $(this).val() == id )
                            $(this).closest('div.widget').show();
                    });
                }

                if ( animate ) {
                    order = 0;
                    widget.slideUp('fast', function(){
                        $(this).remove();
                        // Refresh preview
                        accuaWidgets.refreshPreviewWithCurrentOrder();
                    });
                } else {
                    widget.remove();
                    accuaWidgets.resize();
                }
                if (callback) callback(true);
            } else {
                if ( r && r.length > 2 ) {
                    $('div.widget-content', widget).html(r);
                    accuaWidgets.appendTitle(widget);
                    accuaWidgets.fixLabels(widget);
                }
                if (callback) callback(true);
            }
            // Don't save order here - order is saved when user clicks global Save button
        }).fail(function() {
            if (callback) callback(false);
        });
    },

    // Save field to draft without replacing widget content (for auto-preview)
    saveSilent : function(widget, callback) {
        var sb = widget.closest('div.widgets-sortables').attr('id'),
            data = widget.find('form').serialize(),
            a = {
                action: 'accua-save-form-field',
                _nonce_edit_form: $('#_nonce_edit_form').val(),
                sidebar: sb
            };

        data += '&' + $.param(a);

        $.post(ajaxurl, data, function() {
            if (callback) callback(true);
        }).fail(function() {
            if (callback) callback(false);
        });
    },

    //Aggiunta titolo
    appendTitle : function(widget) {
        var title = $('input[id*="-title"]', widget);
        if ( title = title.val() ) {
            title = title.replace(/<[^<>]+>/g, '').replace(/</g, '&lt;').replace(/>/g, '&gt;');
            $(widget).children('.widget-top').children('.widget-title').children()
                .children('.in-widget-title').html(': ' + title);
        }
    },

    resize : function() {
      /*
        $('div.widgets-sortables').not('#wp_inactive_widgets').each(function(){
            var t = $(this);
            var h = 50, H = t.children('.widget').length;
            h = h + parseInt(H * 48, 10);
            t.css( 'minHeight', h + 'px' );
        });
      */
    },

    fixWebkit : function(n) {
        n = n ? 'none' : '';
        $('body').css({
            WebkitUserSelect: n,
            KhtmlUserSelect: n
        });
    },

    fixLabels : function(widget) {
        widget.children('.widget-inside').find('label').each(function(){
            var t = $(this);
            var f = t.attr('for');
            if ( f && f == $('input', this).attr('id') ) {
                t.removeAttr('for');
            }
        });
    },

    //Chiusura widget
    close : function(widget) {
        // Use CSS transition instead of jQuery slideUp
        widget.removeClass('open');
        widget.find('a.widget-action').attr('aria-expanded', 'false');
    },

    /**
     * Add a field from the available list to the end of the form drop zone.
     */
    addFieldToForm: function(widget) {
        var id = widget.attr('id'),
            add = widget.find('input.add_new').val(),
            n = widget.find('input.multi_number').val(),
            $sortable = $('div.widgets-sortables').first(),
            clone;

        if (add === 'multi') {
            // Multi-use field: clone with new number
            clone = widget.clone();
            clone.html(clone.html().replace(/<[^<>]+>/g, function(m){ return m.replace(/__i__|%i%/g, n); }));
            clone.attr('id', id.replace(/__i__|%i%/g, n));
            n++;
            widget.find('input.multi_number').val(n);
        } else {
            // Single-use field: move to form, hide original
            clone = widget.clone();
            clone.attr('id', 'new-' + id);
            widget.hide();
            widget.data('in-form-hidden', true);
        }

        // Remove the "+" button from the clone in the form area
        clone.find('a.widget-add-action').remove();

        // Append to sortable area
        $sortable.append(clone);

        // Remove draggable class/data from the clone in the form
        clone.removeClass('ui-draggable');
        if (clone.data('draggable')) clone.draggable('destroy');

        // Save the new widget
        clone.find('input.add_new').val('');
        accuaWidgets.save(clone, 0, 0, 0, function(success) {
            if (success) {
                accuaWidgets.refreshPreviewWithCurrentOrder();
            }
        });

        // Open the widget settings
        clone.find('a.widget-action').click();

        // Scroll the drop zone column so the new widget is visible
        var $dropCol = clone.closest('.widget-liquid-right');
        if ($dropCol.length) {
            $dropCol[0].scrollTop = $dropCol[0].scrollHeight;
        }

        // Mark form as dirty
        if (window.accuaFormsEditorDirty) { window.accuaFormsEditorDirty.mark(); }
    },

    /**
     * Instant filter for available fields list.
     * Matches if query appears as substring in the field name.
     */
    initFieldsFilter: function() {
        var $filter = $('#accua-fields-filter');
        if (!$filter.length) return;

        var $widgets = $('#widget-list > .widget');

        // Snapshot which widgets are already in the form (inline display:none from PHP)
        $widgets.each(function() {
            if (this.style.display === 'none') {
                $(this).data('in-form-hidden', true);
            }
        });

        function fuzzyMatch(text, query) {
            return text.toLowerCase().indexOf(query.toLowerCase()) !== -1;
        }

        $filter.on('input', function() {
            var query = $.trim(this.value);
            if (!query) {
                $widgets.each(function() {
                    $(this).removeClass('accua-filter-hidden');
                    if (!$(this).data('in-form-hidden')) {
                        this.style.removeProperty('display');
                    }
                });
                return;
            }
            $widgets.each(function() {
                // Skip widgets already placed in the form
                if ($(this).data('in-form-hidden')) return;

                var name = $(this).find('.widget-title h4').text();
                if (fuzzyMatch(name, query)) {
                    $(this).removeClass('accua-filter-hidden');
                    this.style.removeProperty('display');
                } else {
                    $(this).addClass('accua-filter-hidden');
                    this.style.display = 'none';
                }
            });
        });
    }
};

$(document).ready(function($){ accuaWidgets.init(); accuaWidgets.initFieldsFilter(); });

})(jQuery);

```