Forms

Form responses are emailed using nodemailer via a Vercel hosted serverless function using Next.js’s built-in API routes. Functions in pages/api are automatically deployed as serverless functions when using Vercel. For a more detailed explanation of API Routes, please refer to Next.js API Routes.

A POST to api/form will return a response of Your email has been sent! and sends emails to the supplied recipients. A POST body should look as follows:

{ 
  name: "Name of sender" 
  email: "Email of sender,"
  subject: "Email subject",
  message: "Email message (body)",
  recipients: "Array or comma seperated list of email recipients"
}

Currently, the only component to call on the form API route is ContactForm.

SMTP Transporter

Simple Mail Transfer Protocol (SMTP) is the protocol used between different email hosts to send and recieve emails. In nodemailer, a transporter defines the connection data, such as the host, used to send emails.

For the City Nature Challenge, the host used is a preexisting gmail account. For more information on setting up nodemailer, refer to this tutorial: Gmail with Nodemailer. The host and username for the gmail account are saved as .env variables. Please refer to the environmental variables saved on the Vercel cnc project if you need to refer to the production variables.

Setting Contact Form recipients

Form recipients are set on the component level. A list of recipients is returned to the client via the ContactForm component, an instance of which is likely on the Contact page in Strapi. To add/remove or recipients, delete/add emails to the Email recipients field of the component.