fix(footer): prevent newsletter form reload, add validation, and stop input expanding on focus #880

pankaj-bind · 2025-12-17T12:38:10Z

Notes for Reviewers

This PR fixes issue #827 and some more issues

Fix: Prevent default form submission to stop page refresh on Subscribe.
Currently, clicking the Subscribe button refreshes the page, which does not align with modern UX standards. Additionally, users do not receive any feedback indicating whether the subscription was successful or failed.

Validation: Add client-side validation (required + regex) and focus on error.

UX: Prevent unexpected input expansion by removing width change on :focus and adding a subtle border transition.

Signed commits

Yes, I signed my commits.

… input expanding on focus Signed-off-by: Pankaj Kumar Bind <pankajbind30@gmail.com>

Signed-off-by: Pankaj Kumar Bind <pankajbind30@gmail.com>

netlify · 2025-12-17T12:38:15Z

✅ Deploy Preview for bejewelled-pegasus-b0ce81 ready!

Name	Link
🔨 Latest commit	`bcb623a`
🔍 Latest deploy log	https://app.netlify.com/projects/bejewelled-pegasus-b0ce81/deploys/6942a9503ad2db0007273c62
😎 Deploy Preview	https://deploy-preview-880--bejewelled-pegasus-b0ce81.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

Pull request overview

This PR addresses issue #827 by fixing several UX issues with the newsletter subscription form in the footer. The changes prevent page reloads on form submission, add client-side email validation with user feedback, and improve the input field's focus behavior.

Key Changes:

Added form submission prevention with e.preventDefault() to stop page refresh
Implemented client-side email validation with regex pattern and real-time error messaging
Simplified CSS focus styles to prevent unexpected input expansion while maintaining visual feedback

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 6 comments.

File	Description
layouts/partials/footer.html	Added form IDs, email input validation, error message display area, and JavaScript event handlers for form submission and validation
assets/scss/_footer_project.scss	Removed width/padding changes on input focus, replaced with subtle border transition for better UX

Copilot · 2025-12-17T12:43:06Z

layouts/partials/footer.html

      <div class="row footer-info2 subscribe">
        <div class="footer-end">
-          <form name="contactform">
+          <form name="contactform" id="newsletter-form">


The form lacks an action attribute or backend integration to actually handle newsletter subscriptions. Currently, the form only shows a success message but doesn't submit the email address anywhere. You need to add either a form action URL, integrate with a newsletter service (e.g., Mailchimp, Netlify Forms), or implement an API endpoint to handle the subscription.

Copilot · 2025-12-17T12:43:07Z

layouts/partials/footer.html

+      <script>
+        document.addEventListener('DOMContentLoaded', function() {
+          const form = document.getElementById('newsletter-form');
+          const emailInput = document.getElementById('newsletter-email');
+          const messageDiv = document.getElementById('newsletter-message');
+
+          function showMessage(text, isError) {
+            messageDiv.textContent = text;
+            messageDiv.style.color = isError ? '#ff6b6b' : '#00d3a9';
+          }
+
+          function clearMessage() {
+            messageDiv.textContent = '';
+          }
+
+          if (form) {
+            emailInput.addEventListener('input', clearMessage);
+
+            form.addEventListener('submit', function(e) {
+              e.preventDefault();
+
+              const email = emailInput.value.trim();
+
+              if (!email) {
+                showMessage('Please enter your email address', true);
+                emailInput.focus();
+                return false;
+              }
+
+              const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+              if (!emailRegex.test(email)) {
+                showMessage('Please enter a valid email address', true);
+                emailInput.focus();
+                return false;
+              }
+
+              showMessage('Thank you for subscribing!', false);
+              emailInput.value = '';
+
+              return false;
+            });
+          }
+        });
+      </script>


Consider extracting this JavaScript code into a separate file in assets/js/ (e.g., newsletter-form.js) following the project structure where JavaScript files are kept separate from HTML templates. This improves maintainability and allows for better code organization.

Copilot · 2025-12-17T12:43:07Z

layouts/partials/footer.html

+          function showMessage(text, isError) {
+            messageDiv.textContent = text;
+            messageDiv.style.color = isError ? '#ff6b6b' : '#00d3a9';
+          }


Hardcoded color values in JavaScript should be moved to CSS classes or variables. Define error and success message styles in the SCSS file (e.g., .newsletter-message--error and .newsletter-message--success) and toggle classes instead of directly manipulating inline styles. This keeps styling consistent with the rest of the project and makes theme changes easier.

layouts/partials/footer.html

Copilot · 2025-12-17T12:43:08Z

layouts/partials/footer.html

+                  <input class="footer-input" id="newsletter-email" type="email" placeholder="Email Address" required />
+                  <button class="footer-button" title="Subscribe" type="submit">Subscribe</button>
+                </div>
+                <div id="newsletter-message" style="margin-top: 0.5rem; font-size: 0.9rem; min-height: 1.5rem;"></div>


Consider adding aria-describedby="newsletter-message" to the email input and aria-live="polite" to the message div to improve accessibility for screen reader users. This will ensure that validation messages are announced to users who rely on assistive technology.

Suggested change

<input class="footer-input" id="newsletter-email" type="email" placeholder="Email Address" required />

<button class="footer-button" title="Subscribe" type="submit">Subscribe</button>

</div>

<div id="newsletter-message" style="margin-top: 0.5rem; font-size: 0.9rem; min-height: 1.5rem;"></div>

<input class="footer-input" id="newsletter-email" type="email" placeholder="Email Address" required aria-describedby="newsletter-message" />

<button class="footer-button" title="Subscribe" type="submit">Subscribe</button>

</div>

<div id="newsletter-message" aria-live="polite" style="margin-top: 0.5rem; font-size: 0.9rem; min-height: 1.5rem;"></div>

Copilot · 2025-12-17T12:43:08Z

layouts/partials/footer.html

+              <div style="display: flex; align-items: flex-start; flex-direction: column;">
+                <div style="display: flex; align-items: center;">
+                  <input class="footer-input" id="newsletter-email" type="email" placeholder="Email Address" required />
+                  <button class="footer-button" title="Subscribe" type="submit">Subscribe</button>
+                </div>
+                <div id="newsletter-message" style="margin-top: 0.5rem; font-size: 0.9rem; min-height: 1.5rem;"></div>
+              </div>


Inline styles should be moved to the SCSS file for better maintainability and consistency with the rest of the codebase. Create CSS classes in assets/scss/_footer_project.scss for these layout styles (e.g., .newsletter-wrapper, .newsletter-input-container, .newsletter-message).

- Extract inline JavaScript to external file (newsletter.js) - Replace inline styles with CSS classes for better maintainability - Add proper ARIA labels and semantic HTML for accessibility - Add JSDoc comments for better code documentation - Add visually-hidden class for accessible form labels - Use Hugo asset pipeline for JavaScript loading with defer attribute Signed-off-by: Pankaj Kumar Bind <pankajbind30@gmail.com>

pankaj-bind · 2025-12-17T13:12:48Z

@leecalcote I’ve fixed the issues and made the necessary changes suggested by Copilot.

pankaj-bind added 2 commits December 17, 2025 18:01

fix(footer): prevent newsletter form reload, add validation, and stop…

f796e54

… input expanding on focus Signed-off-by: Pankaj Kumar Bind <pankajbind30@gmail.com>

removed comments

8003d2a

Signed-off-by: Pankaj Kumar Bind <pankajbind30@gmail.com>

Copilot AI review requested due to automatic review settings December 17, 2025 12:38

github-actions bot added component/cloud-docs component/kanvas-docs labels Dec 17, 2025

Copilot started reviewing on behalf of pankaj-bind December 17, 2025 12:38 View session

Copilot AI reviewed Dec 17, 2025

View reviewed changes

pankaj-bind force-pushed the fix-footer branch from 8495c0e to bcb623a Compare December 17, 2025 12:59

pankaj-bind closed this Dec 17, 2025

pankaj-bind deleted the fix-footer branch December 17, 2025 13:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(footer): prevent newsletter form reload, add validation, and stop input expanding on focus #880

fix(footer): prevent newsletter form reload, add validation, and stop input expanding on focus #880

Uh oh!

pankaj-bind commented Dec 17, 2025 •

edited

Loading

Uh oh!

netlify bot commented Dec 17, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 17, 2025

Uh oh!

Copilot AI Dec 17, 2025

Uh oh!

Copilot AI Dec 17, 2025

Uh oh!

Uh oh!

Copilot AI Dec 17, 2025

Uh oh!

Copilot AI Dec 17, 2025

Uh oh!

pankaj-bind commented Dec 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

fix(footer): prevent newsletter form reload, add validation, and stop input expanding on focus #880

fix(footer): prevent newsletter form reload, add validation, and stop input expanding on focus #880

Uh oh!

Conversation

pankaj-bind commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for bejewelled-pegasus-b0ce81 ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

pankaj-bind commented Dec 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

pankaj-bind commented Dec 17, 2025 •

edited

Loading

netlify bot commented Dec 17, 2025 •

edited

Loading