React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

LeadMagnetButton

Lead capture form with image, customizable fields, and 8 layout variants

Interactive Playground

Customize the lead magnet button properties

block image

Get Your Free Guide

Sign up now to receive our comprehensive guide delivered straight to your inbox.

Layout Variants

8 different layout options for various design needs

Default

block image

Get Your Free Guide

Sign up now to receive our comprehensive guide delivered straight to your inbox.

Bleed Horizontal

block image

Get Your Free Guide

Sign up now to receive our comprehensive guide delivered straight to your inbox.

Bleed Vertical

block image

Get Your Free Guide

Sign up now to receive our comprehensive guide delivered straight to your inbox.

Brim

block image

Get Your Free Guide

Sign up now to receive our comprehensive guide delivered straight to your inbox.

Ode

block image

Get Your Free Guide

Sign up now to receive our comprehensive guide delivered straight to your inbox.

Nova

block image

Get Your Free Guide

Sign up now to receive our comprehensive guide delivered straight to your inbox.

Crest

block image

Get Your Free Guide

Sign up now to receive our comprehensive guide delivered straight to your inbox.

Rung

block image

Get Your Free Guide

Sign up now to receive our comprehensive guide delivered straight to your inbox.

Glint

block image

Get Your Free Guide

Sign up now to receive our comprehensive guide delivered straight to your inbox.

Features

  • ✓8 Layout Variants: Multiple layout options including default, bleed-horizontal, bleed-vertical, and theme-specific layouts (brim, ode, nova, crest, rung, glint)
  • ✓Dynamic Form: Integrates with Form component for flexible question configuration
  • ✓Image Support: Optimized image preview with loading states
  • ✓Marketing Consent: Optional marketing consent checkbox integration
  • ✓Form Validation: Built-in validation with error messaging
  • ✓LocalStorage Caching: Automatically caches form answers for autofill
  • ✓Theme Integration: Adapts to current theme with theme-specific layouts
  • ✓Analytics Support: Optional analytics callback for tracking

API Reference

Props

layout

'default' | 'bleed-horizontal' | 'bleed-vertical' | 'brim' | 'ode' | 'nova' | 'crest' | 'rung' | 'glint' (optional) - Layout variant

title

string (optional) - Main heading text (default: 'Heading')

tagline

string (optional) - Subheading text

button_text

string (optional) - CTA button text (default: 'Button Text')

image

string (optional) - Image URL for the lead magnet

questions

Array (optional) - Form questions configuration

marketing_consent_enabled

boolean (optional) - Show marketing consent checkbox (default: false)

disabled

boolean (optional) - Disable form inputs (default: false)

onButtonClick

(formData: any) => void (optional) - Callback when form is submitted

Usage Notes

Form Questions: The questions prop accepts an array of question objects with id, content, type, and required properties.

Layout Selection: The component automatically adapts to the current theme's layout if no layout prop is provided.

Form Data: The onButtonClick callback receives form data including name, email, phone_number, answers, and optionally agreed_to_marketing_consent.

Autofill: Form answers are automatically cached in localStorage for improved user experience on repeat visits.