Connect your website form to a CRM. Keep the design. Lose the chasing.

1. “Can I keep the form already on my website?”

Usually, yes—if the form can send its answers somewhere you control. Start with its settings, not a redesign brief. Your carefully chosen button can keep its little moment.

Look for a submission address, webhook, integration or notification-email setting. A webhook lets one tool send a new entry to another automatically. You may also see this called web-to-lead: turning a website submission into a CRM enquiry.

For WordPress with Contact Form 7, our separate tutorial uses Kibi Forms’ existing-form connection. For Framer, a native form’s webhook is a separate setup; the Kibi Forms Marketplace design plugin does not itself connect your CRM.

2. Give this form its own address in Kibi

Open Sources → Add a source → Connect a form you already have. Choose the tool and give the source a name the team will recognise: “Kitchen quote page” beats “Web thing final 2”.

Kibi shows a submission address for that source. Copy it into the form’s supported destination setting. If you are sending JSON from another app, choose the webhook route and follow its instructions instead.

The address uses api.kibihq.com, not the marketing website. Use the whole address Kibi supplies. It identifies this source; you do not need to put your account login or a workspace API token into the form.

Keep the existing connection until you have a safe test ready. If the form already serves paying campaigns, work on a duplicate or staging page first. Then switch one delivery route deliberately.

3. “How do I connect an HTML form to a CRM?”

Set the form’s action to its Kibi source address and its method to POST. Each answer needs a name, such as fullname, mobile, email or notes. A pretty label alone does not send a field name.

This example collects a name, phone number, optional email and a project question. Replace the source placeholder and privacy link with your own. Keep your site’s styling and add any consent your own form needs.

Ordinary HTML sends these text answers as form-encoded data, which Kibi accepts. This is a text-field example; it does not demonstrate file uploads.

A direct browser submission can show Kibi’s JSON receipt rather than your intended thank-you page. For a friendlier finish, use the downloadable starter’s small script: it stays on the page and shows success only after Kibi confirms the send.

<form id="enquiry-form" method="post"
  action="https://api.kibihq.com/in/REPLACE_WITH_YOUR_SOURCE_SLUG">
  <label>Your name
    <input name="fullname" autocomplete="name" required>
  </label>
  <label>Phone
    <input name="mobile" type="tel" autocomplete="tel" required>
  </label>
  <label>Email (optional)
    <input name="email" type="email" autocomplete="email">
  </label>
  <label>What would you like help with?
    <textarea name="notes" required></textarea>
  </label>
  <p>Read <a href="/privacy/">our privacy notice</a>.</p>
  <button type="submit">Ask for a callback</button>
  <p id="form-result" role="status" aria-live="polite"></p>
</form>

4. “My website builder has a webhook. What goes in it?”

Use the Kibi source address as the destination and POST as the method. When the tool asks for a data format, use JSON. The exact field names come from your form; they do not have to match the CRM yet.

Here is the same enquiry as a webhook payload. It is the answers that matter, not whether your builder calls the person fullname, customer_name or something impressively unhelpful like field_7.

If your builder signs deliveries, follow the signing instructions for that connection. If it wraps answers inside a larger object, send a real-shaped sample and review what Kibi receives before assuming the three-line example matches it.

Already using Make or Zapier? Their supported HTTP or webhook action can send the same entry. An extra automation service is a route, not a requirement for the plain HTML example.

{
  "fullname": "Sam Example",
  "mobile": "+1 202 555 0108",
  "email": "sam@example.com",
  "notes": "Could we book a call about a kitchen renovation?"
}

5. Match the answers. Keep the actual question.

Send one fictional entry so Kibi can see the fields. In the source wizard, review the suggested matches: fullname becomes Name, mobile becomes Phone, email becomes Email, and notes becomes Message. Correct anything the suggestion misunderstood.

Keep the question someone took time to write. “Kitchen renovation, hoping to start in June” tells the caller far more than “Website lead”. Save useful extra answers such as service or city in the appropriate fields.

Use a test name and example.com address, not a customer’s details. Kibi’s wizard sample is marked as a test; it helps with setup and stays out of Today and the numbers.

Then finish setup and make a separate normal fictional submission from the published form. That checks the everyday path. A wizard sample arriving is useful evidence, but it is not the whole handover.

6. The enquiry arrived. Who is calling?

Sam asks about a kitchen renovation. The entry reaches Kibi, with Sam’s question intact. Now choose the person handling it and plan a callback with a time and a reason.

In our example, Ravi’s next call is tomorrow at 10am: ask about the kitchen size, preferred finish and timing. That is a plan a teammate can understand without a detective hat.

A saved enquiry does not automatically mean someone has booked a call. Your team chooses and saves the follow-up. Today makes that next conversation easier to find; the source’s assignment settings decide who receives new enquiries.

When Sam is ready for an offer, create a quote from the enquiry. The question, conversation and commercial next step stay connected. You get to spend less of the call asking, “Sorry, which form was this?”

7. “My form only sends emails. Can I still use it?”

Yes, an enquiry email can be another route. Add the Kibi forwarding inbox as a notification recipient, or forward those messages from your email account using the relevant setup guide.

Set Reply-To to the visitor’s email and use one clearly labelled answer per line. A message that says Name: Sam, Phone: +1 202 555 0108 and Request: Kitchen renovation is easier to match than a decorative email full of unrelated text.

Test the actual notification, including its Reply-To and answers. If you later add a webhook, check whether both routes are now sending the same enquiry. Two notifications are not twice the love.

8. The five-check test before real enquiries arrive

Test from a phone on the published page. A builder preview can behave differently from the form your customers actually use. Send one normal fictional request after you finish the wizard.

Check five things: the visitor sees confirmation; the enquiry is saved; the answers match; the right person handles it; and a callback can be saved and found. Test a failed send on your development page too.

The downloadable starter disables its button while a request is in progress, checks the reply and keeps the answers if delivery cannot be confirmed. It does not silently keep retrying behind the visitor’s back.

Take the starter. Leave the mystery behind.

Download the plain HTML starter if you edit your own site, or give the checklist to the person connecting your builder. The starter includes the form, labels and on-page success or error message; the source address is deliberately a placeholder.

Replace the address, business wording and privacy link, then test it on your development site. It sends text fields only. No tracking code, visitor profiling or private account credentials are added.

Keep the enquiry workflow simple for the first trial: one form, one source, one responsible person and one useful callback. You can make the form more glamorous later. Reliable is rather attractive already.

A few questions before you connect

References and how to use this guide

The Kibi steps and examples were checked against the current source wizard, field-matching flow and intake contract on 5 November 2026. The kitchen enquiry is fictional. The diagrams are teaching examples, not screenshots or customer evidence.

The HTML reference explains submission mechanics. Your builder’s own documentation controls its webhook settings, signing and plan availability. Use the source instructions Kibi shows for the connection you choose.