feat: Leave Feedback form — multi-select checkboxes + actually-working submit

The right-column "Leave Feedback" form on the About page has been
expanded from two radio buttons (user picked one of two) to seven
checkboxes (user can pick any), plus an optional message textarea.
The submit button — which previously called toggleSection() on
element IDs that never existed and did nothing — now AJAX-posts
to a new server-side handler that emails the site admin via
wp_mail().

FORM OPTIONS (checkboxes — multi-select)
- I have ideas to improve this plugin
- I need help with this plugin
- I found a bug
- I'd like to request a new feature
- I'd like to share my use case
- Just saying thanks
- Other

SUBMISSION FLOW
- Client-side: at least one checkbox OR a message is required; an
  inline hint shows otherwise.
- AJAX POST wp_notes_submit_feedback with topics[] + message + nonce.
- Server handler (manage_options capability + nonce checked)
  sanitizes input, allow-lists the seven topic keys, builds a
  plain-text email body (sender + site URL + plugin version +
  checked topics with pretty labels + message), and ships it to
  get_option('admin_email') via wp_mail() with Reply-To set to the
  submitting user.
- Inline success message replaces the form on success; inline error
  lets the user retry on failure.

The toggleSection() helper that the old broken handler used is kept
defined for now — it's no longer referenced anywhere on the About
page, so it's flagged in the changelog for a future Tier-2 removal
pass.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

inc/wp-notes-about.php

@@ -164,9 +164,24 @@ function wp_notes_about_page() {
             </a>
             <!-- Feedback Options -->
             <form id="wp-notes-feedback-options" style="margin-top: 20px;">
-                <label><input type="radio" name="feedback" value="improve"> I have ideas to improve this plugin</label><br>
-                <label><input type="radio" name="feedback" value="help"> I need help with this plugin</label><br>
-                <input type="submit" value="Submit Feedback" style="background: #0073aa; color: #fff; border: none; padding: 8px 12px; cursor: pointer; margin-top: 10px;">
+                <p style="margin: 0 0 8px; font-weight: 600;">What's on your mind? <span style="font-weight: 400; color: #646970;">(pick any)</span></p>
+                <label style="display:block; margin-bottom:6px;"><input type="checkbox" name="feedback_topics[]" value="improve"> I have ideas to improve this plugin</label>
+                <label style="display:block; margin-bottom:6px;"><input type="checkbox" name="feedback_topics[]" value="help"> I need help with this plugin</label>
+                <label style="display:block; margin-bottom:6px;"><input type="checkbox" name="feedback_topics[]" value="bug"> I found a bug</label>
+                <label style="display:block; margin-bottom:6px;"><input type="checkbox" name="feedback_topics[]" value="feature"> I'd like to request a new feature</label>
+                <label style="display:block; margin-bottom:6px;"><input type="checkbox" name="feedback_topics[]" value="use-case"> I'd like to share my use case</label>
+                <label style="display:block; margin-bottom:6px;"><input type="checkbox" name="feedback_topics[]" value="thanks"> Just saying thanks 🍀</label>
+                <label style="display:block; margin-bottom:10px;"><input type="checkbox" name="feedback_topics[]" value="other"> Other</label>
+
+                <p style="margin: 12px 0 4px; font-weight: 600;">Anything to add? <span style="font-weight: 400; color: #646970;">(optional)</span></p>
+                <textarea name="feedback_message" rows="4" style="width: 100%; box-sizing: border-box;" placeholder="A few sentences with more detail…"></textarea>
+
+                <?php wp_nonce_field('wp_notes_feedback_submit', 'wp_notes_feedback_nonce'); ?>
+
+                <p style="margin-top: 12px; margin-bottom: 0;">
+                    <input type="submit" id="wp-notes-feedback-submit" value="Submit Feedback" class="button button-primary">
+                </p>
+                <p id="wp-notes-feedback-status" role="status" style="margin: 10px 0 0; min-height: 1.4em;"></p>
             </form>
             <br>
             <!-- Buy Me a Coffee Button -->
@@ -196,15 +211,54 @@ function wp_notes_about_page() {
             }
         }
 
-        // JavaScript to handle feedback form toggling
+        // Submit the feedback form → AJAX → wp_mail() to the site admin.
+        // No toggleSection() shuffle anymore (the old code targeted IDs
+        // that never existed). Validates that at least one topic is
+        // checked, otherwise the submit is a no-op with a hint.
         document.getElementById('wp-notes-feedback-options').addEventListener('submit', function(e) {
             e.preventDefault();
-            var feedbackType = document.querySelector('input[name="feedback"]:checked').value;
-            if (feedbackType === 'improve') {
-                toggleSection('feedback-form-improve');
-            } else if (feedbackType === 'help') {
-                toggleSection('feedback-form-help');
+            var form     = e.target;
+            var btn      = document.getElementById('wp-notes-feedback-submit');
+            var statusEl = document.getElementById('wp-notes-feedback-status');
+            var topics   = Array.from(form.querySelectorAll('input[name="feedback_topics[]"]:checked')).map(function (i) { return i.value; });
+            var message  = (form.querySelector('textarea[name="feedback_message"]').value || '').trim();
+            var nonce    = (form.querySelector('input[name="wp_notes_feedback_nonce"]').value || '');
+
+            if (topics.length === 0 && message === '') {
+                statusEl.textContent = 'Pick at least one option (or write a message) before submitting.';
+                statusEl.style.color = '#8a2424';
+                return;
             }
+
+            btn.disabled    = true;
+            btn.value       = 'Sending…';
+            statusEl.textContent = '';
+            statusEl.style.color = '';
+
+            var fd = new FormData();
+            fd.append('action', 'wp_notes_submit_feedback');
+            fd.append('nonce',  nonce);
+            topics.forEach(function (t) { fd.append('topics[]', t); });
+            fd.append('message', message);
+
+            fetch(ajaxurl, { method: 'POST', credentials: 'same-origin', body: fd })
+                .then(function (r) { return r.json(); })
+                .then(function (res) {
+                    if (res && res.success) {
+                        form.innerHTML = '<p style="color:#1e6e40; font-weight:600; margin:0;">Thanks — your feedback has been sent. 🍀</p>';
+                    } else {
+                        statusEl.textContent = (res && res.data) ? String(res.data) : 'Sorry, something went wrong. Please try again.';
+                        statusEl.style.color = '#8a2424';
+                        btn.disabled = false;
+                        btn.value    = 'Submit Feedback';
+                    }
+                })
+                .catch(function () {
+                    statusEl.textContent = 'Network error — please try again in a moment.';
+                    statusEl.style.color = '#8a2424';
+                    btn.disabled = false;
+                    btn.value    = 'Submit Feedback';
+                });
         });
     </script>
     <?php