MDX_OmniSubscribe

MDX_OmniSubscribe brings subscription collection and presentation into one Framer code component. Designers can place a form directly in a section, use a focused card, display a timed popup, or introduce a top or bottom subscription bar without rebuilding the experience for each layout.

Connect a published Formspark, Mailchimp, Kit, or Brevo signup form by entering its Form ID or public Form URL. For an existing subscription backend, use Custom API. The component handles its own email input, loading state, inline acceptance or error message, and persistent confirmation panel.

Unlike a static email field, the component provides container-aware layout changes, configurable spacing and positioning, independent Glass or Solid surfaces, theme palettes, typography, RTL support, optional trust microcopy, dismissal memory, and lightweight submission-abuse protection. The destination service remains responsible for storing subscribers, confirmation emails, and marketing-list management.

{
  "email": "subscriber@example.com",
  "doubleOptIn": false,
  "source": "newsletter-home"
}

{
  "success": true,
  "message": "Subscription request received."
}

An API response with `success: false`, a non-2xx HTTP status, or an unreadable response that lacks explicit success confirmation is not treated as a successful Custom API subscription.

• Inline: Fills its Framer instance width and can arrange copy and form horizontally or vertically.
• Card: Uses a card surface with a maximum width of 420px and a vertically stacked composition.
• Popup: Uses a floating anchored panel with a default width of 380px; on narrow phone viewports it uses safe edge insets and constrains its height.
• Bar: Runs at the top or bottom with Fixed or Absolute positioning; Auto flow can stack it when narrow.

• Color Theme selects Auto, Light, or Dark text and control palettes; it does not select the surface material.
• Surface Style selects Glass or Solid. Glass remains the default and uses Backdrop Blur and Glass Opacity; Solid uses the Light or Dark Solid Fill controls.
• Input text, placeholder, fill, border, and inline error messages each have independent Light and Dark color controls. Field styles are scoped to the visible email input to preserve contrast on bright or dark backgrounds. Browser-native validation popups are not themeable through these controls.
• Saved email suggestions: The field remains an uncontrolled native email input with `autocomplete="email"` in Preview and on published pages. The current DOM value is read on submission so browser-filled addresses work without a React change event. The field's outer shell owns the configurable translucent Input Fill and Input Border; the native input uses a non-animated long-duration background-color transition to delay a browser-imposed autofill tint where supported, without drawing a second text layer.
• Canvas reset: When switching from Framer Preview to the editor Canvas, the input changes to a fresh read-only, autocomplete-disabled blank field and clears transient submission feedback. This prevents preview test addresses from being displayed on the Canvas. The live field keeps browser autofill enabled.
• Preview recommendation: While adjusting Light Colors or Dark Colors, temporarily set Color Theme to the same explicit palette. Auto resolves to the site/OS theme and may show the *other* palette; switch back to Auto after verifying both. For an illuminated backdrop, start with Light + Glass and inspect placeholder, typed email, fill, border, and button contrast at desktop and mobile widths.

• Show Trust Message: Under Message Settings, turn it on to place one short line beneath the email field and Subscribe button in any of the four layouts. It is Off by default.
• Trust Text: Fully editable, including non-newsletter uses such as waitlists or product launches. The text is hidden when blank and does not appear after successful submission replaces the form.
• Trust typography and alignment: Inherits Description Font styling, with Trust Size overriding only its font size. Trust Alignment offers Left, Center, or Right.
• Trust colors: Independent Light · Trust Message and Dark · Trust Message colors follow the selected palette. Neither affects the error-message color.
• Accuracy: Suggested copy such as “No spam. Unsubscribe anytime.” is not an automated unsubscribe feature or guarantee. Only publish promises supported by the selected provider's unsubscribe flow and your website's actual communication practices. Add any legally required consent/privacy information separately.

• Delay: Popup and Bar appear after the configured delay; 0 seconds means immediate display.
• Scroll Trigger: A second way to show a Popup or Bar when the configured scroll threshold is reached.
• Exit Intent: An optional desktop-pointer trigger for Popup.
• Remember Close: Stores manual dismissal in browser `sessionStorage`, scoped to page path and instance; it is not permanent across independent browser sessions.
• Dismissal ID: Set a stable ID when you want the dismissal identity to survive changes to the Framer component tree.
• Minimize: A closed Popup can display an icon launcher that visitors can click to reopen it.

An accepted subscription request replaces the active form with a confirmation heading, the submitted email address, a detail message, and the Subscribe Another link. This is an acknowledgement of the provider response, not a guarantee of completed double opt-in.

The Success Redirect property is applied by the Custom API and Formspark branches. Mailchimp, Kit, and Brevo stay on the page and display their inline response; their confirmation-email policies remain under provider control.