Contact Form

User submits form

→ Browser fetch() POST /api/contact

→ CF Pages Function (functions/api/contact.ts)

→ Honeypot check (bot trap)

→ Field validation

→ Freemail filter (reject gmail, yahoo, etc.)

→ Mailgun REST API (fire-and-forget via waitUntil)

→ Return 200 JSON

→ Browser shows success state

→ GA4 generate_lead event fires

Key design decisions:

• No KV/database needed for low volume (5-20 leads/month). Mailgun logs are the audit trail.

• Freemail filter qualifies leads at the gate. Returns 422 with inline error on the email field.

• Dual response mode: JSON for fetch requests, redirect for non-JS form submissions.

2. Frontend: Form HTML

import BaseLayout from '../layouts/BaseLayout.astro';

title="Contact Us"

description="Get in touch for a consultation."

>

id="contact-form"

action="/api/contact"

method="POST"

>

type="text"

name="_gotcha"

style="display:none"

tabindex="-1"

autocomplete="off"

/>

[ SUBMIT REQUEST ]

No sales SDRs. A principal engineer reviews every inquiry.

Honeypot field rules

• If this field has any value on submission, silently succeed (don't reveal the trap)

3. Frontend: Client-Side Handling

Key UX patterns

4. CF Pages Function

/**

* Contact Form Handler — Cloudflare Pages Function

* POST /api/contact

*

* Sends notification email via Mailgun REST API.

*

* Required env vars (set as CF Pages secrets):

* MAILGUN_API_KEY, MAILGUN_DOMAIN, NOTIFICATION_EMAIL

*/

interface Env {

MAILGUN_API_KEY: string;

MAILGUN_DOMAIN: string;

NOTIFICATION_EMAIL: string;

}

// Freemail domains to reject (qualify leads at the gate)

const FREEMAIL_DOMAINS = new Set([

"gmail.com", "yahoo.com", "hotmail.com", "outlook.com",

"aol.com", "icloud.com", "mail.com", "protonmail.com",

"zoho.com", "yandex.com", "live.com", "msn.com",

"gmx.com", "fastmail.com",

]);

function isFreemailDomain(email: string): boolean {

const domain = email.split("@")[1]?.toLowerCase();

return domain ? FREEMAIL_DOMAINS.has(domain) : false;

}

export const onRequestPost: PagesFunction = async (context) => {

const { request, env } = context;

// Parse form data

const formData = await request.formData();

const name = formData.get("name")?.toString().trim() || "";

const email = formData.get("email")?.toString().trim() || "";

const company = formData.get("company")?.toString().trim() || "";

const projectType = formData.get("project_type")?.toString() || "";

const budget = formData.get("budget")?.toString() || "";

const message = formData.get("message")?.toString().trim() || "";

// Honeypot check — silently succeed if triggered

const honeypot = formData.get("_gotcha")?.toString() || "";

if (honeypot) {

return jsonOrRedirect(request, { success: true }, "/contact-us/?submitted=true");

}

// Validation

if (!name || !email || !company || !projectType || !message) {

return new Response(

JSON.stringify({ error: "Missing required fields" }),

{ status: 400, headers: { "Content-Type": "application/json" } },

);

}

// Freemail filter

if (isFreemailDomain(email)) {

return new Response(

JSON.stringify({ error: "Please use your work email address" }),

{ status: 422, headers: { "Content-Type": "application/json" } },

);

}

// Build structured email body

const emailBody = [

].join("\n");

// Send via Mailgun (fire-and-forget)

const mgDomain = env.MAILGUN_DOMAIN;

const apiKey = env.MAILGUN_API_KEY;

const notificationEmail = env.NOTIFICATION_EMAIL;

const mgFormData = new FormData();

mgFormData.append("to", notificationEmail);

mgFormData.append("text", emailBody);

mgFormData.append("h:Reply-To", email);

// waitUntil: send email AFTER response is returned to user

context.waitUntil(

method: "POST",

headers: {

},

body: mgFormData,

}).then(async (res) => {

if (!res.ok) {

console.error("Mailgun error:", res.status, await res.text());

}

}).catch((err) => {

console.error("Mailgun fetch failed:", err);

})

);

return jsonOrRedirect(request, { success: true }, "/contact-us/?submitted=true");

};

/** Return JSON for fetch requests, redirect for standard form submissions */

function jsonOrRedirect(

request: Request,

data: object,

redirectUrl: string,

): Response {

const accept = request.headers.get("Accept") || "";

if (accept.includes("application/json")) {

return new Response(JSON.stringify(data), {

status: 200,

headers: { "Content-Type": "application/json" },

});

}

return Response.redirect(new URL(redirectUrl, request.url).toString(), 302);

}

Response codes

Why plain text email (not HTML)

• Plain text is guaranteed to render in every email client

• No template maintenance

• The structured format is easy to scan

5. Mailgun Setup

Create account

Verify sending domain

Get API key

Test from command line

curl -s --user "api:key-XXXXXXXXXX" \

https://api.mailgun.net/v3/mg.mysite.com/messages \

-F from="Test " \

-F to="your@email.com" \

-F subject="Mailgun Test" \

-F text="It works."

6. CF Secrets Configuration

Set secrets via Wrangler CLI

# Each command prompts for the secret value (never visible in CLI history)

npx wrangler pages secret put MAILGUN_API_KEY --project-name=my-site

npx wrangler pages secret put MAILGUN_DOMAIN --project-name=my-site

npx wrangler pages secret put NOTIFICATION_EMAIL --project-name=my-site

Values:

Set for specific environments

# Production only

npx wrangler pages secret put MAILGUN_API_KEY --project-name=my-site --env=production

# Preview/staging only

npx wrangler pages secret put MAILGUN_API_KEY --project-name=my-site --env=preview

Verify secrets are set

# List secrets (values are hidden)

npx wrangler pages secret list --project-name=my-site

7. Testing Checklist

Local testing

# Build the site

npm run build

# Run with CF Pages dev server (supports Functions)

npx wrangler pages dev dist

# → Open http://localhost:8788/contact-us/

MAILGUN_API_KEY=key-XXXXXXXXXX

MAILGUN_DOMAIN=mg.mysite.com

NOTIFICATION_EMAIL=you@test.com

Test scenarios

• [ ] Happy path: Fill all required fields with valid work email, submit. Verify: form hides, success message shows, email arrives.

• [ ] Network error: Disconnect internet, submit form. Verify: button shows "ERROR — TRY AGAIN", resets after 3 seconds.

• [ ] Email format: Submit a lead, check the notification email. Verify: structured format, Reply-To header set to submitter's email, subject includes name + company + project type.

• [ ] Double submit prevention: Click submit rapidly. Verify: button disables on first click, only one email sent.

Production verification

After deploying:

Monitoring

• Mailgun dashboard: Check delivery rate, bounces, complaints

• CF Pages Function logs: Check for errors in function execution