Subscribe Bar

Location

• GP Element: ID 4128 — ID86 Subscribe Bar
• Also placed inside: Site Footer (ID 3040) for precise visual positioning
• Shortcode: [id86_subscribe]

Desktop Layout

A three-column CSS grid card:

┌──────────────────────────────────────────────────────────┐
│ ┌──────┐  ┌──────────────┐  ┌──────────────────────────┐ │
│ │ ID86 │  │ Stay in the  │  │ [Name] [Email] [Subscribe]│ │
│ │ logo │  │ loop         │  │                          │ │
│ │      │  │ Monthly      │  │                          │ │
│ └──────┘  │ roundup...   │  └──────────────────────────┘ │
│           └──────────────┘                               │
└──────────────────────────────────────────────────────────┘

• White card with 5px blue left border, subtle shadow.
• Copy section separated by a vertical divider.
• Form sits in a light-blue (#f7fbfe) panel with inline name, email, and button.
• Button: solid --id86-blue background, --id86-navy on hover.

Tablet Layout (701–960px)

Logo and copy in one column with the form spanning the full width below.

Mobile Layout (≤ 700px)

• Stacked vertically: centered logo, centered copy, then full-width controls.
• Blue top accent replaces left border.
• All inputs and button are full width, 48px tall.
• Logo shrinks to 140px.

Thank-You State

On successful submission, the form is replaced by a centered thank-you message:

<div class="id86-subscribe-thanks">
  <h3>You're subscribed!</h3>
  <p>Thank you, <strong>{name}</strong>.</p>
  <p>We'll send you a monthly summary of our latest instant
     documentation, cheatsheets, and updates.</p>
</div>

CSS Architecture

Class	Role
.id86-subscribe-bar	Full-width section with gradient background
.id86-subscribe-form-wrap	Grid container (desktop) / Flex column (mobile)
.id86-subscribe-brand	Logo wrapper
.id86-subscribe-copy	Text content with left border divider
.id86-subscribe-form	Form wrapper with light-blue panel
.id86-subscribe-fields	Flex row for inputs and button
.id86-subscribe-thanks	Centered success message

Performance Note

This custom shortcode replaces Fluent Forms for the subscription use case, keeping the site lightweight and avoiding the overhead of a full form builder plugin.