Skip to content
Mecham Web Development Logo Mecham Web Development
astro-rocket tutorial email cloudflare deployment

Contact Form Setup: Resend, Cloudflare, and GoDaddy Step by Step

Connect the contact form to Resend, verify your domain, and store the API key as a Cloudflare Worker secret.

H

Hans Martens

2 min read

Astro Rocket ships with a fully working contact form — validation, honeypot spam protection, error handling, the lot. The one thing it does not include is an email service account, because that belongs to you. Getting the form to actually deliver requires three external pieces: a Resend account, a verified sending domain, and a secret on your Cloudflare Worker. Here is exactly how to connect them.

Resend is a developer-focused email delivery service. You send email through their API and they handle the infrastructure — deliverability, authentication, and sending reputation. It has a generous free tier and is what Astro Rocket uses under the hood.

Cloudflare Workers runs the Astro server and contact API. The Resend API key is stored as an encrypted Worker secret, not in source code or public environment variables.

GoDaddy is the domain registrar where yourdomain.com is registered. To send email from an address on your domain, you need to add a few DNS records there so Resend can prove to receiving mail servers that the emails are legitimate.

What you need before you start

  • A Resend account (free tier is fine)
  • Access to your domain’s DNS settings in GoDaddy
  • Access to your Cloudflare account and the project Worker

The form sends to your inbox from an address on your domain. The only moving part is convincing Resend that you own that domain.

Step 1 — Create a Resend account

Go to resend.com and sign up. The free tier allows 3,000 emails per month and 100 per day — more than enough for a contact form.

Step 2 — Verify your domain in Resend

This is the most involved step. Resend needs to verify that you own your domain before it will send email from addresses on it.

  1. In Resend, go to Domains → Add Domain
  2. Enter yourdomain.com and click Add
  3. Resend shows you a set of DNS records to add — typically an SPF record, two or three DKIM CNAME records, and an optional DMARC record

Now add those records in GoDaddy:

  1. Log in to GoDaddy and go to My Products
  2. Next to your domain, click DNS (or Manage DNS)
  3. For each record Resend gives you, click Add New Record and fill in the type, name, and value exactly as shown

A few GoDaddy-specific notes:

  • GoDaddy calls the Host field what Resend labels Name. If Resend shows @ as the name, leave the GoDaddy host field empty or enter @.
  • GoDaddy sometimes appends your domain to the name automatically. If a CNAME record name already ends in .yourdomain.com in Resend, enter only the part before the dot in GoDaddy.
  • TTL can be left at the default (1 hour).

Once all records are added, go back to Resend and click Verify DNS Records. DNS propagation usually takes a few minutes but can take up to an hour. The domain status changes to Verified when it is ready.

Step 3 — Create an API key

  1. In Resend, go to API Keys → Create API Key
  2. Give it a name — yourdomain.com production works well
  3. Permission: Sending access is sufficient
  4. Click Add and copy the key immediately — Resend only shows it once

Step 4 — Add the API key to your Cloudflare Worker

From the project directory, run:

npx wrangler secret put RESEND_API_KEY

When prompted, paste the Resend key into the terminal. Wrangler uploads it as a secret binding named RESEND_API_KEY; the contact endpoint reads that binding server-side. Do not put the key in wrangler.jsonc, a PUBLIC_ variable, or committed source files.

If you deploy separate Workers for staging and production, set the secret on each Worker. RESEND_FROM_EMAIL can optionally be set the same way if you want a sender address other than the site inbox:

npx wrangler secret put RESEND_FROM_EMAIL

For local development, put RESEND_API_KEY in the root .env file. Astro reads it as a server secret; do not prefix it with PUBLIC_.

Step 5 — Deploy and test

Deploy the site to Cloudflare Workers using your normal deployment workflow. Then open the live site, fill in the contact form, and submit. Within a few seconds you should receive the message at your inbox address. The reply-to is set to whatever email the visitor entered, so you can reply directly from your inbox.

Step 6 — Test it

Open your live site, fill in the contact form, and submit. Within a few seconds you should receive the message at your inbox address. The reply-to is set to whatever email the visitor entered, so you can reply directly from your inbox.

If the form returns an error, the most common causes are:

ProblemLikely cause
”API key not authorized”Domain not verified in Resend yet, or the Worker secret was set on a different Worker/environment
No email receivedCheck your spam folder; Resend’s dashboard shows delivery status under Emails
500 error on submitRESEND_API_KEY secret is missing from the Worker handling the request

Which Astro Rocket files to update

The contact endpoint is already implemented. Set the recipient address in the site configuration and provide the Resend key as a local environment secret or Cloudflare Worker secret.

1. src/config/site.config.ts

Set email to the inbox where contact form submissions should arrive:

email: 'you@gmail.com',

If you set RESEND_FROM_EMAIL, it must use your Resend-verified domain. If omitted, the configured inbox address is used as the sender.

2. .env (local) or Cloudflare Worker secrets (production)

The API key is never stored in the source code. For local development, add it to .env at the project root:

RESEND_API_KEY=re_xxxxxxxxxxxxxxxxxx

For production, add it to the Cloudflare Worker with npx wrangler secret put RESEND_API_KEY as described in Step 4 above. The variable name must be exactly RESEND_API_KEY.

The rest of the contact form — validation, spam protection, error handling, and the HTML email template — works without changes to the endpoint.

Back to Blog
Share:

Related Posts

SEO in Astro Rocket: What's Built In and How to Configure It

Astro Rocket handles structured data, Open Graph, canonical URLs, sitemaps, and more out of the box. Here's exactly what ships and where to configure it.

H Hans Martens
2 min read
astro-rocket seo structured-data tutorial configuration

How Astro Rocket's Design System Works — Tokens, Colors, and Dark Mode

Astro Rocket uses a three-tier token architecture with OKLCH colors. Change one value and the entire site updates. Here's how it works and how to make it yours.

H Hans Martens
2 min read
astro-rocket design-system tailwind customization tutorial

The Hero Typing Effect in Astro Rocket — How It Works and How to Tune It

Astro Rocket's hero headline cycles through words with a typing animation. Learn how it works, how to tune every speed and pause, and how to disable it entirely.

H Hans Martens
2 min read
astro-rocket components customization tutorial javascript

Follow along

Stay in the loop — new articles, thoughts, and updates.