@paulpaulstudio/plasmic-contact-form

Plasmic Code Components for contact forms — submits to Lettermint /v1/send. Designer baut Form-Optik in Plasmic Studio, Submit landet als Email beim konfigurierten Empfänger.

Components

• <ContactForm> — wraps a <form>, handles submit + state
• <ContactFormField> — text / email / tel / url / textarea, bound to form state by name
• <ContactFormSubmit> — submit button with idle/submitting label
• <ContactFormSuccess> — slot, visible after success (in Plasmic Studio always)
• <ContactFormError> — slot, visible after error
• useContactFormStatus() — hook for custom UI variants

Configuration

Three ways to set the recipient + token:

1. Env vars (recommended for Customer-Sites):
   • NEXT_PUBLIC_CONTACT_FORM_TO — recipient
   • NEXT_PUBLIC_CONTACT_FORM_FROM — sender (must be Lettermint-verified)
   • NEXT_PUBLIC_LETTERMINT_TOKEN — Lettermint Sending API token
2. Props on <ContactForm> — overrides env. Useful for design-time / per-page overrides.
3. Mix — props win over env.

Security note

The Lettermint Sending Token lives in the client bundle (NEXT_PUBLIC_*). For low-volume contact forms with rate-limiting on Lettermint side this is acceptable. For high-volume / commercial sites prefer a backend proxy (Next.js API route holding the token server-side).

Install

npm install @paulpaulstudio/plasmic-contact-form

Use with @plasmicapp/loader-nextjs

// lib/plasmic-init.ts
import { initPlasmicLoader } from "@plasmicapp/loader-nextjs";
import { registerContactForm } from "@paulpaulstudio/plasmic-contact-form/register-loader";

export const PLASMIC = initPlasmicLoader({ projects: [...] });
registerContactForm(PLASMIC);

Use with Plasmic Studio (App Host)

// pages/plasmic-host.tsx
import { PlasmicCanvasHost } from "@plasmicapp/host";
import { registerContactForm } from "@paulpaulstudio/plasmic-contact-form/register-host";

registerContactForm();
export default PlasmicCanvasHost;

License

MIT