Okay, let's set up the initial structure for the WordPress Custom Form Builder plugin. We'll create the main plugin file, set up activation hooks for the database schema, create the admin menu, and include the basic HTML/JS/CSS for the form builder interface. get_charset_collate(); $table_forms = $wpdb->prefix . 'custom_forms'; $table_form_fields = $wpdb->prefix . 'custom_form_fields'; // SQL to create the forms table $sql_forms = "CREATE TABLE $table_forms ( id mediumint(9) NOT NULL AUTO_INCREMENT, form_name varchar(255) NOT NULL, form_description text DEFAULT NULL, custom_css longtext DEFAULT NULL, created_at datetime DEFAULT '0000-00-00 00:00:00' NOT NULL, updated_at datetime DEFAULT '0000-00-00 00:00:00' NOT NULL, PRIMARY KEY (id) ) $charset_collate;"; // SQL to create the form fields table $sql_form_fields = "CREATE TABLE $table_form_fields ( id bigint(20) NOT NULL AUTO_INCREMENT, form_id mediumint(9) NOT NULL, field_type varchar(50) NOT NULL, label varchar(255) DEFAULT NULL, name varchar(255) DEFAULT NULL, placeholder varchar(255) DEFAULT NULL, default_value text DEFAULT NULL, options longtext DEFAULT NULL, -- For select, radio, checkbox groups is_required tinyint(1) DEFAULT 0 NOT NULL, field_order int(11) DEFAULT 0 NOT NULL, additional_attrs longtext DEFAULT NULL, -- JSON for extra attributes custom_css longtext DEFAULT NULL, -- CSS for this specific field PRIMARY KEY (id), KEY form_id (form_id) ) $charset_collate;"; require_once(ABSPATH . 'wp-admin/includes/upgrade.php'); dbDelta($sql_forms); dbDelta($sql_form_fields); // Add options or flags if needed add_option('cfb_db_version', CFB_VERSION); } ?>

0; $page_title = $is_editing ? __('Edit Form', 'custom-form-builder') : __('Add New Form', 'custom-form-builder'); // Basic structure based on user's HTML ?>

__('Permission denied.', 'custom-form-builder')], 403); } // 3. Get and sanitize data $form_id = isset($_POST['form_id']) ? intval($_POST['form_id']) : 0; $form_name = isset($_POST['form_name']) ? sanitize_text_field($_POST['form_name']) : ''; $form_description = isset($_POST['description']) ? sanitize_textarea_field($_POST['description']) : ''; $custom_css = isset($_POST['custom_css']) ? wp_strip_all_tags($_POST['custom_css']) : ''; // Basic sanitization for CSS $fields_json = isset($_POST['fields']) ? wp_unslash($_POST['fields']) : '[]'; // Expecting JSON string // Validate required fields if (empty($form_name)) { wp_send_json_error(['message' => __('Form name is required.', 'custom-form-builder')]); } $fields = json_decode($fields_json, true); if (json_last_error() !== JSON_ERROR_NONE) { wp_send_json_error(['message' => __('Invalid field data format.', 'custom-form-builder')]); } global $wpdb; $table_forms = $wpdb->prefix . 'custom_forms'; $table_form_fields = $wpdb->prefix . 'custom_form_fields'; $current_time = current_time('mysql'); // 4. Prepare form data for DB $form_data = [ 'form_name' => $form_name, 'form_description' => $form_description, 'custom_css' => $custom_css, 'updated_at' => $current_time, ]; $form_format = ['%s', '%s', '%s', '%s']; // 5. Insert or Update Form if ($form_id > 0) { // Update existing form $where = ['id' => $form_id]; $where_format = ['%d']; $updated = $wpdb->update($table_forms, $form_data, $where, $form_format, $where_format); if ($updated === false) { wp_send_json_error(['message' => __('Failed to update form.', 'custom-form-builder')]); } } else { // Insert new form $form_data['created_at'] = $current_time; $form_format[] = '%s'; $inserted = $wpdb->insert($table_forms, $form_data, $form_format); if (!$inserted) { wp_send_json_error(['message' => __('Failed to create form.', 'custom-form-builder')]); } $form_id = $wpdb->insert_id; // Get the ID of the newly inserted form } // 6. Handle Fields (Delete existing fields for this form, then re-insert) // This is simpler than tracking changes but might be inefficient for very large forms. // A more complex approach would involve checking existing fields and updating/inserting/deleting individually. $wpdb->delete($table_form_fields, ['form_id' => $form_id], ['%d']); if (is_array($fields)) { foreach ($fields as $index => $field) { // Sanitize field data carefully $field_data = [ 'form_id' => $form_id, 'field_type' => isset($field['type']) ? sanitize_key($field['type']) : 'text', 'label' => isset($field['label']) ? sanitize_text_field($field['label']) : '', 'name' => isset($field['name']) ? sanitize_key($field['name']) : ('field_' . uniqid()), // Ensure a name 'placeholder' => isset($field['placeholder']) ? sanitize_text_field($field['placeholder']) : '', 'default_value' => isset($field['value']) ? sanitize_text_field($field['value']) : '', // Adjust based on field type if needed 'options' => isset($field['options']) && is_array($field['options']) ? wp_json_encode(array_map('sanitize_text_field', $field['options'])) : null, 'is_required' => isset($field['required']) ? intval($field['required']) : 0, 'field_order' => isset($field['order']) ? intval($field['order']) : $index, // Use provided order or index 'additional_attrs' => isset($field['additional_attrs']) && is_array($field['additional_attrs']) ? wp_json_encode($field['additional_attrs']) : null, // Sanitize array values if needed 'custom_css' => isset($field['custom_css']) ? wp_strip_all_tags($field['custom_css']) : null, // Basic sanitization ]; $field_format = [ '%d', '%s', '%s', '%s', '%s', '%s', '%s', '%d', '%d', '%s', '%s' ]; $wpdb->insert($table_form_fields, $field_data, $field_format); } } // 7. Send success response wp_send_json_success([ 'message' => __('Form saved successfully.', 'custom-form-builder'), 'form_id' => $form_id // Send back the ID (useful for new forms) ]); } /** * Handles the AJAX request to get form data for editing. */ function cfb_ajax_get_form() { check_ajax_referer('cfb_get_form_nonce', 'nonce'); if (!current_user_can('manage_options')) { wp_send_json_error(['message' => __('Permission denied.', 'custom-form-builder')], 403); } $form_id = isset($_GET['form_id']) ? intval($_GET['form_id']) : 0; if ($form_id <= 0) { wp_send_json_error(['message' => __('Invalid form ID.', 'custom-form-builder')]); } global $wpdb; $table_forms = $wpdb->prefix . 'custom_forms'; $table_form_fields = $wpdb->prefix . 'custom_form_fields'; // Get form meta $form = $wpdb->get_row($wpdb->prepare("SELECT * FROM $table_forms WHERE id = %d", $form_id), ARRAY_A); if (!$form) { wp_send_json_error(['message' => __('Form not found.', 'custom-form-builder')]); } // Get form fields $fields = $wpdb->get_results($wpdb->prepare("SELECT * FROM $table_form_fields WHERE form_id = %d ORDER BY field_order ASC", $form_id), ARRAY_A); // Prepare fields for JS (decode JSON strings) $prepared_fields = []; foreach ($fields as $field) { // Map DB columns back to JS expected structure (approximate) $prepared_field = [ 'id' => 'el_' . $field['id'], // Create a unique ID for JS if needed, or use DB id directly? Let's use DB id. 'db_id' => $field['id'], // Keep track of DB ID 'type' => $field['field_type'], 'label' => $field['label'], 'name' => $field['name'], 'placeholder' => $field['placeholder'], 'value' => $field['default_value'], 'options' => !empty($field['options']) ? json_decode($field['options'], true) : [], 'required' => (bool)$field['is_required'], 'order' => (int)$field['field_order'], 'additional_attrs' => !empty($field['additional_attrs']) ? json_decode($field['additional_attrs'], true) : new stdClass(), // Ensure object if empty 'custom_css_field' => $field['custom_css'], // Distinguish from form-level CSS // Map other fields like 'rows', 'buttonText' based on 'additional_attrs' or 'field_type' if stored there ]; // Example: Extract 'rows' if stored in additional_attrs if ($field['field_type'] === 'textarea' && isset($prepared_field['additional_attrs']['rows'])) { $prepared_field['rows'] = (int)$prepared_field['additional_attrs']['rows']; } // Example: Extract 'buttonText' if stored in additional_attrs if ($field['field_type'] === 'button' && isset($prepared_field['additional_attrs']['buttonText'])) { $prepared_field['buttonText'] = $prepared_field['additional_attrs']['buttonText']; } // Add style properties (needs careful mapping from custom_css or additional_attrs) // This part is complex and depends on how styles are stored. // For now, we'll skip detailed style reconstruction from DB. // The JS provided seems to store styles directly in the object. // We might need to save the entire JS 'style' object as JSON in 'additional_attrs'. $prepared_field['style'] = new stdClass(); // Placeholder $prepared_fields[] = $prepared_field; } wp_send_json_success([ 'form_meta' => [ 'id' => $form['id'], 'name' => $form['form_name'], 'description' => $form['form_description'], 'custom_css' => $form['custom_css'], ], 'fields' => $prepared_fields ]); } /** * Handles the AJAX request to delete a form. */ function cfb_ajax_delete_form() { check_ajax_referer('cfb_delete_form_nonce', 'nonce'); if (!current_user_can('manage_options')) { wp_send_json_error(['message' => __('Permission denied.', 'custom-form-builder')], 403); } $form_id = isset($_POST['form_id']) ? intval($_POST['form_id']) : 0; if ($form_id <= 0) { wp_send_json_error(['message' => __('Invalid form ID.', 'custom-form-builder')]); } global $wpdb; $table_forms = $wpdb->prefix . 'custom_forms'; $table_form_fields = $wpdb->prefix . 'custom_form_fields'; // Delete fields first $wpdb->delete($table_form_fields, ['form_id' => $form_id], ['%d']); // Delete the form $deleted = $wpdb->delete($table_forms, ['id' => $form_id], ['%d']); if ($deleted === false) { wp_send_json_error(['message' => __('Failed to delete form.', 'custom-form-builder')]); } elseif ($deleted === 0) { wp_send_json_error(['message' => __('Form not found or already deleted.', 'custom-form-builder')]); } else { wp_send_json_success(['message' => __('Form deleted successfully.', 'custom-form-builder')]); } } ?> 0, ], $atts, 'custom_form' ); $form_id = intval($atts['id']); if ($form_id <= 0) { return __('Invalid form ID specified.', 'custom-form-builder'); } global $wpdb; $table_forms = $wpdb->prefix . 'custom_forms'; $table_form_fields = $wpdb->prefix . 'custom_form_fields'; // Get form meta $form = $wpdb->get_row($wpdb->prepare("SELECT * FROM $table_forms WHERE id = %d", $form_id)); if (!$form) { return __('Form not found.', 'custom-form-builder'); } // Get form fields $fields = $wpdb->get_results($wpdb->prepare("SELECT * FROM $table_form_fields WHERE form_id = %d ORDER BY field_order ASC", $form_id)); if (empty($fields)) { return __('This form has no fields.', 'custom-form-builder'); } // Start output buffering ob_start(); // Add form-specific custom CSS if (!empty($form->custom_css)) { echo ''; } // Add field-specific CSS (less common, but possible) $field_styles = ''; foreach ($fields as $field) { if (!empty($field->custom_css)) { // Generate a unique class/ID for the field wrapper if needed $field_wrapper_id = 'cfb-field-' . esc_attr($field->id); $field_styles .= '#' . $field_wrapper_id . ' { ' . esc_html($field->custom_css) . " }\n"; } } if (!empty($field_styles)) { echo ''; } // Render the form tag echo '

'; // Add action URL if handling submissions // Render form fields foreach ($fields as $field) { $field_wrapper_id = 'cfb-field-' . esc_attr($field->id); $field_name = esc_attr($field->name); $field_label = esc_html($field->label); $is_required = (bool)$field->is_required; $required_attr = $is_required ? ' required' : ''; $required_label = $is_required ? ' *' : ''; $placeholder_attr = !empty($field->placeholder) ? ' placeholder="' . esc_attr($field->placeholder) . '"' : ''; $default_value_attr = !empty($field->default_value) ? ' value="' . esc_attr($field->default_value) . '"' : ''; // Careful with textarea/select echo '

'; switch ($field->field_type) { case 'text': case 'email': // Add other input types as needed case 'number': case 'date': echo '' . $field_label . $required_label . ''; echo ''; break; case 'textarea': // Extract rows from additional_attrs if stored there $rows = 3; // Default $additional_attrs = !empty($field->additional_attrs) ? json_decode($field->additional_attrs, true) : []; if (isset($additional_attrs['rows']) && is_numeric($additional_attrs['rows'])) { $rows = intval($additional_attrs['rows']); } echo '' . $field_label . $required_label . ''; echo ''; break; case 'select': $options = !empty($field->options) ? json_decode($field->options) : []; echo '' . $field_label . $required_label . ''; echo ''; break; case 'checkbox': // Single checkbox echo ''; echo ' '; // Use default_value as the value, default to 1 echo $field_label . $required_label; // Label often comes after checkbox echo ''; break; case 'radio': $options = !empty($field->options) ? json_decode($field->options) : []; echo '

'; echo '' . $field_label . $required_label . ''; if (is_array($options)) { foreach ($options as $key => $option) { $option_id = 'cfb-field-' . esc_attr($field->id) . '-' . $key; $option_value = esc_attr($option); $checked_attr = ($option == $field->default_value) ? ' checked' : ''; echo ''; echo ' '; echo esc_html($option); echo '
'; } } echo '

'; break; case 'button': // Extract text from additional_attrs if stored there $button_text = 'Submit'; // Default $additional_attrs = !empty($field->additional_attrs) ? json_decode($field->additional_attrs, true) : []; if (isset($additional_attrs['buttonText'])) { $button_text = $additional_attrs['buttonText']; } // Determine button type (submit, button, reset) - default to submit for forms $button_type = 'submit'; if (isset($additional_attrs['buttonType'])) { $button_type = in_array($additional_attrs['buttonType'], ['submit', 'button', 'reset']) ? $additional_attrs['buttonType'] : 'submit'; } echo ''; break; // Add cases for other field types (hidden, file, etc.) } echo '

'; // End cfb-form-field } // Add nonce field for potential submission handling wp_nonce_field('cfb_submit_form_' . $form_id, 'cfb_form_nonce'); echo ''; echo '

'; // End form // Get buffered content $output = ob_get_clean(); return $output; } ?> admin_url('admin-ajax.php'), 'save_nonce' => wp_create_nonce('cfb_save_form_nonce'), 'get_nonce' => wp_create_nonce('cfb_get_form_nonce'), 'delete_nonce' => wp_create_nonce('cfb_delete_form_nonce'), 'i18n' => [ // Internationalization strings for JS 'error' => __('Error', 'custom-form-builder'), 'success' => __('Success', 'custom-form-builder'), 'saving' => __('Saving...', 'custom-form-builder'), 'save_error' => __('Could not save form.', 'custom-form-builder'), 'loading' => __('Loading form data...', 'custom-form-builder'), 'load_error' => __('Could not load form data.', 'custom-form-builder'), 'deleting' => __('Deleting...', 'custom-form-builder'), 'delete_confirm' => __('Are you sure you want to delete this form?', 'custom-form-builder'), 'delete_error' => __('Could not delete form.', 'custom-form-builder'), 'select_element' => __('Select an element on the canvas to edit its properties.', 'custom-form-builder'), 'options_help' => __('Options (comma separated)', 'custom-form-builder'), 'style' => __('Style', 'custom-form-builder'), 'background' => __('Background', 'custom-form-builder'), 'text_color' => __('Text Color', 'custom-form-builder'), 'border_color' => __('Border Color', 'custom-form-builder'), 'border_radius' => __('Border Radius', 'custom-form-builder'), 'border_width' => __('Border Width', 'custom-form-builder'), 'border_style' => __('Border Style', 'custom-form-builder'), 'label' => __('Label', 'custom-form-builder'), 'placeholder' => __('Placeholder', 'custom-form-builder'), 'rows' => __('Rows', 'custom-form-builder'), 'button_text' => __('Button Text', 'custom-form-builder'), 'required' => __('Required', 'custom-form-builder'), // Add more translated strings as needed ], 'border_styles' => [ // Pass border style options to JS ['value' => 'solid', 'label' => __('Solid', 'custom-form-builder')], ['value' => 'dashed', 'label' => __('Dashed', 'custom-form-builder')], ['value' => 'dotted', 'label' => __('Dotted', 'custom-form-builder')], ['value' => 'double', 'label' => __('Double', 'custom-form-builder')], ['value' => 'groove', 'label' => __('Groove', 'custom-form-builder')], ['value' => 'ridge', 'label' => __('Ridge', 'custom-form-builder')], ['value' => 'inset', 'label' => __('Inset', 'custom-form-builder')], ['value' => 'outset', 'label' => __('Outset', 'custom-form-builder')], ['value' => 'none', 'label' => __('None', 'custom-form-builder')], ] ]); } /** * Enqueue scripts and styles for the frontend (when shortcode is used). */ function cfb_enqueue_frontend_scripts() { // Basic check if the shortcode might be present (can be improved) // A better way is to check post content in the_post action or use wp_script_add_data // For simplicity, we enqueue it, but ideally only when needed. // Alternatively, the shortcode handler itself could enqueue the style. wp_enqueue_style( 'cfb-frontend-styles', CFB_PLUGIN_URL . 'public/css/form-display.css', [], CFB_VERSION ); // Enqueue frontend JS if needed for validation or interactions later /* wp_enqueue_script( 'cfb-frontend-script', CFB_PLUGIN_URL . 'public/js/form-interaction.js', ['jquery'], CFB_VERSION, true ); */ } ?> /* Basic Admin Styles for Custom Form Builder */ .cfb-wrap { margin-top: 20px; } .cfb-container { display: flex; gap: 20px; margin-top: 15px; min-height: 600px; /* Ensure enough height */ } .cfb-sidebar { width: 200px; padding: 15px; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; height: fit-content; /* Make sidebar height adjust */ } .cfb-sidebar h2 { margin-top: 0; margin-bottom: 15px; font-size: 1.1em; border-bottom: 1px solid #ccc; padding-bottom: 5px; } .cfb-main { flex: 1; /* Take remaining space */ padding: 15px; border: 1px solid #dee2e6; border-radius: 4px; background-color: #fff; } .cfb-main h2 { margin-top: 0; margin-bottom: 10px; } .cfb-form-meta { margin-bottom: 20px; padding: 15px; background-color: #f1f1f1; border: 1px solid #ddd; border-radius: 3px; } .cfb-form-meta label { display: block; margin-bottom: 5px; font-weight: bold; } .cfb-form-meta input[type="text"], .cfb-form-meta textarea { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; } /* Draggable Elements */ .cfb-draggable-list { display: flex; flex-direction: column; gap: 8px; } .cfb-draggable { padding: 8px 12px; background-color: #e9ecef; border: 1px solid #ced4da; border-radius: 4px; cursor: grab; text-align: center; font-size: 0.9em; transition: background-color 0.2s ease; } .cfb-draggable:hover { background-color: #dde2e6; } .cfb-draggable.dragging { opacity: 0.5; cursor: grabbing; background-color: #cfe2ff; border-color: #b6d4fe; } /* Canvas */ .cfb-canvas { min-height: 400px; border: 2px dashed #adb5bd; padding: 15px; background-color: #f8f9fa; border-radius: 4px; margin-bottom: 20px; position: relative; /* Needed for absolute positioning of remove button */ } .cfb-canvas.drag-over { border-color: #0d6efd; background-color: #e7f1ff; } /* Form Elements on Canvas */ .cfb-form-element { background-color: #fff; border: 1px solid #ccc; padding: 15px; margin-bottom: 10px; border-radius: 4px; position: relative; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .cfb-form-element:hover { border-color: #999; } .cfb-form-element.selected { border-color: #0d6efd; box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25); } .cfb-form-element label { display: block; margin-bottom: 5px; font-weight: bold; font-size: 0.95em; } .cfb-form-element input[type="text"], .cfb-form-element textarea, .cfb-form-element select { width: 95%; /* Slightly less than 100% to prevent overflow */ padding: 8px; margin-top: 5px; border: 1px solid #ccc; background-color: #eee; /* Indicate disabled state */ cursor: not-allowed; } .cfb-form-element input[type="checkbox"], .cfb-form-element input[type="radio"] { margin-right: 5px; cursor: not-allowed; } .cfb-form-element button { padding: 8px 15px; margin-top: 5px; cursor: not-allowed; } /* Remove Button */ .cfb-remove-btn { position: absolute; top: 5px; right: 5px; background-color: #dc3545; color: white; border: none; border-radius: 50%; width: 20px; height: 20px; line-height: 18px; /* Center the 'x' */ text-align: center; font-size: 14px; font-weight: bold; cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease; } .cfb-form-element:hover .cfb-remove-btn { opacity: 1; } .cfb-remove-btn:hover { background-color: #c82333; } /* Properties Panel */ .cfb-properties-form .form-row, .cfb-properties-form .style-row { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #eee; } .cfb-properties-form .form-row:last-child, .cfb-properties-form .style-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .cfb-properties-form label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 0.9em; } .cfb-properties-form input[type="text"], .cfb-properties-form input[type="number"], .cfb-properties-form input[type="color"], .cfb-properties-form select, .cfb-properties-form textarea { width: 100%; padding: 6px; border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box; /* Include padding in width */ } .cfb-properties-form input[type="checkbox"] { margin-left: 5px; } .cfb-properties-form .style-row input[type="color"] { height: 30px; /* Make color input a bit taller */ padding: 2px; } .cfb-properties-form .style-row span { /* Unit span */ margin-left: 5px; font-size: 0.9em; color: #666; } .cfb-properties-form .style-section { margin-top: 20px; padding-top: 15px; border-top: 2px solid #ddd; } .cfb-properties-form .style-section-title { font-weight: bold; margin-bottom: 10px; font-size: 1em; } /* Form Actions */ .cfb-form-actions { margin-top: 20px; padding-top: 15px; border-top: 1px solid #eee; text-align: right; } /* CSS Panel */ .cfb-css-panel { margin-top: 20px; padding-top: 15px; border-top: 1px solid #eee; } .cfb-css-panel h2 { margin-bottom: 10px; } .cfb-css-panel textarea { width: 100%; min-height: 150px; font-family: monospace; border: 1px solid #ccc; padding: 10px; } /* Sortable Placeholder */ .cfb-sortable-placeholder { height: 50px; background-color: #e0e0e0; border: 2px dashed #aaa; margin-bottom: 10px; border-radius: 4px; } /* Loading/Saving Indicator */ #cfb-loading-indicator { display: none; /* Hidden by default */ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.7); color: white; padding: 20px 30px; border-radius: 5px; z-index: 10000; font-size: 1.1em; } #cfb-loading-indicator .spinner { display: inline-block; width: 20px; height: 20px; margin-right: 10px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /** * Custom Form Builder Admin Script */ jQuery(document).ready(function ($) { // --- State --- let formElements = []; let selectedElementId = null; let idCounter = 1; // Used for generating temporary client-side IDs let currentFormId = 0; // Store the ID of the form being edited (0 for new) // --- DOM Elements --- const builderContainer = $('#cfb-form-builder-container'); const canvas = $('#cfb-canvas'); const draggables = $('.cfb-draggable'); const propertiesForm = $('#cfb-properties-form'); const saveBtn = $('#cfb-save-form-btn'); const formNameInput = $('#cfb-form-name'); const formDescriptionInput = $('#cfb-form-description'); const formCustomCssInput = $('#cfb-custom-css'); // --- Initialization --- function init() { currentFormId = parseInt(builderContainer.data('form-id'), 10) || 0; setupDragAndDrop(); setupCanvasInteraction(); setupSaveButton(); if (currentFormId > 0) { loadFormData(currentFormId); } else { renderCanvas(); // Initial render for new form renderProperties(); } // Make canvas elements sortable canvas.sortable({ placeholder: "cfb-sortable-placeholder", items: "> .cfb-form-element", cursor: "move", axis: "y", update: function (event, ui) { updateElementOrder(); renderCanvas(); // Re-render to reflect new order immediately if needed } }).disableSelection(); } // --- Loading Indicator --- function showLoading(message) { $('body').append('

' + message + '

'); $('#cfb-loading-indicator').fadeIn(200); } function hideLoading() { $('#cfb-loading-indicator').fadeOut(200, function() { $(this).remove(); }); } // --- Notifications (Simple Alert for now) --- function showNotification(type, message) { alert(type.toUpperCase() + ": " + message); // Could replace with a more sophisticated notification system } // --- Drag & Drop from Sidebar --- function setupDragAndDrop() { draggables.on('dragstart', function (e) { $(this).addClass('dragging'); e.originalEvent.dataTransfer.effectAllowed = 'copy'; e.originalEvent.dataTransfer.setData('text/plain', $(this).data('type')); }); draggables.on('dragend', function () { $(this).removeClass('dragging'); }); canvas.on('dragover', function (e) { e.preventDefault(); canvas.addClass('drag-over'); }); canvas.on('dragleave', function (e) { canvas.removeClass('drag-over'); }); canvas.on('drop', function (e) { e.preventDefault(); canvas.removeClass('drag-over'); const type = e.originalEvent.dataTransfer.getData('text/plain'); if (type) { addElement(type); } }); } // --- Canvas Interaction --- function setupCanvasInteraction() { // Click on canvas background to deselect canvas.on('click', function (e) { if (e.target === this) { // Only deselect if clicking the canvas itself selectedElementId = null; renderCanvas(); renderProperties(); } }); // Event delegation for clicking elements and remove buttons canvas.on('click', '.cfb-form-element', function (e) { e.stopPropagation(); // Prevent canvas click from firing selectedElementId = $(this).data('element-id'); renderCanvas(); // Re-render to show selection highlight renderProperties(); }); canvas.on('click', '.cfb-remove-btn', function (e) { e.stopPropagation(); // Prevent element click from firing const elementIdToRemove = $(this).closest('.cfb-form-element').data('element-id'); formElements = formElements.filter(el => el.id !== elementIdToRemove); if (selectedElementId === elementIdToRemove) { selectedElementId = null; } renderCanvas(); renderProperties(); }); } // --- Add Element --- function addElement(type) { const id = 'el_' + idCounter++; // Temporary client-side ID const newOrder = formElements.length; // Append to the end let element = { id: id, db_id: null, // No database ID yet type: type, label: capitalize(type) + ' Label', name: type + '_' + idCounter, // Basic unique name placeholder: '', value: '', // Default value options: (type === 'select' || type === 'radio') ? ['Option 1', 'Option 2'] : undefined, required: false, order: newOrder, additional_attrs: {}, // Store extra HTML attributes here custom_css_field: '', // Field-specific CSS // Default styles (match CSS defaults if possible) style: { // backgroundColor: '#ffffff', // Example defaults // borderRadius: 4, // borderColor: '#cccccc', // borderWidth: 1, // borderStyle: 'solid', // color: '#000000' } }; // Type-specific defaults if (type === 'textarea') { element.rows = 3; element.additional_attrs.rows = 3; // Store in additional_attrs too } if (type === 'button') { element.buttonText = 'Submit'; element.additional_attrs.buttonText = 'Submit'; // Store in additional_attrs element.additional_attrs.buttonType = 'submit'; // Default type } formElements.push(element); selectedElementId = id; // Select the newly added element renderCanvas(); renderProperties(); } // --- Update Element Order --- function updateElementOrder() { const orderedIds = canvas.sortable('toArray', { attribute: 'data-element-id' }); // Create a map for quick lookup const elementMap = formElements.reduce((map, el) => { map[el.id] = el; return map; }, {}); // Update order property based on DOM position const newFormElements = []; orderedIds.forEach((id, index) => { if (elementMap[id]) { elementMap[id].order = index; newFormElements.push(elementMap[id]); } }); formElements = newFormElements; // No need to re-render canvas here if sortable update does it visually // renderCanvas(); // Optional: uncomment if visual update isn't perfect } // --- Render Canvas --- function renderCanvas() { canvas.empty(); // Clear previous content // Ensure elements are sorted by the 'order' property before rendering formElements.sort((a, b) => a.order - b.order); formElements.forEach(el => { const wrapper = $('

') .addClass('cfb-form-element') .addClass(el.id === selectedElementId ? 'selected' : '') .attr('data-element-id', el.id) .attr('tabindex', 0); // Make it focusable // Apply custom styles (if any are defined in el.style) applyStyles(wrapper, el.style); // Remove button const removeBtn = $('