Form Capture Worker for MS Teams

A Cloudflare Worker that captures form submissions from allowed domains and forwards them to Microsoft Teams via webhooks.

Features

• API Key Authentication: Secure endpoints with API key verification
• Domain Whitelisting: Only accept form submissions from authorized domains
• MS Teams Integration: Format and forward submissions to MS Teams channels
• Support for Multiple Content Types: Handle both JSON and form data submissions

Installation

1. Install dependencies:

npm install

2. Configure your environment variables (see Configuration section below)

3. Set your API key as a secret:

npx wrangler secret put API_KEY

Configuration

wrangler.toml

Update the wrangler.toml file with your account information:

account_id = "your-cloudflare-account-id"

Set your allowed domains and Teams webhook URL:

[vars]
ALLOWED_DOMAINS = "example.com,your-domain.com"
TEAMS_WEBHOOK_URL = "https://your-teams-webhook-url"

Deployment

Develop locally:

npm run dev

Deploy to Cloudflare:

npm run deploy

Usage

Sending Form Data

To submit form data to the worker, make a POST request with the API key in the header:

fetch('https://your-worker.your-subdomain.workers.dev', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'x-api-key': 'your-api-key'
  },
  body: JSON.stringify({
    name: 'John Doe',
    email: 'john@example.com',
    message: 'Hello world!'
  })
});

HTML Form Example

<form id="contact-form">
  <input type="text" name="name" placeholder="Your Name" required>
  <input type="email" name="email" placeholder="Your Email" required>
  <textarea name="message" placeholder="Your Message" required></textarea>
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('contact-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const formObject = Object.fromEntries(formData.entries());
    
    try {
      const response = await fetch('https://your-worker.your-subdomain.workers.dev', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-api-key': 'YOUR_API_KEY'
        },
        body: JSON.stringify(formObject)
      });
      
      if (response.ok) {
        alert('Form submitted successfully!');
        e.target.reset();
      } else {
        alert('Error submitting form');
      }
    } catch (error) {
      console.error('Error:', error);
      alert('Error submitting form');
    }
  });
</script>

Tips

• Keep your API key and worker endpoint secret: Never expose your API key in client-side code. Use environment variables to store sensitive values.