WaitlistForm Appearance

The WaitlistForm component offers extensive customization options to match your brand's look and feel. This guide covers all the ways you can style your waitlist forms.

Preset Themes

Mantlz includes several built-in themes that you can use with minimal configuration:

import { WaitlistForm } from '@mantlz/nextjs';

// Default light theme
<WaitlistForm formId="your-form-id" theme="default" />

// Dark theme
<WaitlistForm formId="your-form-id" theme="dark" />

// Purple theme
<WaitlistForm formId="your-form-id" theme="purple" />

// Neobrutalism theme
<WaitlistForm formId="your-form-id" theme="neobrutalism" />

You can also import theme constants:

import { WaitlistForm, BASE_THEMES } from '@mantlz/nextjs';

<WaitlistForm formId="your-form-id" theme={BASE_THEMES.NEOBRUTALISM} />

Basic Customization

For simple customizations, you can use the following props:

<WaitlistForm
  formId="your-form-id"
  // Form content
  title="Join Our Waitlist"
  description="Be the first to know when we launch"
  nameLabel="Full Name"
  namePlaceholder="Enter your name"
  emailLabel="Email Address"
  emailPlaceholder="you@example.com"
  submitButtonText="Join the Waitlist"
  
  // Show number of users who joined
  showUsersJoined={true}
  usersJoinedLabel="people on the waitlist"
  
  // Redirection after submission
  redirectUrl="/thank-you"
/>

Advanced Styling with Appearance API

The appearance prop allows for comprehensive customization of your waitlist form:

Flat Appearance API

The flat appearance API provides an intuitive way to style your form:

<WaitlistForm
  formId="your-form-id"
  theme="default"
  appearance={{
    // Container styling
    container: 'bg-gradient-to-r from-blue-100 to-blue-200',
    form: 'space-y-6',
    background: 'bg-white',
    border: 'border-2 border-blue-300',
    
    // Card styling
    card: 'shadow-lg rounded-xl',
    cardTitle: 'text-xl font-bold text-blue-900',
    cardDescription: 'text-blue-700',
    cardHeader: 'pb-2',
    cardContent: 'pt-4',
    
    // Input styling
    input: 'border-blue-300 focus:ring-blue-500',
    inputLabel: 'text-blue-800 font-medium',
    inputError: 'text-red-500',
    
    // Button styling
    submitButton: 'bg-blue-600 hover:bg-blue-700 text-white font-medium',
    
    // Counter styling
    usersJoinedCounter: 'text-blue-700 font-medium',
    
    // Text customizations
    submitText: 'Join Now',
    placeholderText: 'Your email here...'
  }}
/>

Dynamic Styling Based on Theme

You can apply different styles based on the selected theme:

<WaitlistForm
  formId="your-form-id"
  theme="dark"
  appearance={(theme) => ({
    container: theme === 'dark' 
      ? 'bg-gray-900 text-white' 
      : 'bg-white text-gray-900',
    submitButton: theme === 'dark'
      ? 'bg-purple-600 hover:bg-purple-700 text-white'
      : 'bg-blue-600 hover:bg-blue-700 text-white',
    input: theme === 'dark'
      ? 'bg-gray-800 border-gray-700 text-white'
      : 'bg-white border-gray-300 text-gray-900'
  })}
/>

Neobrutalism Example

Here's an example of a waitlist form styled with a neobrutalism aesthetic:

<WaitlistForm
  formId="your-form-id"
  appearance={{
    baseStyle: {
      container: 'bg-yellow-100',
      form: 'space-y-6',
      background: 'bg-yellow-100',
      border: 'border-4 border-black',
    },
    elements: {
      card: 'border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]',
      cardTitle: 'text-2xl font-black text-black uppercase',
      cardDescription: 'text-black font-medium',
      inputLabel: 'text-black font-bold uppercase',
      input: 'bg-white border-2 border-black',
      submitButton: 'bg-black hover:bg-gray-800 text-white font-bold uppercase px-6 py-3 border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,0.3)]',
      usersJoinedCounter: 'text-black font-bold',
    }
  }}
/>

Complete Styling Reference

Below is a complete reference of all styling properties available for the WaitlistForm component:

Base Style Properties

Property	Description
container	The outer container of the form
form	The form element itself
background	Background styling for the form
border	Border styling for the form

Element Properties

Property	Description
card	The card component containing the form
cardHeader	The header section of the card
cardTitle	The title text of the form
cardDescription	The description text of the form
cardContent	The content section of the card
input	Input field styling
inputLabel	Label for input fields
inputError	Error message styling
submitButton	The submit button
usersJoinedCounter	The counter showing joined users

Typography Properties

Property	Description
submitText	Text for the submit button
placeholderText	Placeholder text for input fields
errorText	Text for error messages

Usage with Tailwind CSS

All styling properties accept Tailwind CSS classes, making it easy to customize your form:

<WaitlistForm
  formId="your-form-id"
  appearance={{
    // Tailwind utility classes for container
    container: 'bg-white dark:bg-gray-900 p-6 rounded-xl shadow-lg',
    
    // Custom border radius and shadow
    card: 'rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700',
    
    // Responsive text sizing
    cardTitle: 'text-xl sm:text-2xl font-bold',
    
    // Complex button styling
    submitButton: 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 ease-in-out transform hover:-translate-y-1 hover:shadow-lg',
  }}
/>

By using these customization options, you can create waitlist forms that perfectly match your website's design and branding.