Contact Form

Sabo’s contact page features a two-column layout with informational text on the left and an interactive form on the right. This guide covers how to customize all frontend aspects of the form. File Location: src/components/marketing/contact-form.tsx

How to Customize

Editing the Informational Column (Left)

The left column contains your contact details and introductory text. You can edit this information directly in the JSX.

src/components/marketing/contact-form.tsx

// ...
{/* Left Column - Information */}
<div className="space-y-8">
  <div>
    <h3 className="text-2xl md:text-3xl font-semibold mb-4">
      Get in touch
    </h3>
    <p>...</p>
  </div>
  <div>
    <h4 className="text-lg font-semibold mb-4">
      Contact details
    </h4>
    <div className="space-y-3">
      {/* Edit your phone, email, and address here */}
      <span>(123) 34567890</span>
      <span>your-email@example.com</span>
      <span>123 Main St, City, Country</span>
    </div>
  </div>
</div>
// ...

Customizing the Form (Right Column)

The right column contains the form itself. You can customize its validation rules, submission feedback, and compliance text.

Adjusting Validation Rules

Client-side validation is handled by Zod. The validation schema, contactFormSchema, is at the top of the file. You can change rules like making a field optional or increasing a minimum length.

src/components/marketing/contact-form.tsx

const contactFormSchema = z.object({
  // ...
  company: z.string().min(2, "Company name...").optional(), // Example: Make optional
  message: z.string().min(20, "Message must be at least 20 characters"), // Example: Increase length
});

Customizing Submission Messages (Toasts)

After a user submits the form, a “toast” notification appears to confirm success or failure. These messages are located in the onSubmit function and can be customized.

src/components/marketing/contact-form.tsx

// ...
const onSubmit = async (data: ContactFormData) => {
  // ...
  try {
    // ...
    toast.success("Message sent successfully!", {
      description:
        "Thank you! We'll get back to you within 48 hours.",
    });
    // ...
  } catch (error) {
    toast.error("Failed to send message", {
      description:
        "Something went wrong. Please try again later.",
    });
  }
  // ...
};
// ...

Editing Compliance Text

The text displayed below the submit button (e.g., GDPR, ISO) can be edited at the bottom of the component.

src/components/marketing/contact-form.tsx

// ...
<CardFooter>
  <Button>...</Button>
  <p className="text-xs text-center text-muted-foreground leading-relaxed">
    SOC 2 Type 2 • GDPR Compliant • ISO 27001 • CCPA
  </p>
</CardFooter>
// ...

To customize what happens after the form is submitted (e.g., sending an email), see the Contact Form API Reference.

​How to Customize

​Editing the Informational Column (Left)

​Customizing the Form (Right Column)

​Adjusting Validation Rules

​Customizing Submission Messages (Toasts)

​Editing Compliance Text

How to Customize

Editing the Informational Column (Left)

Customizing the Form (Right Column)

Adjusting Validation Rules

Customizing Submission Messages (Toasts)

Editing Compliance Text