Submit Form Data With TypeScript

This example narrows the JSON returned by SmartFormify and exposes typed data only after the endpoint accepts the submission.

type EndpointSuccess = {
  success: true;
  message: string;
  data: {
    submission_id: string;
    redirect_url: string | null;
    thank_you_content: string;
  };
};

type EndpointFailure = {
  success: false;
  message: string;
  data: Record<string, never>;
};

type EndpointResult = EndpointSuccess | EndpointFailure;

const ENDPOINT_URL = "https://api.smartformify.com/fe/YOUR_ENDPOINT_KEY";

function getTextFields(form: HTMLFormElement): Record<string, string> {
  const fields: Record<string, string> = {};

  new FormData(form).forEach((value, key) => {
    if (typeof value === "string") fields[key] = value;
  });

  return fields;
}

async function submitForm(form: HTMLFormElement) {
  const response = await fetch(ENDPOINT_URL, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ data: getTextFields(form) })
  });

  const result = (await response.json()) as EndpointResult;

  if (!response.ok || !result.success) {
    throw new Error(result.message || "Submission failed.");
  }

  return result.data;
}