Changeset 3789028

Timestamp:

11/07/2026 06:07:59 AM (less than one hour ago)

Author:

muzaffarpakhtoon

Message:

1.2.8 - Adds Number (- / +) field, outlined form style, button icon image upload, and keeps Submission Storage settings when saving other settings. Dropdown and stepper fixes.

Location:

submitrelay

Files:

• assets/screenshot-1.png (modified) ( previous)
• tags/1.2.8 (added)
• tags/1.2.8/assets (added)
• tags/1.2.8/assets/admin.js (added)
• tags/1.2.8/assets/public.js (added)
• tags/1.2.8/languages (added)
• tags/1.2.8/languages/index.php (added)
• tags/1.2.8/readme.txt (added)
• tags/1.2.8/submitrelay.php (added)
• tags/1.2.8/uninstall.php (added)
• trunk/assets/admin.js (modified) (1 diff)
• trunk/assets/public.js (modified) (1 diff)
• trunk/readme.txt (modified) (3 diffs)
• trunk/submitrelay.php (modified) (35 diffs)

submitrelay/trunk/assets/admin.js

@@ -1 @@
-/* SubmitRelay admin asset handle. Dynamic admin behavior is attached with wp_add_inline_script(). */
+/* SubmitRelay admin asset handle. Other admin behavior is attached with wp_add_inline_script(). */
+(function () {
+    'use strict';
+
+    document.addEventListener('DOMContentLoaded', function () {
+        var input = document.getElementById('submitrelay-button-icon-image');
+        var chooseBtn = document.getElementById('submitrelay-icon-choose');
+        var resetBtn = document.getElementById('submitrelay-icon-reset');
+        var preview = document.getElementById('submitrelay-icon-preview');
+        var frame = null;
+
+        if (!input || !chooseBtn || !resetBtn || !preview) {
+            return;
+        }
+
+        function refresh() {
+            var url = input.value.trim();
+            if (url) {
+                preview.setAttribute('src', url);
+                preview.hidden = false;
+            } else {
+                preview.removeAttribute('src');
+                preview.hidden = true;
+            }
+        }
+
+        chooseBtn.addEventListener('click', function (event) {
+            event.preventDefault();
+            if (!window.wp || !window.wp.media) {
+                return;
+            }
+            if (!frame) {
+                frame = window.wp.media({
+                    title: chooseBtn.getAttribute('data-title') || '',
+                    button: { text: chooseBtn.getAttribute('data-button') || '' },
+                    library: { type: 'image' },
+                    multiple: false
+                });
+                frame.on('select', function () {
+                    var attachment = frame.state().get('selection').first().toJSON();
+                    if (attachment && attachment.url) {
+                        input.value = attachment.url;
+                        refresh();
+                    }
+                });
+            }
+            frame.open();
+        });
+
+        resetBtn.addEventListener('click', function (event) {
+            event.preventDefault();
+            input.value = '';
+            refresh();
+        });
+
+        input.addEventListener('input', refresh);
+        refresh();
+    });
+}());

submitrelay/trunk/assets/public.js

@@ -1 @@
-/* SubmitRelay public asset handle. Dynamic public behavior is attached with wp_add_inline_script(). */
+/* SubmitRelay public assets. Form submission behavior is attached with wp_add_inline_script(). */
+(function () {
+    'use strict';
+
+    // Load once, even if the script is printed or combined more than once.
+    if (window.submitrelayStepperLoaded) { return; }
+    window.submitrelayStepperLoaded = true;
+
+    // Number (- / +) stepper fields used in the popup and the shortcode form.
+    // The - and + buttons are only shown after this script has run (the
+    // "submitrelay-stepper-ready" class), so they are never visible but dead.
+    function clamp(input) {
+        var min = parseInt(input.getAttribute('min'), 10);
+        var max = parseInt(input.getAttribute('max'), 10);
+        var value = parseInt(input.value, 10);
+        if (isNaN(min)) { min = 0; }
+        if (isNaN(max)) { max = 999; }
+        if (isNaN(value)) { value = min; }
+        value = Math.max(min, Math.min(max, value));
+        input.value = String(value);
+        return { value: value, min: min, max: max };
+    }
+
+    function syncStepper(wrap) {
+        if (!wrap) { return; }
+        var input = wrap.querySelector('.submitrelay-step-input');
+        var minus = wrap.querySelector('.submitrelay-step-minus');
+        var plus = wrap.querySelector('.submitrelay-step-plus');
+        if (!input) { return; }
+        var state = clamp(input);
+        if (minus) { minus.disabled = state.value <= state.min; }
+        if (plus) { plus.disabled = state.value >= state.max; }
+        wrap.classList.add('submitrelay-stepper-ready');
+    }
+
+    function syncAll(onlyNew) {
+        var selector = onlyNew ? '.submitrelay-stepper:not(.submitrelay-stepper-ready)' : '.submitrelay-stepper';
+        var steppers = document.querySelectorAll(selector);
+        for (var i = 0; i < steppers.length; i++) { syncStepper(steppers[i]); }
+    }
+
+    // Capture phase, so themes or page builders that stop click events cannot block the buttons.
+    document.addEventListener('click', function (event) {
+        var target = event.target;
+        if (target && target.nodeType === 3) { target = target.parentNode; }
+        var button = (target && target.closest) ? target.closest('.submitrelay-step-btn') : null;
+        if (!button) { return; }
+        var wrap = button.closest('.submitrelay-stepper');
+        var input = wrap ? wrap.querySelector('.submitrelay-step-input') : null;
+        if (!input) { return; }
+        event.preventDefault();
+        var state = clamp(input);
+        var delta = button.classList.contains('submitrelay-step-plus') ? 1 : -1;
+        input.value = String(Math.max(state.min, Math.min(state.max, state.value + delta)));
+        syncStepper(wrap);
+    }, true);
+
+    document.addEventListener('change', function (event) {
+        var input = event.target;
+        if (input && input.classList && input.classList.contains('submitrelay-step-input')) {
+            syncStepper(input.closest('.submitrelay-stepper'));
+        }
+    });
+
+    // After a form reset the field returns to its starting value.
+    document.addEventListener('reset', function () {
+        window.setTimeout(function () { syncAll(false); }, 0);
+    });
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function () { syncAll(false); });
+    } else {
+        syncAll(false);
+    }
+
+    // Forms added to the page later (page builders, AJAX popups).
+    if (window.MutationObserver) {
+        var scheduled = false;
+        new MutationObserver(function () {
+            if (scheduled) { return; }
+            scheduled = true;
+            (window.requestAnimationFrame || window.setTimeout)(function () {
+                scheduled = false;
+                syncAll(true);
+            });
+        }).observe(document.documentElement, { childList: true, subtree: true });
+    }
+}());

submitrelay/trunk/readme.txt

@@ -5 +5 @@
 Tested up to: 7.1
 Requires PHP: 7.4
-Stable tag: 1.2.7
+Stable tag: 1.2.8
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -193 +193 @@
 == Changelog ==
 
+= 1.2.8 =
+* Fix: the number (- / +) buttons are shown only once their script has loaded, and scripts are cache-busted, so the buttons are never visible but inactive on sites with caching or optimization plugins.
+* Fix: saving the main settings no longer resets the Submission Storage choices (for example IP Address switching back off).
+* New: "Number (- / +)" field type for the form builder, for things like Adults and Child. Set a minimum, maximum and starting value. Works in the popup and the shortcode form.
+* Change: form fields in both the popup and the shortcode form now use an outlined style, with the label sitting on the field border. A "Field Label Background" colour setting matches the label to your page background.
+* New: optional Button Icon Image for the floating button. Choose an image from the Media Library, or click "Use Default Icon" to return to the text/emoji icon. The default icon is unchanged.
+
 = 1.2.7 =
 * Fix: dropdown text no longer gets cut off in the shortcode form on themes that set a fixed select height.
@@ -334 +341 @@
 == Upgrade Notice ==
 
+= 1.2.8 =
+Form fields now use an outlined style (label on the field border), and the floating button icon can be an uploaded image. Forms will look different after updating.
+
 = 1.2.7 =
 Fixes dropdown text being cut off in the shortcode form on some themes.

submitrelay/trunk/submitrelay.php

@@ -3 +3 @@
  * Plugin Name:    SubmitRelay – Form & Chat
  * Description:    WordPress contact form with WhatsApp chat and pre-filled messages, email notifications, submission storage, popup and shortcode forms.
- * Version:        1.2.7
+ * Version:        1.2.8
  * Author:         Muzaffer Ahmad Pakhtoon
  * Author URI:     https://wp.apharwat.net/
@@ -32 +32 @@
      * database migration.
      */
-    private const PLUGIN_VERSION = '1.2.7';
+    private const PLUGIN_VERSION = '1.2.8';
     private const DB_VERSION = '1.2.0';
 
@@ -337 +337 @@
             'scroll_percent'        => 0,
             'popup_position'        => 'center',
+            'button_icon_image'     => '',
+            'outlined_label_bg'     => '#ffffff',
             'schedule_enabled'      => 0,
             'schedule_start'        => '',
@@ -423 +425 @@
             'field_text_color' => $defaults['field_text_color'],
             'placeholder_text_color' => $defaults['placeholder_text_color'],
+            'outlined_label_bg' => $defaults['outlined_label_bg'],
         ];
         foreach ($color_defaults as $key => $fallback) {
@@ -438 +441 @@
         $settings['button_position'] = in_array($settings['button_position'], $this->button_positions, true) ? $settings['button_position'] : $defaults['button_position'];
         $settings['popup_position'] = in_array($settings['popup_position'], $this->popup_positions, true) ? $settings['popup_position'] : $defaults['popup_position'];
+        $settings['button_icon_image'] = esc_url_raw((string) ($settings['button_icon_image'] ?? ''));
         $settings['mobile_button_position'] = in_array($settings['mobile_button_position'], ['left', 'center', 'right'], true) ? $settings['mobile_button_position'] : $defaults['mobile_button_position'];
         $settings['mobile_button_style'] = in_array($settings['mobile_button_style'], ['icon_text', 'icon'], true) ? $settings['mobile_button_style'] : $defaults['mobile_button_style'];
@@ -458 +462 @@
         $settings['form_fields'] = $this->sanitize_form_fields($settings['form_fields']);
         return $settings;
+    }
+
+    /**
+     * Script version used for cache busting: plugin version plus the file's
+     * modification time, so caches and CDNs never serve a stale script.
+     */
+    private function asset_version($relative_path) {
+        $file  = plugin_dir_path(__FILE__) . $relative_path;
+        $mtime = file_exists($file) ? filemtime($file) : false;
+        return $mtime ? self::PLUGIN_VERSION . '.' . $mtime : self::PLUGIN_VERSION;
     }
 
@@ -572 +586 @@
         }
         wp_register_style('submitrelay-public-css', false, [], self::PLUGIN_VERSION);
-        wp_register_script('submitrelay-public-js', plugin_dir_url(__FILE__) . 'assets/public.js', [], self::PLUGIN_VERSION, true);
+        wp_register_script('submitrelay-public-js', plugin_dir_url(__FILE__) . 'assets/public.js', [], $this->asset_version('assets/public.js'), true);
     }
 
@@ -582 +596 @@
         if ($hook === 'toplevel_page_submitrelay') {
             wp_enqueue_editor();
+            wp_enqueue_media();
         }
 
@@ -587 +602 @@
         wp_enqueue_style('submitrelay-admin-css');
 
-        wp_enqueue_script('submitrelay-admin-js', plugin_dir_url(__FILE__) . 'assets/admin.js', [], self::PLUGIN_VERSION, true);
+        wp_enqueue_script('submitrelay-admin-js', plugin_dir_url(__FILE__) . 'assets/admin.js', [], $this->asset_version('assets/admin.js'), true);
         wp_localize_script('submitrelay-admin-js', 'SubmitRelayAdmin', [
             'settingsKey' => $this->settings_key,
@@ -599 +614 @@
                 'select' => __('Select / Dropdown', 'submitrelay'),
                 'radio' => __('Radio', 'submitrelay'),
+                'number' => __('Number (- / +)', 'submitrelay'),
+                'numberMin' => __('Minimum', 'submitrelay'),
+                'numberMax' => __('Maximum', 'submitrelay'),
+                'numberStart' => __('Starting value', 'submitrelay'),
                 'newField' => __('New Field', 'submitrelay'),
                 'required' => __('Required', 'submitrelay'),
@@ -612 +631 @@
         ]);
 
+        wp_add_inline_style('submitrelay-admin-css', '.submitrelay-icon-preview { width: 32px; height: 32px; object-fit: contain; vertical-align: middle; margin-left: 8px; padding: 4px; border-radius: 6px; background: #2563eb; } .submitrelay-icon-preview[hidden] { display: none; } .submitrelay-number-options { display: none; } .submitrelay-number-options label { margin-right: 14px; }');
         wp_add_inline_style('submitrelay-admin-css', '
             .submitrelay-tab-content {
@@ -936 +956 @@
         }
         $base = wp_parse_args(is_array($existing) ? $existing : [], $defaults);
+        // Keep the effective storage choices (including the legacy-install behaviour)
+        // whenever any other settings page is saved.
+        $current_settings = $this->settings();
+        $base['submission_storage'] = $current_settings['submission_storage'];
         foreach (['custom_css', 'button_border_radius', 'button_padding', 'popup_width', 'popup_height', 'popup_border_radius', 'close_size', 'close_position', 'close_bg_color', 'close_text_color'] as $obsolete_key) {
             unset($base[$obsolete_key]);
@@ -961 +985 @@
         }
 
+        if (!$storage_only) {
+            $output['submission_storage'] = $base['submission_storage'];
+        }
         if ($storage_only) {
             $storage_input = is_array($input['submission_storage']) ? $input['submission_storage'] : [];
@@ -1039 +1066 @@
         $output['bottom_text'] = sanitize_textarea_field($input['bottom_text'] ?? $base['bottom_text']);
 
-        $color_fields = ['button_color', 'button_text_color', 'popup_bg_color', 'overlay_color', 'field_text_color', 'placeholder_text_color'];
+        $color_fields = ['button_color', 'button_text_color', 'popup_bg_color', 'overlay_color', 'field_text_color', 'placeholder_text_color', 'outlined_label_bg'];
         foreach ($color_fields as $color) {
             $output[$color] = sanitize_hex_color($input[$color] ?? $base[$color]);
@@ -1059 +1086 @@
         $output['animation_type'] = in_array($input['animation_type'] ?? '', $this->animation_types, true) ? $input['animation_type'] : $base['animation_type'];
         $output['popup_position'] = in_array($input['popup_position'] ?? '', $this->popup_positions, true) ? $input['popup_position'] : $base['popup_position'];
+        $output['button_icon_image'] = esc_url_raw((string) ($input['button_icon_image'] ?? ($base['button_icon_image'] ?? '')));
         $output['device_visibility'] = in_array($input['device_visibility'] ?? '', $this->device_visibility_opts, true) ? $input['device_visibility'] : $base['device_visibility'];
         $output['visibility_mode'] = in_array($input['visibility_mode'] ?? '', $this->visibility_modes, true) ? $input['visibility_mode'] : $base['visibility_mode'];
@@ -1654 +1682 @@
             <?php $this->render_checkbox('enabled', __('Enable Floating Button', 'submitrelay')); ?>
             <?php $this->render_text_field('button_text', __('Button Text', 'submitrelay')); ?>
-            <?php $this->render_text_field('button_icon', __('Button Icon', 'submitrelay')); ?>
+            <?php
+            $submitrelay_icon_settings = $this->settings();
+            $submitrelay_icon_image    = (string) ($submitrelay_icon_settings['button_icon_image'] ?? '');
+            ?>
+            <tr>
+                <th scope="row"><label for="submitrelay-button-icon"><?php esc_html_e('Button Icon', 'submitrelay'); ?></label></th>
+                <td>
+                    <input type="text" class="regular-text" id="submitrelay-button-icon" name="<?php echo esc_attr($this->settings_key); ?>[button_icon]" value="<?php echo esc_attr($submitrelay_icon_settings['button_icon'] ?? ''); ?>" maxlength="255">
+                    <input type="hidden" id="submitrelay-button-icon-image" name="<?php echo esc_attr($this->settings_key); ?>[button_icon_image]" value="<?php echo esc_url($submitrelay_icon_image); ?>">
+                    <button type="button" class="button" id="submitrelay-icon-choose" data-title="<?php esc_attr_e('Choose Button Icon', 'submitrelay'); ?>" data-button="<?php esc_attr_e('Use this image', 'submitrelay'); ?>"><?php esc_html_e('Upload Image', 'submitrelay'); ?></button>
+                    <button type="button" class="button" id="submitrelay-icon-reset"><?php esc_html_e('Use Default Icon', 'submitrelay'); ?></button>
+                    <img id="submitrelay-icon-preview" class="submitrelay-icon-preview" alt=""<?php if ($submitrelay_icon_image !== '') : ?> src="<?php echo esc_url($submitrelay_icon_image); ?>"<?php else : ?> hidden<?php endif; ?>>
+                    <p class="description"><?php esc_html_e('Type text or an emoji, or upload an image to use instead. Click "Use Default Icon" to remove the image and show the text icon again.', 'submitrelay'); ?></p>
+                </td>
+            </tr>
             <?php $this->render_color('button_color', __('Floating Button Color', 'submitrelay')); ?>
             <?php $this->render_color('popup_bg_color', __('Background Color', 'submitrelay')); ?>
@@ -1706 +1748 @@
             if (!is_array($field)) continue;
             $raw_type = $field['type'] ?? 'text';
-            $type = in_array($raw_type, ['text','email','phone','date','time','textarea','select','radio'], true) ? $raw_type : 'text';
+            $type = in_array($raw_type, ['text','email','phone','date','time','textarea','select','radio','number'], true) ? $raw_type : 'text';
             $label = sanitize_text_field($field['label'] ?? '');
             $id = sanitize_key($field['id'] ?? '');
@@ -1733 +1775 @@
                 }
             }
+            $number = [];
+            if ($type === 'number') {
+                $num_min   = (isset($field['min']) && is_numeric($field['min'])) ? (int) $field['min'] : 0;
+                $num_max   = (isset($field['max']) && is_numeric($field['max'])) ? (int) $field['max'] : 10;
+                $num_min   = max(0, min(999, $num_min));
+                $num_max   = max($num_min, min(999, $num_max));
+                $num_start = (isset($field['start']) && is_numeric($field['start'])) ? (int) $field['start'] : $num_min;
+                $num_start = max($num_min, min($num_max, $num_start));
+                $number    = ['min' => $num_min, 'max' => $num_max, 'start' => $num_start];
+            }
             // Backward compatibility: older installations used one `enabled`
             // flag for both forms. If the new per-form flags are absent, map
@@ -1751 +1803 @@
                 'width'=>$width,
                 'options'=>$options,
-            ];
+            ] + $number;
             $seen[$id]=true;
         }
@@ -1774 +1826 @@
                     <span class="submitrelay-drag" title="<?php esc_attr_e('Drag to reorder','submitrelay'); ?>">☰</span>
                     <select name="<?php echo esc_attr($this->settings_key); ?>[form_fields][<?php echo (int)$i; ?>][type]" class="submitrelay-field-type">
-                        <?php foreach (['text'=>__('Text','submitrelay'),'email'=>__('Email','submitrelay'),'phone'=>__('Phone','submitrelay'),'date'=>__('Date','submitrelay'),'time'=>__('Time','submitrelay'),'textarea'=>__('Textarea','submitrelay'),'select'=>__('Select / Dropdown','submitrelay'),'radio'=>__('Radio','submitrelay')] as $type=>$label): ?><option value="<?php echo esc_attr($type); ?>" <?php selected($field['type'],$type); ?>><?php echo esc_html($label); ?></option><?php endforeach; ?>
+                        <?php foreach (['text'=>__('Text','submitrelay'),'email'=>__('Email','submitrelay'),'phone'=>__('Phone','submitrelay'),'date'=>__('Date','submitrelay'),'time'=>__('Time','submitrelay'),'textarea'=>__('Textarea','submitrelay'),'select'=>__('Select / Dropdown','submitrelay'),'radio'=>__('Radio','submitrelay'),'number'=>__('Number (- / +)','submitrelay')] as $type=>$label): ?><option value="<?php echo esc_attr($type); ?>" <?php selected($field['type'],$type); ?>><?php echo esc_html($label); ?></option><?php endforeach; ?>
                     </select>
                     <input type="text" name="<?php echo esc_attr($this->settings_key); ?>[form_fields][<?php echo (int)$i; ?>][label]" value="<?php echo esc_attr($field['label']); ?>" aria-label="<?php esc_attr_e('Label','submitrelay'); ?>">
@@ -1799 +1851 @@
                     </select>
                     <button type="button" class="button-link-delete submitrelay-remove-field" title="<?php echo esc_attr__('Remove field','submitrelay'); ?>" aria-label="<?php echo esc_attr__('Remove field','submitrelay'); ?>" <?php echo $is_core?'disabled':''; ?>><span class="dashicons dashicons-trash" aria-hidden="true"></span></button>
+                    <div class="submitrelay-number-options" style="grid-column:2 / -1; <?php echo ($field['type'] === 'number') ? 'display:block;' : ''; ?>">
+                        <label><?php esc_html_e('Minimum','submitrelay'); ?> <input type="number" class="small-text" min="0" max="999" name="<?php echo esc_attr($this->settings_key); ?>[form_fields][<?php echo (int)$i; ?>][min]" value="<?php echo esc_attr((string) ($field['min'] ?? 0)); ?>"></label>
+                        <label><?php esc_html_e('Maximum','submitrelay'); ?> <input type="number" class="small-text" min="0" max="999" name="<?php echo esc_attr($this->settings_key); ?>[form_fields][<?php echo (int)$i; ?>][max]" value="<?php echo esc_attr((string) ($field['max'] ?? 10)); ?>"></label>
+                        <label><?php esc_html_e('Starting value','submitrelay'); ?> <input type="number" class="small-text" min="0" max="999" name="<?php echo esc_attr($this->settings_key); ?>[form_fields][<?php echo (int)$i; ?>][start]" value="<?php echo esc_attr((string) ($field['start'] ?? 0)); ?>"></label>
+                    </div>
                     <div class="submitrelay-custom-options" style="grid-column:2 / -1; <?php echo in_array($field['type'], ['select','radio'], true) ? 'display:block;' : ''; ?>">
                         <label><?php esc_html_e('Options (one per line)','submitrelay'); ?><br><textarea rows="3" name="<?php echo esc_attr($this->settings_key); ?>[form_fields][<?php echo (int)$i; ?>][options_text]"><?php echo esc_textarea(implode("\n", $field['options'] ?? [])); ?></textarea></label>
@@ -1816 +1873 @@
             function uniqueId(row,base){ const used=new Set([...rows.querySelectorAll('.submitrelay-field-row')].filter(r=>r!==row).map(r=>r.querySelector('input[name$="[id]"]')?.value.trim()).filter(Boolean)); let id=base||'field', n=2; while(used.has(id)){ id=base+'_'+n++; } return id; }
             function syncGeneratedId(row){ const label=row.querySelector('input[name$="[label]"]'); const idInput=row.querySelector('input[name$="[id]"]'); if(!label||!idInput||idInput.readOnly)return; const current=idInput.value.trim(); if(!current || row.dataset.autoId==='1'){ const id=uniqueId(row,slugifyLabel(label.value)); idInput.value=id; row.dataset.generatedId=id; row.dataset.autoId='1'; } }
-            function toggleOptions(row){ const type=row.querySelector('.submitrelay-field-type'); const box=row.querySelector('.submitrelay-custom-options'); if(type&&box) box.style.display=(type.value==='select'||type.value==='radio')?'block':'none'; }
+            function toggleOptions(row){ const type=row.querySelector('.submitrelay-field-type'); const box=row.querySelector('.submitrelay-custom-options'); const numBox=row.querySelector('.submitrelay-number-options'); if(type&&box) box.style.display=(type.value==='select'||type.value==='radio')?'block':'none'; if(type&&numBox) numBox.style.display=(type.value==='number')?'block':'none'; }
             function clearDropIndicators(){ rows.querySelectorAll('.submitrelay-field-row').forEach(r=>r.classList.remove('drop-before','drop-after','drop-side')); }
             function setWidth(row,value){ const select=row?.querySelector('select[name$="[width]"]'); if(select){ select.value=value; } }
@@ -1848 +1905 @@
                 reindex();
             });            const i18n = (window.SubmitRelayAdmin && window.SubmitRelayAdmin.i18n) || {};
-            add?.addEventListener('click',()=>{const i=rows.children.length; const wrap=document.createElement('div'); wrap.className='submitrelay-field-row'; wrap.draggable=true; wrap.dataset.autoId='1'; const base=window.SubmitRelayAdmin.settingsKey+'[form_fields]['+i+']'; const initialId=uniqueId(wrap,slugifyLabel(i18n.newField)); wrap.dataset.generatedId=initialId; wrap.innerHTML='<span class="submitrelay-drag">☰</span><select name="'+base+'[type]" class="submitrelay-field-type"><option value="text">'+i18n.text+'</option><option value="email">'+i18n.email+'</option><option value="phone">'+i18n.phone+'</option><option value="date">'+i18n.date+'</option><option value="time">'+i18n.time+'</option><option value="textarea">'+i18n.textarea+'</option><option value="select">'+i18n.select+'</option><option value="radio">'+i18n.radio+'</option></select><input type="text" name="'+base+'[label]" value="'+i18n.newField+'"><input type="text" name="'+base+'[id]" value="'+initialId+'"><input type="text" name="'+base+'[placeholder]" value=""><label class="submitrelay-switch" title="'+i18n.required+'"><input type="hidden" name="'+base+'[required]" value="0"><input type="checkbox" name="'+base+'[required]" value="1" aria-label="'+i18n.required+'"><span class="submitrelay-switch-track" aria-hidden="true"></span></label><label class="submitrelay-switch" title="'+i18n.popup+'"><input type="hidden" name="'+base+'[popup]" value="0"><input type="checkbox" name="'+base+'[popup]" value="1" checked aria-label="'+i18n.popup+'"><span class="submitrelay-switch-track" aria-hidden="true"></span></label><label class="submitrelay-switch" title="'+i18n.form+'"><input type="hidden" name="'+base+'[form]" value="0"><input type="checkbox" name="'+base+'[form]" value="1" checked aria-label="'+i18n.form+'"><span class="submitrelay-switch-track" aria-hidden="true"></span></label><select name="'+base+'[width]" aria-label="'+i18n.width+'"><option value="full">'+i18n.fullWidth+'</option><option value="half">'+i18n.halfWidth+'</option></select><button type="button" class="button-link-delete submitrelay-remove-field" title="'+i18n.removeField+'" aria-label="'+i18n.removeField+'"><span class="dashicons dashicons-trash" aria-hidden="true"></span></button><div class="submitrelay-custom-options" style="grid-column:2 / -1"><label>'+i18n.options+'<br><textarea rows="3" name="'+base+'[options_text]"></textarea></label></div>'; rows.appendChild(wrap); bind(wrap); reindex(); });
+            add?.addEventListener('click',()=>{const i=rows.children.length; const wrap=document.createElement('div'); wrap.className='submitrelay-field-row'; wrap.draggable=true; wrap.dataset.autoId='1'; const base=window.SubmitRelayAdmin.settingsKey+'[form_fields]['+i+']'; const initialId=uniqueId(wrap,slugifyLabel(i18n.newField)); wrap.dataset.generatedId=initialId; wrap.innerHTML='<span class="submitrelay-drag">☰</span><select name="'+base+'[type]" class="submitrelay-field-type"><option value="text">'+i18n.text+'</option><option value="email">'+i18n.email+'</option><option value="phone">'+i18n.phone+'</option><option value="date">'+i18n.date+'</option><option value="time">'+i18n.time+'</option><option value="textarea">'+i18n.textarea+'</option><option value="select">'+i18n.select+'</option><option value="radio">'+i18n.radio+'</option><option value="number">'+i18n.number+'</option></select><input type="text" name="'+base+'[label]" value="'+i18n.newField+'"><input type="text" name="'+base+'[id]" value="'+initialId+'"><input type="text" name="'+base+'[placeholder]" value=""><label class="submitrelay-switch" title="'+i18n.required+'"><input type="hidden" name="'+base+'[required]" value="0"><input type="checkbox" name="'+base+'[required]" value="1" aria-label="'+i18n.required+'"><span class="submitrelay-switch-track" aria-hidden="true"></span></label><label class="submitrelay-switch" title="'+i18n.popup+'"><input type="hidden" name="'+base+'[popup]" value="0"><input type="checkbox" name="'+base+'[popup]" value="1" checked aria-label="'+i18n.popup+'"><span class="submitrelay-switch-track" aria-hidden="true"></span></label><label class="submitrelay-switch" title="'+i18n.form+'"><input type="hidden" name="'+base+'[form]" value="0"><input type="checkbox" name="'+base+'[form]" value="1" checked aria-label="'+i18n.form+'"><span class="submitrelay-switch-track" aria-hidden="true"></span></label><select name="'+base+'[width]" aria-label="'+i18n.width+'"><option value="full">'+i18n.fullWidth+'</option><option value="half">'+i18n.halfWidth+'</option></select><button type="button" class="button-link-delete submitrelay-remove-field" title="'+i18n.removeField+'" aria-label="'+i18n.removeField+'"><span class="dashicons dashicons-trash" aria-hidden="true"></span></button><div class="submitrelay-custom-options" style="grid-column:2 / -1"><label>'+i18n.options+'<br><textarea rows="3" name="'+base+'[options_text]"></textarea></label></div><div class="submitrelay-number-options" style="grid-column:2 / -1"><label>'+i18n.numberMin+' <input type="number" class="small-text" min="0" max="999" name="'+base+'[min]" value="0"></label> <label>'+i18n.numberMax+' <input type="number" class="small-text" min="0" max="999" name="'+base+'[max]" value="10"></label> <label>'+i18n.numberStart+' <input type="number" class="small-text" min="0" max="999" name="'+base+'[start]" value="0"></label></div>'; rows.appendChild(wrap); bind(wrap); reindex(); });
         })();
 
@@ -1868 +1925 @@
             <div style="margin-top:18px;">
                 <table class="form-table" role="presentation">
+                    <?php $this->render_color('outlined_label_bg', __('Field Label Background (shortcode form)', 'submitrelay')); ?>
                     <?php $this->render_color('field_text_color', __('Field Text Color', 'submitrelay')); ?>
                     <?php $this->render_color('placeholder_text_color', __('Placeholder Text Color', 'submitrelay')); ?>
@@ -2009 +2067 @@
             <?php $this->render_select('popup_position', __('Popup Position', 'submitrelay'), $this->get_position_option_labels('popup')); ?>
             <?php $this->render_text_field('auto_open_delay', __('Auto-open Delay (sec)', 'submitrelay'), 'number', 'small-text'); ?>
-        </table>
-        <?php
-    }
-
-    private function render_overlay_tab() {
-        $settings = $this->settings();
-        ?>
-        <table class="form-table">
-            <?php $this->render_color('overlay_color', __('Overlay Color', 'submitrelay')); ?>
-            <tr>
-                <th scope="row"><?php esc_html_e('Overlay Opacity', 'submitrelay'); ?></th>
-                <td>
-                    <div class="submitrelay-opacity-wrapper">
-                        <input type="range" name="<?php echo esc_attr($this->settings_key); ?>[overlay_opacity]" min="0" max="1" step="0.05" value="<?php echo esc_attr($settings['overlay_opacity']); ?>">
-                        <span id="opacityValue"><?php echo esc_html($settings['overlay_opacity']); ?></span>
-                    </div>
-                </td>
-            </tr>
-            <?php $this->render_select('animation_type', __('Animation Type', 'submitrelay'), $this->get_position_option_labels('animation')); ?>
         </table>
         <?php
@@ -2400 +2439 @@
                 foreach (($field['options'] ?? []) as $option) $html .= '<option value="' . esc_attr($option) . '">' . esc_html($option) . '</option>';
                 $html .= '</select>';
+            } elseif ($type === 'number') {
+                $num_min   = isset($field['min']) ? (int) $field['min'] : 0;
+                $num_max   = isset($field['max']) ? (int) $field['max'] : 10;
+                $num_start = isset($field['start']) ? (int) $field['start'] : $num_min;
+                $html .= '<div class="submitrelay-stepper">';
+                $html .= '<button type="button" class="submitrelay-step-btn submitrelay-step-minus" aria-label="' . esc_attr__('Decrease', 'submitrelay') . '">&minus;</button>';
+                $html .= '<input type="number" id="' . esc_attr($input_id) . '" name="' . esc_attr($name) . '" value="' . esc_attr((string) $num_start) . '" min="' . esc_attr((string) $num_min) . '" max="' . esc_attr((string) $num_max) . '" step="1" inputmode="numeric" class="submitrelay-step-input">';
+                $html .= '<button type="button" class="submitrelay-step-btn submitrelay-step-plus" aria-label="' . esc_attr__('Increase', 'submitrelay') . '">+</button>';
+                $html .= '</div>';
             } elseif ($type === 'radio') {
                 $radio_legend_id = $input_id . '-legend';
@@ -2524 +2572 @@
         echo $compact_css; ?>
         <?php
-        return ob_get_clean();
+        $popup_css = ob_get_clean();
+        if (!empty($settings['button_icon_image'])) {
+            $popup_css .= '.fsp-btn-icon-img { display: block; width: 22px; height: 22px; object-fit: contain; }';
+        }
+        $popup_css .= $this->get_outlined_field_css('.fsp-form-wrap', $settings['popup_bg_color'] ?? '#ffffff');
+        return $popup_css;
+    }
+
+    /**
+     * Built-in "outlined labels" field style. This is a fixed preset (not custom
+     * CSS input); the only configurable value is a validated hex colour.
+     */
+    private function get_outlined_field_css($scope, $label_bg) {
+        $s = $scope . '.submitrelay-outlined';
+        $bg = sanitize_hex_color($label_bg);
+        if (!$bg) {
+            $bg = '#ffffff';
+        }
+        $css  = $s . ' .submitrelay-field { position: relative; margin: 10px 0 12px !important; }';
+        $css .= $s . ' .submitrelay-field > .submitrelay-field-label { position: absolute !important; top: 0 !important; left: 14px !important; width: auto !important; height: auto !important; max-width: calc(100% - 28px) !important; margin: 0 !important; padding: 0 6px !important; transform: translateY(-50%); clip: auto !important; overflow: hidden !important; text-overflow: ellipsis; white-space: nowrap !important; border: 0 !important; background: ' . $bg . ' !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: 0.04em; text-transform: uppercase; z-index: 2; pointer-events: none; }';
+        $css .= $s . ' input, ' . $s . ' textarea, ' . $s . ' select { background-color: transparent !important; border: 1px solid #9ca3af !important; }';
+        $css .= $s . ' input::placeholder, ' . $s . ' textarea::placeholder { color: transparent !important; opacity: 0; }';
+        $css .= $s . ' input:focus, ' . $s . ' textarea:focus, ' . $s . ' select:focus { background-color: transparent !important; border-color: #2563eb !important; box-shadow: 0 0 0 1px #2563eb !important; outline: none !important; }';
+        $css .= $s . ' .submitrelay-stepper { display: flex; align-items: center; justify-content: space-between; gap: 8px; box-sizing: border-box; width: 100%; margin: 0; padding: 0 10px; border: 1px solid #9ca3af; border-radius: 12px; }';
+        $css .= $s . ' .submitrelay-stepper:focus-within { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb; }';
+        $css .= $s . ' .submitrelay-stepper .submitrelay-step-input { flex: 1 1 auto; min-width: 0; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 11px 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; text-align: center; }';
+        $css .= $s . ' .submitrelay-stepper-ready .submitrelay-step-input { -moz-appearance: textfield; appearance: textfield; }';
+        $css .= $s . ' .submitrelay-stepper-ready .submitrelay-step-input::-webkit-outer-spin-button, ' . $s . ' .submitrelay-stepper-ready .submitrelay-step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }';
+        $css .= $s . ' .submitrelay-stepper:not(.submitrelay-stepper-ready) .submitrelay-step-btn { display: none !important; }';
+        $css .= $s . ' .submitrelay-stepper .submitrelay-step-btn { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; width: 24px !important; min-width: 24px !important; height: 24px !important; min-height: 24px !important; margin: 0 !important; padding: 0 !important; border: 1.5px solid #1f2937 !important; border-radius: 50% !important; background: transparent !important; color: #1f2937 !important; box-shadow: none !important; filter: none !important; transform: none !important; font-size: 0 !important; line-height: 0 !important; overflow: hidden; cursor: pointer; }';
+        $css .= $s . ' .submitrelay-stepper .submitrelay-step-btn::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.5px; background: #1f2937; transform: translate(-50%, -50%); }';
+        $css .= $s . ' .submitrelay-stepper .submitrelay-step-plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1.5px; height: 10px; background: #1f2937; transform: translate(-50%, -50%); }';
+        $css .= $s . ' .submitrelay-stepper .submitrelay-step-btn:hover:not(:disabled) { background: rgba(31, 41, 55, 0.08) !important; filter: none !important; transform: none !important; }';
+        $css .= $s . ' .submitrelay-stepper .submitrelay-step-btn:disabled { opacity: 0.35 !important; cursor: not-allowed; }';
+        $css .= $s . ' input[type="radio"], ' . $s . ' input[type="checkbox"] { border: revert !important; box-shadow: none !important; }';
+        return $css;
     }
 
@@ -2546 +2629 @@
                 'id' => true, 'class' => true, 'style' => true, 'aria-hidden' => true,
             ],
+            'img' => [
+                'class' => true, 'src' => true, 'alt' => true, 'width' => true, 'height' => true,
+            ],
             'fieldset' => [
                 'id' => true, 'class' => true, 'aria-labelledby' => true,
@@ -2560 +2646 @@
                 'class' => true, 'placeholder' => true, 'autocomplete' => true,
                 'required' => true, 'checked' => true, 'disabled' => true,
-                'aria-label' => true, 'aria-required' => true, 'aria-hidden' => true, 'inputmode' => true, 'title' => true, 'data-*' => true, 'maxlength' => true, 'pattern' => true,
+                'aria-label' => true, 'aria-required' => true, 'aria-hidden' => true, 'inputmode' => true, 'title' => true, 'data-*' => true, 'maxlength' => true, 'pattern' => true, 'min' => true, 'max' => true, 'step' => true,
             ],
             'textarea' => [
@@ -2585 +2671 @@
     private function render_popup_html($settings) {
         $button_html = '';
-        if (!empty($settings['button_icon'])) $button_html .= '<span class="fsp-btn-icon">' . wp_kses_post($settings['button_icon']) . '</span> ';
+        if (!empty($settings['button_icon_image'])) {
+            $button_html .= '<span class="fsp-btn-icon"><img class="fsp-btn-icon-img" src="' . esc_url($settings['button_icon_image']) . '" alt="" width="22" height="22"></span> ';
+        } elseif (!empty($settings['button_icon'])) {
+            $button_html .= '<span class="fsp-btn-icon">' . wp_kses_post($settings['button_icon']) . '</span> ';
+        }
         $button_html .= '<span class="fsp-btn-text">' . esc_html($settings['button_text']) . '</span>';
 
@@ -2594 +2684 @@
         ?>
         <button id="fsp-float-btn"><?php echo wp_kses_post($button_html); ?></button>
+
         <div id="fsp-overlay"></div>
         <div id="fsp-popup" role="dialog" aria-modal="true" aria-label="<?php esc_attr_e('Contact form', 'submitrelay'); ?>">
@@ -2603 +2694 @@
                 <div class="fsp-description"><?php echo nl2br(esc_html($settings['popup_description'])); ?></div>
             <?php endif; ?>
-            <div class="fsp-form-wrap"><?php echo wp_kses($contact_form, $this->get_popup_allowed_html()); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Form markup is generated internally with escaped attributes and a WordPress-generated nonce. ?></div>
+            <div class="fsp-form-wrap submitrelay-outlined"><?php echo wp_kses($contact_form, $this->get_popup_allowed_html()); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Form markup is generated internally with escaped attributes and a WordPress-generated nonce. ?></div>
             <?php if (!empty($settings['show_bottom_text']) && !empty($settings['bottom_text'])): ?>
                 <div class="fsp-bottom-text"><?php echo wp_kses_post($settings['bottom_text']); ?></div>
@@ -3154 +3245 @@
                 wp_send_json_error(['message' => sprintf(__('Please choose a valid option for %s.', 'submitrelay'), sanitize_text_field($field['label'] ?? $id))]);
             }
+            if (($field['type'] ?? '') === 'number') {
+                $num_min = isset($field['min']) ? (int) $field['min'] : 0;
+                $num_max = isset($field['max']) ? (int) $field['max'] : 10;
+                if ($value !== '' && (!preg_match('/^\d{1,3}$/', $value) || (int) $value < $num_min || (int) $value > $num_max)) {
+                    /* translators: %s is the form field label. */
+                    wp_send_json_error(['message' => sprintf(__('Please enter a valid number for %s.', 'submitrelay'), sanitize_text_field($field['label'] ?? $id))]);
+                }
+            }
             if (($field['type'] ?? '') === 'phone' && $value !== '' && !$this->is_valid_phone_number($value)) {
                 /* translators: %s is the form field label. */
@@ -3335 +3434 @@
         $form_fields = $this->render_form_fields($settings, 'shortcode');
 
-        $form_html = '<div class="submitrelay-shortcode-wrapper" style="display:block;width:100%;max-width:100%;min-width:0;margin:0 auto;box-sizing:border-box;">
+        $form_html = '<div class="submitrelay-shortcode-wrapper submitrelay-outlined" style="display:block;width:100%;max-width:100%;min-width:0;margin:0 auto;box-sizing:border-box;">
             <form method="post" class="submitrelay-shortcode-form" style="display:block;width:100%;max-width:100%;min-width:0;margin:0;box-sizing:border-box;" data-wa-enabled="' . ($whatsapp_enabled ? '1' : '0') . '" data-wa-number="' . esc_attr($wa_number) . '" data-wa-template="' . esc_attr($wa_template) . '" data-wa-delay="' . $wa_delay . '" data-wa-target="' . esc_attr($settings['whatsapp_redirect_target'] ?? 'new_tab') . '" data-success-msg="' . $success_msg . '" data-error-msg="' . $error_msg . '" data-site-title="' . $site_title_js . '" data-site-url="' . $site_url_js . '">
                 ' . $form_fields . '
@@ -3594 +3693 @@
         }());
         ';
+        $inline_css .= $this->get_outlined_field_css('.submitrelay-shortcode-wrapper', $settings['outlined_label_bg'] ?? '#ffffff');
         wp_enqueue_style('submitrelay-public-css');
         wp_enqueue_script('submitrelay-public-js');