Forms and newsletter

Lyra is a static site, so forms are sent to a form service, which emails you each message or adds the subscriber to your list.

Contact, volunteer and partner forms

The demo has three forms, all built with the form block: Contact on /contact/, and Volunteer and Partner on /get-involved/. They all 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 volunteer), so you can tell them apart in your inbox.

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://yourcharity.org/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 Lyra’s /thank-you/ page if your service lets you set a redirect address. The /thank-you/ page is kept out of search results.

Choosing the fields

Fields are listed in the page’s form block:

- type: form
  variant: split
  name: volunteer
  title: Volunteer with us
  submit: Send my details
  fields:
    - { name: name, label: Your name, required: true, half: true }
    - { name: email, label: Email, type: email, required: true, half: true }
    - { name: skills, label: How would you like to help?, type: select, options: [Events, Fundraising, Field trips] }
    - { name: message, label: Anything else?, type: textarea }
    - { name: consent, label: I agree to be contacted about volunteering, type: checkbox, required: true }

type is text (the default), email, tel, textarea, select or checkbox. half: true puts two fields side by side on wide screens.

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.

Newsletter

The newsletter sign-up in the footer and in the newsletter block sends to newsletter in site.config.ts:

newsletter: { action: 'https://your-list-provider/subscribe-address', field: 'email' },

action is your email provider’s form address, and field is the name it expects for the email address. Find both in your provider’s “embedded form” or “HTML form” code:

Provider	field
Mailchimp	EMAIL
Brevo	EMAIL
Kit (ConvertKit)	email_address
MailerLite	fields[email]
Buttondown	email

Privacy

The line under each form says what you’ll do with the details. Change it in src/i18n/ui.ts (form.privacy), and make sure your privacy page explains which form service you use.