Forms on your website

<!-- Style these fields to match your website. Keep their name attributes. -->
<form id="contact-form" data-makeform="https://makeform.live/v1/forms/YOUR_FORM_ID/submissions">
  <label>Name<input type="text" name="name" maxlength="200" required></label>
  <label>Email address<input type="email" name="email" maxlength="254" required></label>
  <label>Message<textarea name="message" rows="5" maxlength="2000" required></textarea></label>
  <div hidden><label>Leave this empty<input name="__makeform_website" data-makeform-honeypot tabindex="-1" autocomplete="off"></label></div>
  <p>Read our <a href="https://yourbusiness.com/privacy" target="_blank" rel="noreferrer">privacy notice (opens in a new tab)</a> before sending. Please don't include sensitive information.</p>
  <div data-makeform-verification></div>
  <button type="submit" disabled>Send message</button>
  <p data-makeform-status role="status" aria-live="polite"></p>
  <noscript>Please enable JavaScript to send this form.</noscript>
</form>
<script src="https://makeform.live/makeform.js" defer></script>

const client = window;
const script = document.createElement("script");
script.src = "https://makeform.live/makeform.js";
script.async = true;
// Connect after your form has been rendered. No API key is used in the browser.
const form = document.querySelector("#contact-form");
if (!form) throw new Error("Render the contact-form element first.");
let disconnect;
function connect() {
  disconnect = client.MakeForm.connect(form);
}
script.onload = connect;
script.onerror = () => {
  const status = form.querySelector("[data-makeform-status]");
  if (status) status.textContent = "The form could not load. Please refresh and try again.";
};
if (client.MakeForm) connect();
else document.head.append(script);
// Before removing this form in a single-page app, call disconnect?.().
// The helper handles fetch, spam verification, typed fields and safe retries.

type MakeFormClient = { connect(form: HTMLFormElement): () => void };
const client = window as Window & { MakeForm?: MakeFormClient };
const script = document.createElement("script");
script.src = "https://makeform.live/makeform.js";
script.async = true;
// Connect after your form has been rendered. No API key is used in the browser.
const form = document.querySelector<HTMLFormElement>("#contact-form");
if (!form) throw new Error("Render the contact-form element first.");
let disconnect: (() => void) | undefined;
function connect() {
  disconnect = client.MakeForm!.connect(form!);
}
script.onload = connect;
script.onerror = () => {
  const status = form!.querySelector("[data-makeform-status]");
  if (status) status.textContent = "The form could not load. Please refresh and try again.";
};
if (client.MakeForm) connect();
else document.head.append(script);
// Before removing this form in a single-page app, call disconnect?.().
// The helper handles fetch, spam verification, typed fields and safe retries.

"use client";
// Save as ContactForm.tsx. Style these native fields with your own CSS.
import { useEffect, useRef } from "react";
type MakeFormClient = { connect(form: HTMLFormElement): () => void };

export default function ContactForm() {
  const ref = useRef<HTMLFormElement>(null);
  useEffect(() => {
    const form = ref.current;
    if (!form) return;
    const client = window as Window & { MakeForm?: MakeFormClient };
    let active = true;
    let disconnect: (() => void) | undefined;
    const connect = () => { if (active) disconnect = client.MakeForm!.connect(form); };
    const script = document.createElement("script");
    script.src = "https://makeform.live/makeform.js";
    script.async = true;
    script.onload = connect;
    script.onerror = () => {
      const status = form.querySelector("[data-makeform-status]");
      if (active && status) status.textContent = "The form could not load. Please refresh and try again.";
    };
    if (client.MakeForm) connect();
    else document.head.append(script);
    return () => { active = false; disconnect?.(); script.remove(); };
  }, []);
  return (
    <form ref={ref} data-makeform={"https://makeform.live/v1/forms/YOUR_FORM_ID/submissions"}>
      <label>{"Name"}<input type="text" name={"name"} required /></label>
      <label>{"Email address"}<input type="email" name={"email"} required /></label>
      <label>{"Message"}<textarea name={"message"} rows={5} maxLength={2000} required /></label>
      <div hidden><label>Leave this empty<input name="website" tabIndex={-1} autoComplete="off" /></label></div>
      <p>Read our <a href={"https://yourbusiness.com/privacy"} target="_blank" rel="noreferrer">privacy notice (opens in a new tab)</a> before sending. Please don't include sensitive information.</p>
      <div data-makeform-verification />
      <button type="submit" disabled>Send message</button>
      <p data-makeform-status role="status" aria-live="polite" />
    </form>
  );
}
// The helper manages these uncontrolled fields and status. Do not add a second onSubmit.
// It releases listeners and the verification iframe on unmount (including Strict Mode).

// Node.js 24+. Save as makeform.mjs. Run only on your server.
// Create Key 1 and Key 2 on this form's Share tab → Send from your server · API.
// Set MAKEFORM_API_KEY on your server.
export async function sendInquiry(data, submissionKey) {
  const apiKey = process.env.MAKEFORM_API_KEY;
  if (!apiKey) throw new Error("Set MAKEFORM_API_KEY on your server.");
  if (!submissionKey) throw new Error("Provide one submission key per inquiry.");
  const response = await fetch("https://makeform.live/v1/forms/YOUR_FORM_ID/submissions", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + apiKey,
    },
    body: JSON.stringify({ submissionKey, data }),
    signal: AbortSignal.timeout(15000),
  });
  const result = await response.json();
  if (!response.ok || result.status !== "accepted") {
    throw new Error(result.message || "Inquiry not confirmed.");
  }
  return result;
}

// Example usage in your server handler:
// import { randomUUID } from "node:crypto";
// import { sendInquiry } from "./makeform.mjs";
// const submissionKey = randomUUID(); // Persist with the inquiry before sending.
// const data = {"name":"Alex","email":"alex@example.test","message":"A fictional test inquiry."};
// await sendInquiry(data, submissionKey);
// Retry using the SAME data and key; generate a new key for a different inquiry.

import json
import os
import urllib.request
import urllib.error

def send_inquiry(data, submission_key):
    api_key = os.environ.get("MAKEFORM_API_KEY")
    if not api_key or not submission_key:
        raise ValueError("Set MAKEFORM_API_KEY and provide a submission key.")
    body = json.dumps({"submissionKey": submission_key, "data": data}).encode("utf-8")
    request = urllib.request.Request(
        "https://makeform.live/v1/forms/YOUR_FORM_ID/submissions", data=body, method="POST",
        headers={"Content-Type": "application/json", "Authorization": "Bearer " + api_key})
    try:
        with urllib.request.urlopen(request, timeout=15) as response:
            result = json.load(response)
    except urllib.error.HTTPError as error:
        # Honor error.headers.get("Retry-After") for 429/503. Do not retry immediately.
        raise RuntimeError(f"Inquiry not confirmed (HTTP {error.code}).") from error
    if result.get("status") != "accepted":
        raise RuntimeError("Inquiry not confirmed.")
    return result

# Example in your server handler (not run on import):
# import uuid
# data = json.loads("{\"name\":\"Alex\",\"email\":\"alex@example.test\",\"message\":\"A fictional test inquiry.\"}")
# submission_key = str(uuid.uuid4())  # Persist BEFORE sending; reuse for retries.
# send_inquiry(data, submission_key)
# Network errors mean acceptance is uncertain. Retry the SAME key and data later.

using System;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Net.Http.Json;
using System.Text.Json;
using System.Threading.Tasks;

public static class MakeFormClient
{
    private static readonly HttpClient Client = new() { Timeout = TimeSpan.FromSeconds(15) };
    public static async Task<JsonElement> SendInquiryAsync(object data, string submissionKey)
    {
        var apiKey = Environment.GetEnvironmentVariable("MAKEFORM_API_KEY");
        if (string.IsNullOrWhiteSpace(apiKey) || string.IsNullOrWhiteSpace(submissionKey))
            throw new InvalidOperationException("Set MAKEFORM_API_KEY and provide a submission key.");
        using var request = new HttpRequestMessage(HttpMethod.Post, "https://makeform.live/v1/forms/YOUR_FORM_ID/submissions");
        request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", apiKey);
        request.Content = JsonContent.Create(new { submissionKey, data });
        using var response = await Client.SendAsync(request);
        // For 429/503, honor response.Headers.RetryAfter before retrying.
        response.EnsureSuccessStatusCode();
        var result = await response.Content.ReadFromJsonAsync<JsonElement>();
        if (!result.TryGetProperty("status", out var status) || status.GetString() != "accepted")
            throw new InvalidOperationException("Inquiry not confirmed.");
        return result;
    }
}

// In your server handler:
// var data = JsonSerializer.Deserialize<JsonElement>("{\"name\":\"Alex\",\"email\":\"alex@example.test\",\"message\":\"A fictional test inquiry.\"}");
// var key = Guid.NewGuid().ToString(); // Persist BEFORE sending; reuse for retries.
// await MakeFormClient.SendInquiryAsync(data, key);
// A timeout does not prove failure. Retry the SAME key and data later.

import java.io.IOException;
import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;
import java.time.Duration;
import java.util.Map;
import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;

public final class MakeFormClient {
    private static final HttpClient CLIENT = HttpClient.newBuilder()
        .connectTimeout(Duration.ofSeconds(15)).build();
    private static final ObjectMapper JSON = new ObjectMapper();
    public static JsonNode sendInquiry(Map<String, Object> data, String submissionKey)
            throws IOException, InterruptedException {
        String apiKey = System.getenv("MAKEFORM_API_KEY");
        if (apiKey == null || apiKey.isBlank() || submissionKey == null || submissionKey.isBlank())
            throw new IllegalArgumentException("Set MAKEFORM_API_KEY and provide a submission key.");
        String body = JSON.writeValueAsString(Map.of("submissionKey", submissionKey, "data", data));
        HttpRequest request = HttpRequest.newBuilder(URI.create("https://makeform.live/v1/forms/YOUR_FORM_ID/submissions"))
            .timeout(Duration.ofSeconds(15))
            .header("Content-Type", "application/json")
            .header("Authorization", "Bearer " + apiKey)
            .POST(HttpRequest.BodyPublishers.ofString(body)).build();
        HttpResponse<String> response = CLIENT.send(request, HttpResponse.BodyHandlers.ofString());
        // For 429/503, honor response.headers().firstValue("Retry-After") before retrying.
        if (response.statusCode() < 200 || response.statusCode() >= 300)
            throw new IOException("Inquiry not confirmed (HTTP " + response.statusCode() + ").");
        JsonNode result = JSON.readTree(response.body());
        if (!"accepted".equals(result.path("status").asText()))
            throw new IOException("Inquiry not confirmed.");
        return result;
    }
}

// In your server handler, using an ObjectMapper named mapper:
// Map<String, Object> data = mapper.readValue("{\"name\":\"Alex\",\"email\":\"alex@example.test\",\"message\":\"A fictional test inquiry.\"}",
//     new com.fasterxml.jackson.core.type.TypeReference<Map<String, Object>>() {});
// String key = java.util.UUID.randomUUID().toString(); // Persist BEFORE sending.
// MakeFormClient.sendInquiry(data, key);
// A timeout does not prove failure. Retry the SAME key and data later.