Build Your First Lead-Capture Form in Captivar
Use the Captivar form builder to design lead-capture forms with custom fields, validation, file uploads, and notification routing — then embed anywhere.
A form is the simplest way to convert a visitor. They want what you’re offering, they don’t want to chat, they fill it out, you get the lead. Captivar’s form builder is designed to make that path as short as possible — minimal fields, instant notifications, and a Kanban pipeline waiting on the other side.
What a Captivar form is, and isn’t
A Captivar form is a hosted form connected to your lead pipeline. The visitor fills it out, the submission gets stored, the agency gets notified, and a lead card appears in the pipeline ready to work.
A Captivar form is not a replacement for the AI receptionist. The two solve different problems. The receptionist is for visitors with questions; forms are for visitors with intent. Most client sites use both — chat in the corner for browsers, a form on the contact page for closers.
Forms can also be filled out by the AI receptionist itself during a conversation. When the receptionist captures a lead via chat, it’s effectively submitting the form on the visitor’s behalf. So designing a good form also designs a good chat capture.
Where forms live in the dashboard
In the sidebar, click Forms. The page lists every form across every site, with filters for the current site, status, and submission count. The first time you open it, the list is empty.
Click Create form in the top-right to start building.
Building the form
The form builder has three areas: a field list on the left, a live preview in the middle, and field settings on the right when a field is selected.
Naming and scope
Give the form a name. The name is for your reference inside the dashboard — visitors never see it. Use something descriptive: “Free consultation request” or “Estimate inquiry — Brightside HVAC” not “Form 1.”
Pick the site. Every form belongs to one site. The form’s submissions land on that site’s pipeline. If the wrong site is selected, change it before adding fields — switching sites later clears the field configuration.
Adding fields
Click Add field. A panel opens listing every field type. Pick the one that matches what you need to capture.
The field types available:
- Text — single line. For names, company names, short free text.
- Email — text with email validation built in. Use exactly once.
- Phone — text with phone-format hints. Validates loosely on submit.
- Long text — textarea. For “tell us about your project” type questions.
- Dropdown — single-select from a list of options you provide.
- Multi-select — checkbox group, any number can be picked.
- Single-select — radio group, exactly one picked.
- Date — date picker. For appointment requests, event dates.
- Number — numeric input.
- File upload — single or multiple files. 10 MB per file, 25 MB total per submission.
- Hidden — invisible field. Used for tracking UTM source, referrer, page URL, etc.
For each field, set:
- Label — what the visitor sees above the input. Keep it short and direct.
- Placeholder — gray hint text inside the input. Optional but helpful.
- Required — whether the visitor must fill it in to submit.
- Validation — for text fields, an optional regex pattern. For numbers, min/max.
The three special flags
For text-like fields, you’ll see three checkboxes near the bottom of the field settings:
- This is an email field
- This is a phone field
- This is a name field
These flags tell Captivar which fields carry the visitor’s contact info. Captivar uses them to extract leads automatically — when a submission has at least an email or phone and a name, it becomes a lead pipeline entry without any manual step.
Always flag these three fields when they exist. A form without flagged name and email fields will still submit and store data, but it won’t auto-populate the lead pipeline.
What happens after submit
Two things happen when a visitor submits the form. You configure each.
Success behavior
The Success behavior panel sets what the visitor sees immediately after they click submit. Two options:
- Show a message. The form is replaced by a thank-you message you write. Examples: “Thanks — we’ll be in touch within one business day.” or “Got it. Check your inbox for a confirmation.”
- Redirect to a URL. The visitor’s browser is sent to a URL you specify after submit. Useful for thank-you pages with conversion tracking or upsell content.
Pick whichever matches the client’s marketing flow. The default — show a message — works for most cases.
Notification email
The Notify on submission setting controls who gets emailed when a form is filled out.
- Recipient. Defaults to the site’s
notify_email(set when you added the site). Override here if a specific form should go to a different address. Common case: a contact-us form goes to the main inbox, an “Urgent project” form routes to the owner directly. - Include attachments. If the form has file uploads, this toggle decides whether the actual files are attached to the email or just listed as links. Attachments are convenient; links are safer (some email systems strip attachments).
The notification email is sent within seconds of submission and includes every field the visitor filled in, formatted as a clean list.
Embedding the form
Once the form is saved, you have three ways to put it on the client’s site.
iframe embed
The simplest option. Paste an iframe tag wherever you want the form to appear:
<iframe
src="https://app.captivar.com/forms/FORM_ID"
width="100%"
height="600"
frameborder="0"
scrolling="auto"
></iframe>
The form ID is shown at the top of the form’s edit page. Iframe embeds work on any website with raw HTML access. The form is fully styled and responsive — no extra CSS needed.
Drawbacks: iframes do not adjust their height automatically when the form expands (file uploads, multi-step forms). Set height to a value that fits the form fully, or accept some empty space.
Link to the hosted form
Every form has a public URL: https://app.captivar.com/forms/FORM_ID. You can link to it from anywhere — a button on the website, an email, a social post, a QR code.
This is the cleanest option when the form needs to live on its own page. The hosted form page is fully responsive and styled to match Captivar’s neutral default — or your custom branding, if you’ve configured it.
JavaScript embed
For sites where you want the form inline but iframe height issues are a problem, paste this script tag where the form should appear:
<div data-captivar-form="FORM_ID"></div>
<script async src="https://app.captivar.com/forms/embed.js"></script>
The script renders the form directly into the page, resizing automatically. Requires JavaScript on the client’s site — if their CSP blocks third-party scripts, use the iframe option instead.
File uploads
Forms with file upload fields receive submissions with attached files. Files are stored securely in Captivar’s storage and accessed via short-lived download URLs (10 minute expiry, force-download to prevent inline rendering of risky file types).
Default extension allowlist: pdf, doc, docx, txt, rtf, jpg, jpeg, png, gif, webp, heic, mp3, mp4, mov, wav, csv, xls, xlsx.
If a file type isn’t on the allowlist, the visitor sees an error when they try to upload it. To add a new file type to the allowlist, email [email protected] with the type and your use case.
Per-file size limit: 10 MB. Per-submission total: 25 MB. Both are enforced server-side.
Tracking which page the form came from
A common pattern: you want to know which page a visitor was on when they submitted the form. Three steps:
Add a hidden field to the form. Name it
source_pageor similar.Populate the hidden field with the page URL. Wherever the form is embedded, add a small script that sets the hidden field’s value to
window.location.hrefbefore the visitor submits.Read the field in submissions. Every submission stores the value. It shows up in the form notification email and in the lead pipeline card.
For iframe embeds, you can also append the source as a URL parameter:
<iframe src="https://app.captivar.com/forms/FORM_ID?source=services-page"></iframe>
Captivar reads URL parameters that match hidden field names and pre-populates them automatically. No script needed.
Reading submissions
Submissions land in two places.
The Forms list. Each form shows a submission count. Click the form to see every submission, sortable by date, with full field values and any attached files visible inline.
The Lead pipeline. If the form has flagged name + email or name + phone fields, every submission also becomes a lead pipeline card with status new. Drag the card across statuses as you work through it — new → contacted → qualified → closed_won or closed_lost.
The two views are linked — clicking the lead card opens the submission detail, and vice versa.
What happens next
The form is built, embedded, and capturing leads. Submissions are flowing into the dashboard and notifications are reaching the right inbox.
The third major conversion channel — alongside chat and forms — is direct booking. For businesses that take appointments, letting the visitor pick a slot themselves removes the back-and-forth entirely. The next article walks through setting up the calendar that powers it.
Configure Your AI Receptionist — Persona, Greeting, and Tools
Walk through every setting on the AI receptionist: greeting, persona, tone, business hours, escalation, and which tools the receptionist can use.
Set Up a Booking Calendar for Your Client Site
Configure working hours, slot durations, time zones, and notice windows so visitors can book appointments directly from the website without back-and-forth.