Interactive Features

The contact form interaction is managed through a client-side Astro page that collects user input and a server-side API endpoint that processes the submission. The client-side component handles initial validation, honeypot spam detection, and Cloudflare Turnstile CAPTCHA integration, while the server-side component performs rigorous validation, security token verification, and email delivery via Cloudflare Email Service.

Client-Side Form Handling

The contact form is rendered in src/pages/contact.astro and utilizes a standard HTML form structure with specific fields for name, email, subject, and message ¹. The form includes a honeypot field (#honeypot) designed to be left empty by legitimate users to detect automated bots.

Client-side JavaScript attached to the form’s submit event performs the following actions:

1. Honeypot Check: It immediately returns if the honeypot field contains data, indicating a bot submission.
2. Turnstile Verification: It checks for the presence of a Cloudflare Turnstile token (cf-turnstile-response) or a fallback flag (data-turnstile-failed). If neither is present, it displays an error message requiring the user to complete the security check.
3. Submission: If validation passes, it sends a POST request to /api/contact with the form data serialized as JSON.
4. Feedback: It updates the UI with success or error messages in the #form-message div and resets the form upon success.

The page also includes a fallback mechanism for Turnstile errors (e.g., due to VPNs or WARP), which allows form submission without a token if the security check fails to load.

Server-Side API Validation

The server-side logic resides in src/pages/api/contact.ts and handles the POST request from the client ². The endpoint performs several layers of validation before processing the email:

1. Required Fields: It checks for the presence of name, email, subject, and message, returning a 400 error if any are missing.
2. Turnstile Token Verification: If the TURNSTILE_SECRET_KEY environment variable is set (production), it requires a valid Turnstile token. It calls the verifyTurnstile helper function to validate the token against Cloudflare’s API using the user’s IP address. If verification fails or the token is missing, it returns a 403 error.
3. Email Format: It validates the email address format using a regular expression, returning a 400 error if invalid.
4. Message Length: It ensures the message does not exceed 5000 characters, returning a 400 error if it does.

Email Processing and Delivery

Upon successful validation, the API processes the contact form data into an email message:

1. Sanitization: All user inputs are sanitized using an escapeHtml helper function to prevent XSS attacks in the email body.
2. Metadata: The API attaches technical metadata as email headers, including the client IP, user agent, timestamp, and country code.
3. Message Construction: It creates a MIME message with both HTML and plain text versions using the mimetext library. The HTML version includes styled content for better readability.

If any step fails, the API returns a 500 error with an appropriate error message.