Forms — Titen Next.js

Titen has three forms, and all of them work as soon as you run the site:

• “Let’s Work Together” at the end of Projects, the category pages and every service page;
• the form on the Contact page;
• the newsletter sign-up in the footer.

Each one checks the required fields, shows a spinner while sending, says “Thank you”, keeps what the visitor typed when something fails, and drops spam with a hidden honeypot field.

Out of the box, submissions are written to the server log (FORM_PROVIDER=console). That’s fine while you build, but useless once you publish, so pick a destination before launch.

The quickest way to receive submissions

1. Copy the example settings:

   cp .env.example .env.local

2. Choose one:

   You want	Set
   An email for every submission	FORM_PROVIDER=resend + RESEND_API_KEY, FORM_EMAIL_TO, FORM_EMAIL_FROM
   It in your CRM, Slack, a spreadsheet…	FORM_PROVIDER=webhook + FORM_WEBHOOK_URL (Zapier, Make, n8n, Formspree, your own API)
   The sender in a Mailchimp audience (a good fit for the newsletter)	FORM_PROVIDER=mailchimp + MAILCHIMP_API_KEY, MAILCHIMP_AUDIENCE_ID

   Several at once work: FORM_PROVIDER=resend,mailchimp.

3. Restart npm run dev and send a test submission.

4. Put the same variables in your host’s dashboard before deploying. .env.local is not uploaded.

Details for each provider, the webhook payload, Mailchimp consent settings and how to write your own provider are in Forms reference.

What the forms ask for

The project form and the Contact page share their fields:

Field	Name it arrives under	Required
First Name	firstName	yes
Last Name	lastName
Email	email	yes
Phone	phone
Message	message

The newsletter sends email only (required).

Each submission carries a title, so you can tell the forms apart in your inbox or tool:

• “New project enquiry” for the project form;
• “New contact enquiry” for the Contact page;
• “New newsletter sign-up” for the footer.

Resend puts the sender’s first and last name in the email’s subject, and Mailchimp stores them as FNAME and LNAME.

Changing the forms

The labels, placeholders, button texts (“Submit”, “Thank you”, “Something went wrong”) and titles are content:

• the project and Contact forms: projectForm in src/content/site.ts;
• the Contact page’s title: notification in src/content/pages/contact.ts;
• the newsletter: footer.newsletter in site.ts.

A field arrives at your provider under its name, so keep the names you already map somewhere.

What each form sends is decided in src/lib/actions.ts (submitProject, submitContact, submitNewsletter), which lists the fields and which are required:

• To make a field required, set required: true on it in projectForm.fields (the browser checks it first) and add its name to required in actions.ts.
• To add a field, add it to projectForm.fields, then to the forms in src/components/sections/ContactFormSection.tsx and ContactSections.tsx. actions.ts takes every field of projectForm.fields.

Testing before launch

• Submit each form on your own site after deploying, with a real address.
• Check the destination (inbox, spreadsheet, audience) and reply to the test.
• Try a failure on purpose: set a wrong API key, submit, and confirm the visitor sees “Something went wrong” and their text is still there.

Spam

The honeypot stops the usual bots: a bot that fills the hidden field is shown “Thank you” and nothing is sent. If you start getting spam anyway, put a service in front through the webhook provider (Formspree, Web3Forms and Basin all include spam filtering), or add a captcha to the form component.

Privacy

Submissions go only where you point them; nothing is sent anywhere else. Most countries expect you to say what happens to the data people send you. Add a privacy page (see Pages and sections) and link it under the forms:

• the project and Contact forms: projectForm.text;
• the newsletter: footer.newsletter.note.

If you add newsletter subscribers to a marketing audience, ask for consent in the form.