Skip to main content

FormPageLayout

FormPageLayout

Specialized layout for form pages with optional sidebar

Tags: component layout form

View Demo

FormPageLayout provides a focused layout for form pages with a centered header, optional notices section, and two-column layout with sidebar support.

Import​

<script>
  import { FormPageLayout } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<FormPageLayout
  title="Contact Us"
  description="Fill out the form below and we'll get back to you within 24 hours."
>
  <form class="space-y-4">
    <Input label="Name" required />
    <Input label="Email" type="email" required />
    <Textarea label="Message" required />
    <Button type="submit">Send Message</Button>
  </form>
</FormPageLayout>

Props​

Prop Type Default Description
title string required Page title (h1)
description string required Page description text
helpText string - Footer help text (supports HTML)
showNotices boolean true Show notices section
sageBackground boolean false Use sage green background
children Snippet required Main form content
notices Snippet - Notices content
sidebar Snippet - Sidebar content
class string - Additional classes

With Sidebar​

Add supplementary information in a sidebar:

<FormPageLayout title="Book Appointment" description="Select your preferred date and time.">
  {#snippet sidebar()}
    <Card>
      <Card.Header>
        <Card.Title>Office Hours</Card.Title>
      </Card.Header>
      <Card.Content>
        <ul class="space-y-2 text-sm">
          <li>Monday - Friday: 9am - 5pm</li>
          <li>Saturday: 10am - 2pm</li>
          <li>Sunday: Closed</li>
        </ul>
      </Card.Content>
    </Card>
  {/snippet}

  <form>
    <!-- Form fields -->
  </form>
</FormPageLayout>

With Notices​

Display alerts or important information above the form:

<FormPageLayout title="Update Profile" description="Keep your information up to date.">
  {#snippet notices()}
    <Alert variant="info">Changes may take up to 24 hours to reflect across all systems.</Alert>
  {/snippet}

  <form>
    <!-- Form fields -->
  </form>
</FormPageLayout>

Multiple Notices​

<FormPageLayout title="Application Form" description="Complete all required fields.">
  {#snippet notices()}
    <div class="space-y-3">
      <Alert variant="warning">Application deadline: January 15, 2025</Alert>
      <Alert variant="info">Prepare your documents before starting.</Alert>
    </div>
  {/snippet}

  <form>
    <!-- Form fields -->
  </form>
</FormPageLayout>

Help Text Footer​

Add footer help text with links:

<FormPageLayout
  title="Create Account"
  description="Join thousands of users."
  helpText="Having trouble? <a href='/support'>Contact support</a> or call 1-800-EXAMPLE."
>
  <form>
    <!-- Form fields -->
  </form>
</FormPageLayout>

Sage Background​

Use the branded sage green background:

<FormPageLayout title="Get a Quote" description="Tell us about your project." sageBackground>
  <form>
    <!-- Form fields -->
  </form>
</FormPageLayout>

Hide Notices​

<FormPageLayout title="Quick Form" description="A simple form." showNotices={false}>
  <form>
    <!-- Form fields -->
  </form>
</FormPageLayout>

Examples​

Contact Form​

<FormPageLayout
  title="Get in Touch"
  description="We'd love to hear from you. Send us a message and we'll respond as soon as possible."
  helpText="By submitting this form, you agree to our <a href='/privacy'>Privacy Policy</a>."
>
  {#snippet sidebar()}
    <div class="space-y-6">
      <Card>
        <Card.Header>
          <Card.Title>Contact Info</Card.Title>
        </Card.Header>
        <Card.Content class="space-y-3">
          <p class="text-sm">
            <strong>Email:</strong><br />
            support@example.com
          </p>
          <p class="text-sm">
            <strong>Phone:</strong><br />
            (555) 123-4567
          </p>
        </Card.Content>
      </Card>
    </div>
  {/snippet}

  <Card>
    <Card.Content class="pt-6">
      <form class="space-y-4">
        <div class="grid grid-cols-2 gap-4">
          <Input label="First Name" required />
          <Input label="Last Name" required />
        </div>
        <Input label="Email" type="email" required />
        <Input label="Phone" type="tel" />
        <Select label="Subject" required>
          <option value="">Select a topic...</option>
          <option value="sales">Sales Inquiry</option>
          <option value="support">Technical Support</option>
          <option value="other">Other</option>
        </Select>
        <Textarea label="Message" rows={5} required />
        <Button type="submit" class="w-full">Send Message</Button>
      </form>
    </Card.Content>
  </Card>
</FormPageLayout>

Application Form​

<FormPageLayout
  title="Apply Now"
  description="Complete your application in just a few minutes."
  sageBackground
>
  {#snippet notices()}
    <Alert variant="info" class="mb-0">
      <strong>Save your progress:</strong> Your application will be saved automatically.
    </Alert>
  {/snippet}

  {#snippet sidebar()}
    <div class="space-y-4">
      <Card>
        <Card.Header>
          <Card.Title>Progress</Card.Title>
        </Card.Header>
        <Card.Content>
          <div class="space-y-2">
            <div class="flex justify-between text-sm">
              <span>Personal Info</span>
              <Badge variant="success">Complete</Badge>
            </div>
            <div class="flex justify-between text-sm">
              <span>Employment</span>
              <Badge variant="warning">In Progress</Badge>
            </div>
            <div class="flex justify-between text-sm">
              <span>Documents</span>
              <Badge variant="outline">Not Started</Badge>
            </div>
          </div>
        </Card.Content>
      </Card>

      <Card>
        <Card.Header>
          <Card.Title>Need Help?</Card.Title>
        </Card.Header>
        <Card.Content>
          <p class="text-sm text-muted-foreground mb-4">
            Our team is here to assist you with your application.
          </p>
          <Button variant="outline" class="w-full">Chat with Us</Button>
        </Card.Content>
      </Card>
    </div>
  {/snippet}

  <Card>
    <Card.Content class="pt-6">
      <!-- Multi-step form content -->
    </Card.Content>
  </Card>
</FormPageLayout>

Responsive Behavior​

  • Sidebar appears above form on mobile
  • Sidebar moves to right column on desktop
  • Full-width form when no sidebar
  • Centered, constrained content width

Accessibility​

  • Semantic heading with h1 for title
  • Clear visual hierarchy
  • Proper form structure
  • Help text for additional context
On this page