Add a ContactFire form to any site

Two integration approaches

Get your embed token

Both approaches need an embed token. This is a public-safe credential — it is fine to ship it in client-side code.

1. Log in to my.contactfire.com
2. Go to Embed Tokens in the left sidebar
3. Click Create token
4. Give it a name (e.g., "My website") and optionally restrict it to your domain
5. Copy the token — it starts with cf_embed_

Option 1: JS embed snippet

Add two lines of HTML anywhere on your page. ContactFire loads the form asynchronously and renders it inside the #cf-form div.

<!-- Place this where you want the form to appear -->
<div id="cf-form"></div>

<!-- Load the ContactFire embed script -->
<script
  src="https://my.contactfire.com/api/embed-script"
  data-token="cf_embed_your_token_here"
  data-form-id="your_form_public_id"
  async
></script>

Option 2: Plain HTML form

Point a standard HTML form at the ContactFire submission endpoint. Use your own markup and CSS. Works on any static site, WordPress, Webflow, or server-rendered app.

<form
  action="https://my.contactfire.com/api/form/submit"
  method="POST"
>
  <!-- Required: your embed token -->
  <input type="hidden" name="_token" value="cf_embed_your_token_here" />

  <!-- Optional: redirect after successful submission -->
  <input type="hidden" name="_redirect" value="https://yoursite.com/thank-you" />

  <!-- Your form fields -->
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="4" required></textarea>

  <button type="submit">Send message</button>
</form>

Domain restrictions

Lock your embed token to specific domains so only your site can use it. This stops anyone else from submitting forms with your token.

1. Go to Embed Tokens in your dashboard
2. Edit your token
3. Add your domain under Allowed domains (e.g., yoursite.com)
4. Save — submissions from other origins are now rejected

Handle responses with JavaScript

Submit via fetch to show an inline success message instead of a page redirect.

document.querySelector('#contact-form').addEventListener('submit', async (e) => {
  e.preventDefault();

  const form = e.target;
  const data = new FormData(form);
  data.append('_token', 'cf_embed_your_token_here');

  try {
    const res = await fetch('https://my.contactfire.com/api/form/submit', {
      method: 'POST',
      body: data,
    });

    if (res.ok) {
      // Show your success message
      document.querySelector('#success').hidden = false;
      form.reset();
    } else {
      const err = await res.json();
      console.error('Submission failed:', err.message);
    }
  } catch (err) {
    console.error('Network error:', err);
  }
});

{"status":"success","message":"Submission received","submissionId":"abc123"}

{"status":"error","message":"Invalid token","code":"INVALID_TOKEN"}

Redirect after submit

For plain HTML forms (without JavaScript), add a _redirect hidden field. ContactFire redirects to that URL after a successful submission.

<input type="hidden" name="_redirect" value="https://yoursite.com/thank-you" />

If _redirect is not set and no JavaScript intercepts the submit, the browser stays on ContactFire's default confirmation page.

Custom fields

Every input name (except reserved names starting with _) becomes a field in the submission. Name your inputs to match how you want them to appear in the inbox.

<!-- These field names appear as-is in the ContactFire inbox -->
<input type="text"   name="full_name"    />
<input type="email"  name="work_email"   />
<input type="text"   name="company"      />
<select              name="budget_range" />
<textarea            name="project_brief" rows="5"></textarea>

Framework examples

import { useState } from 'react';

export default function ContactForm() {
  const [status, setStatus] = useState('idle');

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('loading');

    const data = new FormData(e.target);
    data.append('_token', 'cf_embed_your_token_here');

    const res = await fetch('https://my.contactfire.com/api/form/submit', {
      method: 'POST',
      body: data,
    });

    setStatus(res.ok ? 'success' : 'error');
  }

  if (status === 'success') return <p>Message sent!</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input name="name"    type="text"  required />
      <input name="email"   type="email" required />
      <textarea name="message" required />
      <button type="submit" disabled={status === 'loading'}>
        {status === 'loading' ? 'Sending…' : 'Send'}
      </button>
    </form>
  );
}

---
// ContactFireForm.astro — download from Dashboard > Embed Code > Astro tab
import ContactFireForm from './ContactFireForm.astro';
---
<ContactFireForm token="cf_embed_your_token_here" formId="your_form_id" />