Lena OkaforRD

Maia docs

Forms and booking

Connect the contact form and free-guide sign-up to a form or email service, and add your booking calendar.

Maia is a static site, so forms are sent to a form service, which emails you the message or adds the subscriber to your list. Both forms send in the background and show a thank-you message without leaving the page.

Contact form

The form on /contact/ is set in contactForm in src/site.config.ts:

export const contactForm = {
  action: 'https://api.web3forms.com/submit',
  hidden: { access_key: 'YOUR-WEB3FORMS-KEY', subject: 'New enquiry from your website' },
  topics: ['1:1 Nutrition Coaching', 'Gut Health Reset', 'Something else'],
  bookingEmbed: '',
  hours: 'Monday to Friday, 9am to 6pm (UK time)',
};

With Web3Forms (free)

  1. Go to web3forms.com, enter your email address and copy the access key they send you.
  2. Paste it in place of YOUR-WEB3FORMS-KEY.

That’s all. Messages arrive in your inbox, and Web3Forms filters spam using the hidden check box built into the form.

With another service

Set action to the address your service gives you, and put any keys or settings it needs in hidden. Formspree, Getform and Basin all work this way. The form sends the fields name, email, topic, message and consent.

Free-guide sign-up

The “Free 7-day meal guide” band is set in leadMagnet. It sends name and email. Point action at:

  • Web3Forms, to receive each sign-up by email and send the guide yourself.
  • Your email marketing tool, such as ConvertKit (Kit), MailerLite or Buttondown, to add subscribers to a list and send the guide automatically. Use the form address from the tool’s “HTML form” or “embed” option, and copy its hidden fields into hidden.

Set enabled: false to remove the band from every page.

Booking calendar

Every “Book a free call” button goes to bookingUrl in site. The simplest setup is to set it to your Calendly, Cal.com or Acuity page.

To show the calendar on your Contact page instead, set bookingEmbed in contactForm to your booking page’s embed address, for example https://cal.com/yourname/discovery?embed=true or https://calendly.com/yourname/20min. Visitors then see a Show available times button, and the calendar loads only when they click it.

Booking tools load a lot of code. Loading it on click keeps your PageSpeed score at 100, which is why Maia doesn’t load it automatically.