How to Configure FckSignups Email Settings: Complete Cloudflare Worker Setup Guide

Configure FckSignups email settings by defining provider credentials in .env, exposing them through cloudflare-worker/wrangler.toml, and deploying the Cloudflare Worker to route form submissions to your inbox.

FckSignups relies on a Cloudflare Worker to deliver contact form submissions via external email services such as SendGrid or MailChannels. All runtime values are injected through environment variables that the worker reads at startup. To change the email behavior, you edit the environment template and Wrangler configuration, then redeploy the worker.

Step 1: Create Environment Variables

Copy the template file to create your local environment configuration:

cp .env.example .env

Open .env and populate the variables for your chosen email provider. The following values control how FckSignups authenticates and sends mail:

• EMAIL_PROVIDER — The service identifier (e.g., SENDGRID or MAILCHANNELS).
• SENDGRID_API_KEY — Your SendGrid API key (required only when EMAIL_PROVIDER=SENDGRID).
• MAILCHANNELS_ENDPOINT — The MailChannels API endpoint (required only when EMAIL_PROVIDER=MAILCHANNELS).
• EMAIL_FROM — The sender address displayed to recipients (e.g., no-reply@fcksignups.com).
• EMAIL_TO — The destination inbox that receives all form submissions (e.g., contact@fcksignups.com).

File path: /.env.example

Step 2: Wire Variables into the Worker

Open cloudflare-worker/wrangler.toml and map the environment variables under the [vars] section. This tells Wrangler to inject the values into the worker’s sandbox at deploy time.

[vars]
EMAIL_PROVIDER = "SENDGRID"
SENDGRID_API_KEY = "$SENDGRID_API_KEY"
MAILCHANNELS_ENDPOINT = "https://api.mailchannels.net/tx/v1"
EMAIL_FROM = "no-reply@fcksignups.com"
EMAIL_TO = "contact@fcksignups.com"

The $SENDGRID_API_KEY syntax instructs Wrangler to pull the actual value from your local .env file during the build process.

File path: /cloudflare-worker/wrangler.toml

Step 3: Customize the sendEmail Helper (Optional)

If you need to modify headers, switch providers, or adjust the payload structure, edit the sendEmail function inside cloudflare-worker/worker.ts. The helper reads the injected environment variables and constructs the HTTP request to the provider.

function sendEmail(payload: EmailPayload): Promise<Response> {
  const provider = EMAIL_PROVIDER; // injected via env

  if (provider === "SENDGRID") {
    const url = "https://api.sendgrid.com/v3/mail/send";
    const headers = {
      Authorization: `Bearer ${SENDGRID_API_KEY}`,
      "Content-Type": "application/json",
    };
    return fetch(url, { method: "POST", headers, body: JSON.stringify(payload) });
  }

  // Fallback for MailChannels
  const url = MAILCHANNELS_ENDPOINT;
  const headers = { "Content-Type": "application/json" };
  return fetch(url, { method: "POST", headers, body: JSON.stringify(payload) });
}

Extend the conditional block to support additional providers or custom SMTP logic.

File path: /cloudflare-worker/worker.ts

Step 4: Deploy the Worker

After editing the configuration files, install dependencies and publish the worker:

# Install root dependencies

npm install

# Move into the worker directory and install its dependencies

cd cloudflare-worker && npm install

# Deploy with the new environment variables

npx wrangler publish

The worker will now read the updated variables and route form submissions to the configured mailbox.

Step 5: Verify the Setup

Test the integration by submitting the contact form rendered by the Footer component. Navigate to the site, fill out the form found in src/components/Home/Footer/Footer.tsx, and submit it.

Check the inbox defined in EMAIL_TO for the test message. If delivery fails, inspect the Worker logs via the Cloudflare dashboard or run wrangler dev locally to view error responses from the email provider.

File path: /src/components/Home/Footer/Footer.tsx

Summary

• Environment setup: Copy .env.example to .env and add your email provider credentials.
• Configuration binding: Reference the variables in cloudflare-worker/wrangler.toml under [vars].
• Logic customization: Modify sendEmail in cloudflare-worker/worker.ts only if you need custom headers or provider logic.
• Deployment: Run npx wrangler publish inside the cloudflare-worker directory to apply changes.
• Testing: Use the Footer contact form to verify emails reach the EMAIL_TO address.

Frequently Asked Questions

What email providers does FckSignups support?

According to the source code in cloudflare-worker/worker.ts, FckSignups ships with built-in support for SendGrid and MailChannels. You can extend the sendEmail function to support any SMTP-compatible provider or API-driven service by adding additional conditional branches.

How do I switch from SendGrid to MailChannels?

Change the EMAIL_PROVIDER value in both your .env file and wrangler.toml to MAILCHANNELS, then provide the MAILCHANNELS_ENDPOINT variable. Ensure SENDGRID_API_KEY is removed or commented out to avoid confusion, then redeploy the worker with npx wrangler publish.

Where are the FckSignups email configuration files located?

The configuration lives in three primary locations: the repository root contains .env.example for variable templates; cloudflare-worker/wrangler.toml binds those variables to the worker; and cloudflare-worker/worker.ts contains the runtime logic that constructs the email request.

Why am I not receiving test emails from FckSignups?

First, verify that EMAIL_TO is set correctly in both .env and wrangler.toml. Next, check the Cloudflare Worker logs for HTTP 4xx or 5xx errors from your email provider, which indicate authentication or payload issues. Finally, ensure you ran npx wrangler publish after making changes, as local .env edits do not affect the deployed worker until published.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}