Job application form

{
  "version": 1,
  "title": "Job application",
  "fields": [
    {
      "id": "full_name",
      "type": "text",
      "label": "Full name",
      "required": true,
      "validation": {
        "max_length": 160
      }
    },
    {
      "id": "email",
      "type": "email",
      "label": "Email",
      "required": true
    },
    {
      "id": "phone",
      "type": "phone",
      "label": "Phone"
    },
    {
      "id": "role",
      "type": "select",
      "label": "Role",
      "required": true,
      "options": [
        {
          "value": "frontend_engineer",
          "label": "Frontend engineer"
        },
        {
          "value": "backend_engineer",
          "label": "Backend engineer"
        },
        {
          "value": "product_designer",
          "label": "Product designer"
        }
      ]
    },
    {
      "id": "cv_url",
      "type": "url",
      "label": "Link to your CV",
      "required": true,
      "help_text": "A public or shared link, for example Google Drive, Dropbox or your own site.",
      "validation": {
        "https_only": true
      }
    },
    {
      "id": "portfolio_url",
      "type": "url",
      "label": "Portfolio or GitHub",
      "validation": {
        "https_only": true
      }
    },
    {
      "id": "cover_letter",
      "type": "textarea",
      "label": "Why this role?",
      "rows": 8,
      "validation": {
        "max_length": 6000
      }
    },
    {
      "id": "consent",
      "type": "checkbox",
      "label": "Keep my application on file for this hiring round",
      "required": true
    }
  ],
  "settings": {
    "submit_label": "Apply",
    "success_message": "Thanks for applying. We reply to every application."
  }
}

IKIFORM_SECRET_KEY=ik_sk_your_secret_key

"use server";

export interface JobApplicationFormState {
  ok: boolean;
  message: string;
  fields?: Record<string, string[]>;
  values?: Record<string, string[]>;
}

export async function sendJobApplicationForm(_previous: JobApplicationFormState, formData: FormData): Promise<JobApplicationFormState> {
  const body = new URLSearchParams();
  for (const [name, value] of formData) {
    if (typeof value === "string" && !name.startsWith("$ACTION")) body.append(name, value);
  }
  const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", {
    method: "POST",
    headers: {
      Accept: "application/json",
      Authorization: `Bearer ${process.env.IKIFORM_SECRET_KEY}`,
    },
    body,
  });
  const result = await response.json();
  if (result.ok) return { ok: true, message: "Thanks for applying. We reply to every application." };
  const values = Object.fromEntries([...new Set(body.keys())].map((name) => [name, body.getAll(name)]));
  return { ok: false, message: result.error.message, fields: result.error.fields, values };
}

"use client";

import { useActionState } from "react";
import { type JobApplicationFormState, sendJobApplicationForm } from "./actions";

const initial: JobApplicationFormState = { ok: false, message: "" };

export function JobApplicationForm() {
  const [state, action, pending] = useActionState(sendJobApplicationForm, initial);

  if (state.ok) return <p>{state.message}</p>;

  return (
    <form action={action}>
      <label htmlFor="full_name">Full name</label>
      <input id="full_name" name="full_name" type="text" maxLength={160} required defaultValue={state.values?.full_name?.[0]} />
      {state.fields?.full_name ? <p>{state.fields.full_name[0]}</p> : null}
      <label htmlFor="email">Email</label>
      <input id="email" name="email" type="email" autoComplete="email" required defaultValue={state.values?.email?.[0]} />
      {state.fields?.email ? <p>{state.fields.email[0]}</p> : null}
      <label htmlFor="phone">Phone</label>
      <input id="phone" name="phone" type="tel" autoComplete="tel" defaultValue={state.values?.phone?.[0]} />
      {state.fields?.phone ? <p>{state.fields.phone[0]}</p> : null}
      <label htmlFor="role">Role</label>
      <select id="role" name="role" required defaultValue={state.values?.role?.[0]}>
        <option value="">Choose one</option>
        <option value="frontend_engineer">Frontend engineer</option>
        <option value="backend_engineer">Backend engineer</option>
        <option value="product_designer">Product designer</option>
      </select>
      {state.fields?.role ? <p>{state.fields.role[0]}</p> : null}
      <label htmlFor="cv_url">Link to your CV</label>
      <input id="cv_url" name="cv_url" type="url" required aria-describedby="cv_url-help" defaultValue={state.values?.cv_url?.[0]} />
      <p id="cv_url-help">A public or shared link, for example Google Drive, Dropbox or your own site.</p>
      {state.fields?.cv_url ? <p>{state.fields.cv_url[0]}</p> : null}
      <label htmlFor="portfolio_url">Portfolio or GitHub</label>
      <input id="portfolio_url" name="portfolio_url" type="url" defaultValue={state.values?.portfolio_url?.[0]} />
      {state.fields?.portfolio_url ? <p>{state.fields.portfolio_url[0]}</p> : null}
      <label htmlFor="cover_letter">Why this role?</label>
      <textarea id="cover_letter" name="cover_letter" rows={8} maxLength={6000} defaultValue={state.values?.cover_letter?.[0]} />
      {state.fields?.cover_letter ? <p>{state.fields.cover_letter[0]}</p> : null}
      <label><input name="consent" type="checkbox" required defaultChecked={Boolean(state.values?.consent)} /> Keep my application on file for this hiring round</label>
      {state.fields?.consent ? <p>{state.fields.consent[0]}</p> : null}
      <input name="_gotcha" type="text" tabIndex={-1} autoComplete="off" hidden />
      {state.message && !state.fields ? <p role="alert">{state.message}</p> : null}
      <button disabled={pending}>{pending ? "Sending" : "Apply"}</button>
    </form>
  );
}