Add email signup form and social icon row to footer's Connect With Us column - #29
Merged
Conversation
…s" column fortinet.com's real footer pairs its "Connect With Us" column with an email signup form above it and a row of social icons below its own link list — neither existed here at all. - Email signup form (buildEmailForm in footer.js): matches fortinet.com's own .ftnt-subscribe-form layout (white input, red submit-arrow button, consent checkbox + copy). No real subscription backend exists for this site: fortinet.com posts to its own Eloqua marketing-automation account (site/campaign/form IDs baked into hidden fields), which isn't something we have or should submit to — this is presentational only for now (preventDefault + a client-side "Subscription successful!" message), pending a decision on where this should actually go. - Social icon row (buildSocialRow in footer.js): finds links in the "Connect With Us" column by their visible text (LinkedIn/X/YouTube/ Instagram/Facebook/RSS), moves them into their own list, and swaps in the matching icon — self-hosted from fortinet.com's own DAM (icons/social-media/*_icon_footer.svg), already white in the source so no recolor needed. No-ops if those links haven't been authored yet (content still needs to be added — see the content draft shared earlier in this conversation). Both verified at 390px and 1464px: the email form renders correctly with just the existing content, and the social-icon extraction was verified by injecting the 6 platform links the same way an author would and confirming all 6 matched and converted correctly. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
|
…com's real links - Columns were vertically centered within their shared row height (the generic columns block's own align-items:center, meant for its usual image+text pairing elsewhere on the site), not top-aligned — so a shorter column like "Connect With Us" (now with the email form prepended to it) started ~64px below its taller siblings instead of flush with their tops. Overridden to align-items:start for the footer's own use of this block. - buildSocialRow now falls back to fortinet.com's own real 6 links (DEFAULT_SOCIAL_LINKS) when none are authored in the footer doc yet, rather than silently omitting the row until that content edit happens. Content-authored links (matched by visible platform name, as before) still take priority if present. Verified: "More" and "Connect With Us" columns now start at the exact same y-position, and all 6 social icons render immediately without requiring any content change. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- Link gap within a column: 8px -> 20px, matching fortinet.com's own
measured li margin-bottom exactly.
- Social icon row's top margin: bumped to 32px, deliberately more than
fortinet.com's own 20px gap there, per explicit request.
Both new margin declarations needed a specificity fix: .footer-social and
.footer-social li are each canceled out by a same-or-higher-specificity
generic rule elsewhere in this file ("footer .footer ul" zeroing every
list's margin, "footer .footer li" setting the 20px between-link spacing)
that either tied and came later in the file, or was one tier more specific
outright. Fixed by matching that structure ("footer .footer ul.footer-social")
or repeating the class to add a tier ("footer .footer-social.footer-social li")
rather than just naming the class alone.
Verified: link-to-link gap now 20px (was already the effective value before
this change, since a prior 8px li margin was already losing a margin-collapse
against the social row's own then-uncontested 20px top margin — but is now an
intentional, correct value rather than an accidental one). Social row's own
top gap now 32px (was silently 0 due to the specificity bug above, despite
the CSS already saying 20px).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Bumped the email form's own margin-bottom from 24px to 67px (measured the exact 43px gap needed directly) so the heading below it lines up with that specific reference point in the adjacent column, per explicit request. Verified: the two are now within a fraction of a pixel of each other (diff: -0.09px). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
fortinet.com's "Connect With Us" column pairs an email signup form above it and a row of social icons below its own link list — neither existed here at all.
buildEmailForminfooter.js): matches fortinet.com's own.ftnt-subscribe-formlayout (white input, red submit-arrow button, consent checkbox + copy). No real subscription backend exists for this site — fortinet.com posts to its own Eloqua marketing-automation account (site/campaign/form IDs baked into hidden fields), which isn't something we have or should submit to. This is presentational only for now (preventDefault+ a client-side "Subscription successful!" message) pending a decision on where this should actually go — happy to wire it up once there's a real endpoint (or amailto:fallback, if that's preferred).buildSocialRowinfooter.js): finds links in the "Connect With Us" column by their visible text (LinkedIn/X/YouTube/Instagram/Facebook/RSS), moves them into their own list, and swaps in the matching icon — self-hosted from fortinet.com's own DAM, already white in the source so no recolor needed.Note: social icons won't show on the preview yet
The social-icon code is content-driven and correctly no-ops until those 6 links exist in the footer doc (same content draft shared earlier in this conversation has the exact 6 links to add). Verified the extraction/conversion logic directly by injecting those links into a live page and confirming all 6 matched and rendered correctly — screenshots in chat. The email form doesn't depend on new content, so it's already visible on the test URL below.
Test URL
https://footer-connect-form-icons--modernization-agent-test--samshao.aem.page/
🤖 Generated with Claude Code