contact-us

GitHub

Cloudflare Worker によるお問い合わせフォームバックエンド。Discord チケット連携 & メール通知。

Overview

contact-us is a contact form backend running on Cloudflare Workers. It accepts form submissions, automatically creates Discord ticket channels, and sends email notifications via Resend. Two-way communication with users is possible through Discord's /reply command and email replies.

Features

Architecture

Component Details
Runtime Cloudflare Workers
KV Stores ticket info (channel ID ↔ email address mapping)
External Services Discord API, Resend API, Cloudflare Turnstile

Environment Variables (Secrets)

Variable Description
DISCORD_BOT_TOKEN Discord Bot token
DISCORD_GUILD_ID Server ID where tickets are created
DISCORD_CATEGORY_ID Category ID for ticket channels
DISCORD_PUBLIC_KEY Discord Interaction verification public key
RESEND_API_KEY Resend API key
RESEND_FROM_EMAIL Sender email address
TURNSTILE_SECRET_KEY Cloudflare Turnstile secret key
ALLOWED_ORIGIN CORS allowed origins (comma-separated for multiple)
REPLY_TO_DOMAIN Domain for reply email addresses (defaults to RESEND_FROM_EMAIL domain if omitted)

Endpoints

Method Path Description
POST / Accept form submission
GET / Health check
POST /discord-interactions Discord Interaction Webhook

Flow Diagram

[User]
  │ Submit form
  ▼
[Cloudflare Worker] ── Create Discord channel
  │ Send confirmation email (Reply-To: reply+{channelId}@domain)
  ▼
[User replies to email]
  │ Delivered to reply+{channelId}@domain
  ▼
[Cloudflare Email Routing] ── Invokes Worker's email() handler
  │ Posts reply content to Discord channel
  ▼
[Discord staff reviews · replies with /reply]
  │ Reply email (Reply-To: reply+{channelId}@domain)
  ▼
[User] → Can reply again via email (thread continues)

Setup

1. Install Dependencies

npm install

2. Create Discord Bot

  1. Create a new application on Discord Developer Portal
  2. Enable the Bot in the Bot tab and obtain the token
  3. Use OAuth2 → URL Generator to grant permissions and invite to your server
    • Scopes: bot, applications.commands
    • Bot Permissions: Manage Channels, Send Messages, Embed Links
  4. Create a category channel for tickets on your Discord server

3. Configure Resend

  1. Create an account on Resend
  2. Add your sending domain under Domains and configure DNS records (SPF, DKIM, DMARC)
  3. Obtain your API key from API Keys

4. Configure Cloudflare Turnstile

  1. Cloudflare Dashboard → Turnstile → Add Widget
  2. Register your site's domain and create a widget
  3. Obtain the Site Key (frontend) and Secret Key

5. Set Up KV Namespace

npx wrangler kv namespace create TICKET_KV
npx wrangler kv namespace create TICKET_KV --preview

Add the output id and preview_id to your wrangler.toml.

6. Configure Email Routing

  1. Cloudflare Dashboard → your domain → Email → Email Routing
  2. Verify that Subaddressing is enabled in the Settings tab
  3. Add a route in the Routes tab: reply@yourdomain → Send to Worker

7. Register Secrets

npx wrangler secret put DISCORD_BOT_TOKEN
npx wrangler secret put DISCORD_GUILD_ID
npx wrangler secret put DISCORD_CATEGORY_ID
npx wrangler secret put DISCORD_PUBLIC_KEY
npx wrangler secret put RESEND_API_KEY
npx wrangler secret put RESEND_FROM_EMAIL
npx wrangler secret put TURNSTILE_SECRET_KEY
npx wrangler secret put ALLOWED_ORIGIN

8. Deploy

npx wrangler deploy

After deploying, set the Worker URL in Discord Developer Portal under Interactions Endpoint URL as <Worker URL>/discord-interactions.

Notes