SiteKit
Back to Help

How to Set Up SendGrid for Your Contact Form

Last updated: February 22, 2026

Why SendGrid?

When someone fills out your contact form, the site needs a way to send emails — one to you (the notification) and one to the customer (the confirmation). SendGrid is an email delivery service that handles this reliably.

Free tier: 100 emails per day, which is plenty for most small business contact forms.

Only need this if you selected the Contact Form feature in SiteKit. If your site doesn’t have a contact form, you can skip this guide.

Step 1: Create a SendGrid Account

  1. Go to sendgrid.com and click Start for Free
  2. Fill in your details and create an account
  3. Verify your email address

Step 2: Verify Your Sender Domain

This is the most important step. Without domain verification, your emails will go to spam.

  1. In SendGrid, go to Settings > Sender Authentication
  2. Click Authenticate Your Domain
  3. Select your DNS host. If your domain is on Cloudflare, select Cloudflare
  4. Enter your domain (e.g., yourbusiness.com)
  5. SendGrid will give you 3 CNAME records to add

Add the DNS Records

Go to your Cloudflare dashboard > your domain > DNS:

  1. Add each of the 3 CNAME records that SendGrid provided
  2. Also add these TXT records:

SPF Record:

  • Type: TXT
  • Name: @
  • Value: v=spf1 include:sendgrid.net ~all

DMARC Record:

  • Type: TXT
  • Name: _dmarc
  • Value: v=DMARC1; p=none; rua=mailto:your-email@yourdomain.com

Why all these DNS records? SPF tells email servers that SendGrid is authorized to send emails on behalf of your domain. DKIM (the CNAME records) adds a digital signature. DMARC ties them together. Without these, emails get flagged as spam or rejected entirely.

  1. Go back to SendGrid and click Verify. It usually takes a few minutes for DNS changes to propagate.

Step 3: Generate an API Key

  1. In SendGrid, go to Settings > API Keys
  2. Click Create API Key
  3. Give it a name (e.g., “Contact Form”)
  4. Select Full Access (or at minimum, Mail Send permissions)
  5. Click Create & View
  6. Copy the API key immediately — you won’t be able to see it again

Step 4: Add Environment Variables

In your Cloudflare Pages dashboard:

  1. Go to your Pages project > Settings > Environment variables
  2. Add these for the Production environment:
Variable Value Example
SENDGRID_API_KEY Your API key from Step 3 SG.xxxxx...
CONTACT_EMAIL Where you want form submissions sent info@yourbusiness.com
FROM_EMAIL The “from” address on emails noreply@yourbusiness.com
  1. Click Save
  2. Trigger a new deployment (push a commit or click Retry deployment in Cloudflare)

Step 5: Test the Contact Form

  1. Visit your live site
  2. Fill out the contact form with your own email
  3. Submit it
  4. Check your inbox for:
    • Business notification — should arrive at your CONTACT_EMAIL
    • Customer confirmation — should arrive at the email you entered in the form

Check spam folders too. If emails land in spam, your DNS records might not be fully propagated yet. Wait an hour and try again.

Troubleshooting

Emails not arriving at all

  • Double-check your SENDGRID_API_KEY environment variable in Cloudflare
  • Make sure the domain verification in SendGrid shows as verified
  • Check the Cloudflare Pages function logs for errors (in the dashboard under your project > Functions)

Emails going to spam

  • Verify all DNS records are in place (SPF, DKIM, DMARC)
  • Use a real “from” address on a verified domain (not a gmail.com address)
  • DNS changes can take up to 48 hours to fully propagate

Form works locally but not in production

  • Environment variables might not be set. Check Cloudflare Pages > Settings > Environment variables
  • CORS might be blocking the request. Check that your domain matches the allowed origins in functions/api/contact.js