Email and contact forms

Enable Contact

Add this entry under apps in itsy.config.json, using your recipient address:

{
  "apps": {
    "contact": {
      "mount": "/contact",
      "email": {"to": "hello@example.com"}
    }
  }
}

Keep your other settings and restart dev after changing app configuration.

Create the form

Create site/contact/index.html:

<h1>Contact us</h1>
<form method="post" action="/contact">
  {csrf}
  {#if contact.error}<p role="alert">{contact.error}</p>{/if}
  <label>Name <input name="name" required maxlength="100"
    value="{contact.data.name}"></label>
  <p>{contact.invalid.name}</p>
  <label>Email <input type="email" name="email" required maxlength="254"
    value="{contact.data.email}"></label>
  <p>{contact.invalid.email}</p>
  <label>Message <textarea name="message" required maxlength="5000">{contact.data.message}</textarea></label>
  <p>{contact.invalid.message}</p>
  <div hidden><label>Leave empty <input name="website" tabindex="-1" autocomplete="off"></label></div>
  <button type="submit">Send message</button>
</form>

Keep {csrf} and the field names. Contact validates the submission and emails it to your recipient; it doesn't store messages.

Create site/contact/thank-you.html with your confirmation message. Successful submissions redirect there. The example starter already includes both pages.

Try it locally

New sites preview outgoing email in a private browser page during dev. Submit your form to inspect the message without sending it.

Send real email

Run itsy email to configure local Resend delivery. To test it, set dev.email_preview to false in your config and restart dev.

Production always uses real delivery. Deployment prompts for server email settings when needed. Use a sender on a verified domain, and keep credentials out of Git.

Customize the message

Edit the HTML and text templates in mailers/. They use app.* and email.* values; HTML messages share mailers/main.layout.html.

itsy email preview contact

This prints a sample HTML message without sending it.