Contact Page

The contact page (/contact) provides a way for visitors to get in touch with your team. It includes a contact form and displays your contact information.

Page Structure

The contact page is located at app/contact/page.tsx and includes:

• Contact Hero Section - Headline and description
• Contact Form - Form for visitors to send messages
• FAQ Section - Frequently asked questions

Configuration

Contact information is configured in config/app.config.ts:

export const appConfig = {
  // ... other config
  contact: {
    enabled: true,
    email: 'hello@yourdomain.com',
    phone: '(123) 456-7890',
    address: '123 Main St, San Francisco, CA'
  }
};

Contact Form

The contact form is handled by the ContactHeroSection component. To customize the form:

1. Update form fields - Edit the form component in components/sections/contact-hero-section.tsx
2. Configure email - Set up email sending in your email service (see Email documentation)
3. Add validation - Add client and server-side validation as needed

Customization

Update Contact Content

Edit the ContactHeroSection component:

export function ContactHeroSection(): React.JSX.Element {
  return (
    <section>
      <h1>Get in Touch</h1>
      <p>We'd love to hear from you</p>
      {/* Contact form */}
    </section>
  );
}

Display Contact Information

Contact information from app.config.ts is automatically displayed. You can customize how it's shown by editing the contact section component.

Email Integration

To send emails when the contact form is submitted:

1. Create a tRPC endpoint - Handle form submission server-side
2. Use email service - Send emails using your configured email provider
3. Add validation - Validate form data before sending

See the Email documentation for more details.

SEO

The contact page includes structured data (JSON-LD) for:

• ContactPage schema
• WebPage schema
• Breadcrumb schema

Best Practices

1. Clear contact options - Provide multiple ways to get in touch
2. Quick response - Set expectations for response time
3. Form validation - Validate all form fields
4. Spam protection - Consider adding reCAPTCHA or similar
5. Confirmation message - Show a success message after submission