Problem/Motivation

The footer "Join Our Mission" column ends with a "Subscribe" button that does nothing. Clicking it as an anonymous visitor produces no response at all: no form, no navigation, no message.

The component is placed in config/canvas.page_region.vartheme_bs5_horizonaid.footer.yml as sdc.vartheme_bs5_horizonaid.button with no href input:

inputs: '{"variant":"btn-accent","outline":false,"size":"btn-md","label":"Subscribe","target":"self",...}'

The Button component renders an <a> only when a URL is provided, and otherwise falls back to a bare <button type="button"> with no behaviour attached, which is exactly what ships today:

<button data-component-id="vartheme_bs5_horizonaid:button" type="button" class="btn btn-accent btn-md rounded-pill ..."><span>Subscribe</span></button>

Found during Marketplace Template QA. The Educare site template does not have this problem: its footer SUBSCRIBE button carries an href and resolves normally.

Note for anyone reviewing the attached screenshots: the defect is not visible. A bare <button> and the fixed <a> carry the same classes and render pixel for pixel identically, so a before and after screenshot of the footer are byte identical. That is why the original QA report relied on DOM inspection. The attached footer screenshot shows the region; the behaviour is what changes.

Horizon Aid footer Join Our Mission column with the Subscribe button

Steps to reproduce

  1. Install the Horizon Aid site template.
  2. Visit the front page as an anonymous user.
  3. Scroll to the footer "Join Our Mission" section.
  4. Click "Subscribe".

Expected: the visitor reaches somewhere they can subscribe. Actual: nothing happens.

Proposed resolution

Give the button the destination it is missing, keeping the design intent from the Horizon Aid stylesheet, which specifies a Subscribe button in the footer rather than an inline email field:

inputs: '{"variant":"btn-accent","outline":false,"size":"btn-md","label":"Subscribe","href":"/form/newsletter-subscribe","target":"self",...}'

This points at the Newsletter Subscribe webform that Varbase already provides through varbase_webform_base, so no new content or dependency is added. Verified anonymously end to end: the footer renders a real link, the form page accepts a subscription, and the submission is recorded.

Note that embedding the webform directly in the footer is not a workable alternative: a form placed inside a Canvas SDC section cannot complete its submit cycle, because the response it needs to send is wrapped by Twig into a RuntimeError before Canvas can re-throw it. Linking to the form avoids that entirely.

The Newsletter Subscribe form the button now points at, on desktop:

Newsletter Subscribe page on desktop

And on mobile:

Newsletter Subscribe page on mobile

Remaining tasks

  • ✅ File an issue
  • ✅ Addition/Change/Update/Fix
  • ✅ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ Developer Documentation support
  • ➖ User Guide Documentation support
  • ✅ UX/UI designer responsibilities
  • ✅ Accessibility and Readability
  • ❌ Reviewed by a human
  • ❌ Code review by maintainers
  • ❌ Full testing and approval
  • ❌ Credit contributors
  • ❌ Review with the product owner
  • ❌ Update Release Notes
  • ❌ Release

User interface changes

  • The footer "Subscribe" button becomes a working link to the Newsletter Subscribe form. Its appearance is unchanged.

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • Fixed the footer "Subscribe" button, which had no destination and did nothing when clicked. It now links to the Newsletter Subscribe form.

Issue fork horizonaid-3622817

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rajab natshah created an issue. See original summary.

rajab natshah’s picture

Issue summary: View changes
StatusFileSize
new105.92 KB
new114.48 KB
new104.31 KB

rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes
StatusFileSize
new48.18 KB
new116.79 KB
new107.67 KB

  • rajab natshah committed 70655198 on 1.0.x
    fix: #3622817 Footer Subscribe button is non-functional: it has no link...