Forms

Mira is a static site, so forms are sent to a form service, which emails you each message.

The demo has two forms, both built with the form block: an appointment request (“we’ll call you back”) on /book/, and a contact form on /contact/. They send to the address in forms in src/site.config.ts:

forms: { action: 'https://formspree.io/f/your-form-id', netlify: false, hidden: {} },

Each form sends a form-name value (the block’s name, such as appointment-request), so you can tell them apart in your inbox.

Form services

Formspree

Create a form at formspree.io, and set action to the address it gives you, such as https://formspree.io/f/abcdwxyz.

Web3Forms

Get a free access key at web3forms.com by entering the email address that should receive messages. Then send the key with every form using hidden:

forms: {
  action: 'https://api.web3forms.com/submit',
  netlify: false,
  hidden: {
    access_key: 'YOUR-ACCESS-KEY',
    redirect: 'https://yourclinic.com/thank-you/',
  },
},

redirect takes visitors to your own thank-you page after sending. Leave it out to use Web3Forms’ page. The access key is safe to have in your site’s code: it can only send messages to your inbox.

Every entry in hidden is sent as a hidden field with each form, so you can use it for any service that needs one, such as a subject line.

Basin

Create a form at usebasin.com, and set action to its endpoint, such as https://usebasin.com/f/abc123.

Netlify Forms

If your site is hosted on Netlify, set netlify: true and keep action: '/thank-you/'. Netlify finds the forms when it builds your site and lists the messages under Forms in its dashboard.

After sending

Visitors are taken to your form service’s thank-you page, or to Mira’s /thank-you/ page if your service lets you set a redirect address. The /thank-you/ page is kept out of search results and offers Call and WhatsApp buttons for anything urgent.

Choosing the fields

Fields are listed in the page’s form block:

- type: form
  variant: split
  name: appointment-request
  title: Tell us what's wrong, we'll call you back
  submit: Request a call back
  fields:
    - { name: name, label: Your name, required: true, half: true }
    - { name: phone, label: Phone, type: tel, required: true, half: true }
    - { name: problem, label: "What's the problem?", type: select, options: [Back or neck pain, Joint pain, Something else] }
    - { name: message, label: Anything else we should know?, type: textarea }
    - { name: consent, label: I agree to be contacted about my request, type: checkbox, required: true }

type is text (the default), email, tel, date, textarea, select or checkbox. half: true puts two fields side by side on wide screens. points adds reassurance lines beside the form, such as “We call back within one working day”.

Health information and privacy

Form services aren’t made for medical records. Under every form Mira says “Please don’t send medical records here”, and the demo only asks for a name, a phone number and the kind of problem. Keep it that way, and mention the form service in your privacy page.

Spam

Every form has a hidden field called _gotcha that people never see but spam bots fill in. Formspree and Netlify discard those messages automatically. With other services, including Web3Forms, turn on their spam filter as well.