Connect forms and SEO

GoalLink to this section

Make Contact useful and ensure each published page has reviewed metadata. A styled form alone does not deliver an enquiry.

1. Enable Forms and emailLink to this section

From the project root, configure the existing modules:

systhema setup forms --forms on
systhema setup email
systhema setup captcha

Choose the email adapter and configure its credentials. The generated src/payload/email.ts supplies the Payload adapter. The emails option configures email defaults; it does not create an adapter.

Update the environment with the sender approved for the client's domain:

SYSTHEMA_EMAIL_FROM="Northline <enquiries@example.com>"
SYSTHEMA_EMAIL_REPLY_TO=enquiries@example.com
SYSTHEMA_EMAIL_ADMIN_ADDRESS=enquiries@example.com

Use real client addresses. Configure and verify the sender with the chosen email provider.

2. Build the enquiry form in AdminLink to this section

Create a form in Forms with Name, Email and Message. Add labels, required fields, a confirmation message and the intended notification recipients. Place a Form block in the Contact page's content and select the saved form.

Use Forms, Emails and Captcha for module configuration. For custom application forms, use the form components with a separately implemented submission handler.

3. Test the full submission pathLink to this section

Submit from a signed-out browser. Check the submission in Admin and the delivered email. Test invalid email, missing required fields, captcha failure and the success message. Confirm that each form control has a visible label and keyboard focus.

A successful submission and a delivered notification are separate checks. Do not announce email delivery from a green form response.

4. Set site defaultsLink to this section

Update the starter's SEO defaults:

import type { SeoDefaults } from '@systhemaui/payload'

export const seoDefaults: SeoDefaults = {
  websiteName: 'Northline',
  description: 'Workplace planning and interior coordination for growing teams.',
}

Keep the root layout's Next.js metadata consistent with these defaults. General Settings can provide editorial SEO values; individual pages can override their own title, description and image.

5. Review published metadata and indexingLink to this section

Open each page's SEO controls in Admin. Use the managed generateSysthemaMetadata path rather than rebuilding CMS metadata in a second route. Inspect the rendered title, description, canonical URL and social preview.

Set NEXT_PUBLIC_SERVER_URL to the intended public origin and APP_ENVIRONMENT to the actual environment. Staging and production indexing behavior must match that choice. Check /robots.txt and /sitemap.xml on the deployed host.

See SEO and Deploying. Add Privacy and Cookie Policy content appropriate to the site's integrations and configure consent before enabling visitor tracking.

Check your workLink to this section

• A signed-out submission is stored and its notification arrives.
• Error states remain readable and associated with the controls.
• Sender addresses belong to the client and are verified.
• Page titles, descriptions and share images are reviewed.
• Staging does not invite indexing; production sitemap URLs use the public host.

Next: Launch the site.