Forms

Your template's forms (in the Spa template: booking, contact and newsletter) are fully designed and check what visitors type. To receive the messages, you connect each form to a form service.

Demo mode

Until you connect a form, it runs in demo mode: it shows a thank-you message but sends nothing. This lets you test the design safely.

Connect a form

1. Create a form with a form service

   Sign up for a form service that accepts JSON submissions and emails them to you. For example, Formspree has a free plan. Create one form for each form on your site and copy its address, which looks like https://formspree.io/f/abcd1234.

2. Create a .env.local file

   In the main template folder (next to package.json), create a new file named .env.local and add your form addresses:

   .env.localCopy

   NEXT_PUBLIC_BOOKING_ENDPOINT=https://formspree.io/f/your-booking-formNEXT_PUBLIC_CONTACT_ENDPOINT=https://formspree.io/f/your-contact-formNEXT_PUBLIC_NEWSLETTER_ENDPOINT=https://formspree.io/f/your-newsletter-form

   Leave out any line you do not need. To see the exact names your template uses, open src/config/site.ts and look at forms.

3. Restart and test

   Stop the website (Ctrl + C) and start it again with npm run dev. Fill in each form and check the message arrives in your inbox.

4. Add the same settings to your hosting

   The .env.local file stays on your computer. When you publish, add the same names and values as environment variables in your hosting dashboard, then redeploy. See Publish your website.

What the forms send

Each form sends the fields the visitor filled in (name, email, message, chosen service and so on) as JSON to your address. Most form services show these fields neatly in the email they send you.

Turn a form off

Do not need a newsletter or a booking form? Switch it off in src/config/features.ts. See Feature switches.