React / SPA

The React / SPA integration method is designed for React, Next.js, Vue, Svelte, or any frontend application that submits data using JavaScript.

By submitting data via JavaScript, you can manage the loading, success, and error states inline without forcing a browser redirect or reloading the page.

Setup Guide

Navigate to your form's detail page in the CRM.
Configure Allowed Domains by adding the exact domain where your app is hosted (e.g., https://yourdomain.com).
Set up the form submit handler to collect input data and send a POST request.

Code Example

Here is a template implementation using React:

import React, { useState } from "react";
 
export default function LeadForm() {
  const [status, setStatus] = useState("idle");
 
  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus("submitting");
    const formData = new FormData(e.currentTarget);
 
    const payload = {
      email: formData.get("email"),
      first_name: formData.get("first_name"),
      last_name: formData.get("last_name"),
      website_url: formData.get("website_url"), // Honeypot: read directly from the DOM
    };
 
    try {
      const response = await fetch(
        "https://app.gordoncrm.com/api/forms/YOUR_FORM_ID",
        {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        }
      );
 
      if (response.ok) {
        setStatus("success");
      } else {
        setStatus("error");
      }
    } catch (err) {
      console.error("Submission failed:", err);
      setStatus("error");
    }
  };
 
  if (status === "success") {
    return <p>Thank you! Your submission has been received.</p>;
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" placeholder="Email" required />
      <input type="text" name="first_name" placeholder="First Name" />
      <input type="text" name="last_name" placeholder="Last Name" />
 
      {/* Honeypot — Hidden input to trap bots. Keep out of React state. */}
      <div style={{ position: "absolute", left: "-9999px" }} aria-hidden="true">
        <input type="text" name="website_url" tabIndex={-1} autoComplete="off" />
      </div>
 
      <button type="submit" disabled={status === "submitting"}>
        {status === "submitting" ? "Submitting..." : "Submit"}
      </button>
      {status === "error" && <p style={{ color: "red" }}>Something went wrong. Please try again.</p>}
    </form>
  );
}

Key Considerations

Whitelist Authentication

Browser requests authenticate using origin headers. Do not expose your form's API key in frontend code (never use the API key in a browser environment). Ensure your app's host URL is whitelisted under the form's Allowed Domains settings.

Honeypot Handling

To prevent bots from bypassing your spam filters, include the hidden website_url input.

Important: Do not bind this input to a React state variable (e.g., via value and onChange). Bots often bypass React's virtual DOM events. Instead, read the value directly from the DOM using FormData on submit, as shown in the example.

CORS Support

Gordon CRM returns dynamic CORS headers matching your whitelisted domains. Once your hosting domain is whitelisted, your fetch() requests will bypass browser CORS restrictions automatically.

Inline Success Response

Because you are handling submissions asynchronously, leave the form's Success Redirect URL blank in the dashboard. The API will respond with JSON:

{ "success": true, "contact_id": "contact-id" }

HTML Embed Integration — Embed forms using standard HTML actions
Server / API Key Integration — Connect backend services
Technical Reference: Forms — CORS policies, rate-limiting, and verification details

HTML Embed Server / API Key