Can I send quote requests to my CRM?

Yes, through a webhook. Ikiform posts each submission as signed JSON, which Zapier, Make, n8n or your own server can pass to any CRM with an API.

Why are budget and timeline select fields instead of free text?

Ikiform only accepts the listed option values for select and radio fields, so every lead uses the same few strings. That makes filtering, routing and reporting reliable.

What happens if someone submits twice?

The Strict rate limit allows 2 every 10 minutes per visitor. An identical repeat within 24 hours also adds 3 to the spam score, which on its own is below the spam threshold of 5.

Forms

October 24, 20268 fields

Quote request form

A quote request form with service, budget and timeline as fixed choices, so every lead arrives in the same shape for your CRM or sales channel.

Form ID

Preview

Runs Ikiform's validator in your browser. Nothing is sent.

Copy the code

Every version below is generated from the same field definition. Replace frm_xxxxxxxxxxxxxxxx with your form id, or enter it in the Form ID box and the code updates.

quote-request.html

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" maxlength="120" required />
  <label for="email">Work email</label>
  <input id="email" name="email" type="email" autocomplete="email" required />
  <label for="company">Company</label>
  <input id="company" name="company" type="text" maxlength="200" />
  <label for="phone">Phone</label>
  <input id="phone" name="phone" type="tel" autocomplete="tel" />
  <label for="service">What do you need?</label>
  <select id="service" name="service" required>
    <option value="">Choose one</option>
    <option value="design">Design</option>
    <option value="development">Development</option>
    <option value="consulting">Consulting</option>
    <option value="other">Something else</option>
  </select>
  <label for="budget">Budget</label>
  <select id="budget" name="budget">
    <option value="">Choose one</option>
    <option value="under_5k">Under $5,000</option>
    <option value="5k_20k">$5,000 to $20,000</option>
    <option value="20k_50k">$20,000 to $50,000</option>
    <option value="over_50k">Over $50,000</option>
  </select>
  <fieldset>
    <legend>When do you want to start?</legend>
    <label><input type="radio" name="timeline" value="now" /> As soon as possible</label>
    <label><input type="radio" name="timeline" value="quarter" /> In the next three months</label>
    <label><input type="radio" name="timeline" value="later" /> Later</label>
  </fieldset>
  <label for="details">Project details</label>
  <textarea id="details" name="details" rows="6" minlength="20" maxlength="8000" required aria-describedby="details-help"></textarea>
  <p id="details-help">What you're building, who it's for and anything we should know.</p>
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Request a quote</button>
</form>

HTML needs no JavaScript. After a successful post the browser is redirected to the form's redirect URL, or to Ikiform's hosted thank-you page.
React uses the SDK: npm install @ikiform/sdk. Field errors from the server appear under each field.
JavaScript enhances the HTML form with fetch, so the visitor stays on the page.
The hidden _gotcha input is the honeypot. Leave it empty and hidden.

If you set the form's spam check to Ikiform, the HTML form keeps working with no change and the server action skips the check because it sends a secret key. The React and JavaScript versions must get a token before each submit: call challenge(FORM_ID) from @ikiform/sdk and pass it to submit as turnstileToken, or add it to the fetch body as cf-turnstile-response. Without it the post is refused with 403 challenge_required. See the Next.js guide and Spam protection.

The fields

Paste this definition on the form's Fields tab in the dashboard. Ikiform then checks every post against it on the server, refuses bad data with 422 validation_failed, refuses any field that isn't listed, and stores typed values.

Field id	Type	Required	Accepts
`name`	`text`	Yes	Up to 120 characters
`email`	`email`	Yes	One valid address
`company`	`text`	No	Up to 200 characters
`phone`	`phone`	No	6 to 15 digits
`service`	`select`	Yes	One of: `design`, `development`, `consulting`, `other`
`budget`	`select`	No	One of: `under_5k`, `5k_20k`, `20k_50k`, `over_50k`
`timeline`	`radio`	No	One of: `now`, `quarter`, `later`
`details`	`textarea`	Yes	20 to 8,000 characters

Field definition

{
  "version": 1,
  "title": "Quote request",
  "fields": [
    {
      "id": "name",
      "type": "text",
      "label": "Name",
      "required": true,
      "validation": {
        "max_length": 120
      }
    },
    {
      "id": "email",
      "type": "email",
      "label": "Work email",
      "required": true
    },
    {
      "id": "company",
      "type": "text",
      "label": "Company",
      "validation": {
        "max_length": 200
      }
    },
    {
      "id": "phone",
      "type": "phone",
      "label": "Phone"
    },
    {
      "id": "service",
      "type": "select",
      "label": "What do you need?",
      "required": true,
      "options": [
        {
          "value": "design",
          "label": "Design"
        },
        {
          "value": "development",
          "label": "Development"
        },
        {
          "value": "consulting",
          "label": "Consulting"
        },
        {
          "value": "other",
          "label": "Something else"
        }
      ]
    },
    {
      "id": "budget",
      "type": "select",
      "label": "Budget",
      "options": [
        {
          "value": "under_5k",
          "label": "Under $5,000"
        },
        {
          "value": "5k_20k",
          "label": "$5,000 to $20,000"
        },
        {
          "value": "20k_50k",
          "label": "$20,000 to $50,000"
        },
        {
          "value": "over_50k",
          "label": "Over $50,000"
        }
      ]
    },
    {
      "id": "timeline",
      "type": "radio",
      "label": "When do you want to start?",
      "options": [
        {
          "value": "now",
          "label": "As soon as possible"
        },
        {
          "value": "quarter",
          "label": "In the next three months"
        },
        {
          "value": "later",
          "label": "Later"
        }
      ]
    },
    {
      "id": "details",
      "type": "textarea",
      "label": "Project details",
      "required": true,
      "rows": 6,
      "help_text": "What you're building, who it's for and anything we should know.",
      "validation": {
        "min_length": 20,
        "max_length": 8000
      }
    }
  ],
  "settings": {
    "submit_label": "Request a quote",
    "success_message": "Thanks. We'll send a quote within two working days."
  }
}

Next.js server action

To keep the form working without JavaScript in a Next.js app, post from a server action with a secret key. Create the key under API keys with the submissions:write scope and keep it out of the browser.

.env.local

IKIFORM_SECRET_KEY=ik_sk_your_secret_key

app/quote-request/actions.ts

"use server";

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

export async function sendQuoteRequestForm(_previous: QuoteRequestFormState, formData: FormData): Promise<QuoteRequestFormState> {
  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. We'll send a quote within two working days." };
  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 };
}

app/quote-request/form.tsx

"use client";

import { useActionState } from "react";
import { type QuoteRequestFormState, sendQuoteRequestForm } from "./actions";

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

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

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

  return (
    <form action={action}>
      <label htmlFor="name">Name</label>
      <input id="name" name="name" type="text" maxLength={120} required defaultValue={state.values?.name?.[0]} />
      {state.fields?.name ? <p>{state.fields.name[0]}</p> : null}
      <label htmlFor="email">Work 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="company">Company</label>
      <input id="company" name="company" type="text" maxLength={200} defaultValue={state.values?.company?.[0]} />
      {state.fields?.company ? <p>{state.fields.company[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="service">What do you need?</label>
      <select id="service" name="service" required defaultValue={state.values?.service?.[0]}>
        <option value="">Choose one</option>
        <option value="design">Design</option>
        <option value="development">Development</option>
        <option value="consulting">Consulting</option>
        <option value="other">Something else</option>
      </select>
      {state.fields?.service ? <p>{state.fields.service[0]}</p> : null}
      <label htmlFor="budget">Budget</label>
      <select id="budget" name="budget" defaultValue={state.values?.budget?.[0]}>
        <option value="">Choose one</option>
        <option value="under_5k">Under $5,000</option>
        <option value="5k_20k">$5,000 to $20,000</option>
        <option value="20k_50k">$20,000 to $50,000</option>
        <option value="over_50k">Over $50,000</option>
      </select>
      {state.fields?.budget ? <p>{state.fields.budget[0]}</p> : null}
      <fieldset>
        <legend>When do you want to start?</legend>
        <label><input type="radio" name="timeline" value="now" defaultChecked={state.values?.timeline?.includes("now")} /> As soon as possible</label>
        <label><input type="radio" name="timeline" value="quarter" defaultChecked={state.values?.timeline?.includes("quarter")} /> In the next three months</label>
        <label><input type="radio" name="timeline" value="later" defaultChecked={state.values?.timeline?.includes("later")} /> Later</label>
      </fieldset>
      {state.fields?.timeline ? <p>{state.fields.timeline[0]}</p> : null}
      <label htmlFor="details">Project details</label>
      <textarea id="details" name="details" rows={6} minLength={20} maxLength={8000} required aria-describedby="details-help" defaultValue={state.values?.details?.[0]} />
      <p id="details-help">What you're building, who it's for and anything we should know.</p>
      {state.fields?.details ? <p>{state.fields.details[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" : "Request a quote"}</button>
    </form>
  );
}

A server action posts from your server's IP, so the per-visitor rate limit counts every visitor together. Use the Relaxed or Custom rate limit for forms you send through a server.

Set it up

Create a form in the dashboard and copy its id.
Paste the field definition on the Fields tab.
Add your site under Allowed domains, plus localhost while you develop.
Set the rate limit to Strict, 2 every 10 minutes per visitor if visitors post from the browser. Leads come one at a time. Anything faster is a double click or a script. With the server action, every post comes from your server's IP, so choose Relaxed or Custom instead.
Paste the code, send a test and check it arrives in the dashboard.

Fixed choices make leads sortable

service, budget and timeline only accept the listed values. A post with any other value is refused with 422 validation_failed, so the data that reaches your CRM or spreadsheet is always one of a few known strings. Change the labels freely; keep the values stable once automations depend on them.

Field	Stored as	Example
`service`	One option value	`development`
`budget`	One option value, or left out	`5k_20k`
`timeline`	One option value, or left out	`quarter`
`phone`	The number as typed, 6 to 15 digits	`+1 415 555 0123`

Set e164: true on the phone field if your CRM wants international format; +1 (415) 555-0123 is then stored as +14155550123, and numbers without a country code are refused.

Answer fast

Quote requests go cold quickly. Send them to a chat channel the team watches, and to the CRM or sheet you track deals in. Every webhook delivery is signed and retried for about 3 days if your endpoint is down, so a lead is never lost to a failed request.

Reply-to works here too: the email field is email, so replying to the notification email writes to the lead. Label it however you like; only the id matters.

Where to send it

Every submission can go to a signed webhook. These guides cover the tools that suit this form, with the relay code:

Questions

Point your form at Ikiform

Get started Read the docs