Everything you need to ship a form.

Cono is a hosted form and quotation platform. You design multi-step forms in the dashboard, then embed them anywhere with a single script tag. Every form is rendered inside an isolated Shadow DOM container so the host site's CSS cannot override the layout, spacing, or animations.

• Live pricing math — checkbox and dropdown selections update a running total instantly.
• Booking flows — calendar dates, party size, time-slot routing.
• Multi-step inquiries — one question at a time, low drop-off.
• Transactional email + reply-to routing to the owner's inbox.

1. Create an account.
2. Pick a template or start blank from the dashboard.
3. Customize the questions, theme, and shape in the editor.
4. Click Publish, copy the embed snippet, paste it into your site.

Landed here from a search result? You can design a form as a guest from the template directory — you'll be prompted to create an account only when you save or publish. Every account starts on a 3-day free trial with no credit card.

Every new account gets a 3-day trial with full access to the platform — no card required. During the trial your published forms are live on your customers' sites and receive real submissions.

When the trial ends and no plan is active, embedded forms enter a paused state: the mount points remain on your customer's site, but the form container stops rendering and new submissions are rejected. The moment you subscribe, they resume — no re-embedding, no re-publishing.

Plans are billed monthly. Upgrade or downgrade any time from Settings → Billing. Cancellation stops future charges immediately; forms stay live through the end of the paid period.

The universal snippet works everywhere. Drop it once at the bottom of the page, then place the mount div anywhere you want the form to appear:

<script async src="https://your-formengine-host/embed.js"></script>
<div data-formengine="your-form-slug"></div>

The script scans the page for any element with data-formengine="slug", attaches a Shadow DOM, and mounts the live form inside a responsive iframe that auto-resizes to its content.

Multiple forms on one page? Add as many mount divs as you like with different slugs — the loader picks up all of them and any that are inserted later by dynamic content.

In the Webflow Designer: Add panel → Components → Embed. Drag it into the section where you want the form. Paste the universal snippet. Save & publish. The form auto-resizes to the parent column width.

In Framer: Insert → Embed → HTML. Paste the universal snippet. Framer renders the mount div inline. Because we use Shadow DOM + iframe, Framer's global page styles never touch your form.

Edit the page → add a Custom HTML block → paste the universal snippet. Works in Gutenberg, Elementor (HTML widget), Divi (Code module), Bricks (Code element), and Oxygen. No plugin required. WPBakery: use the Raw HTML element.

Edit page → Add block → Code (Content type: HTML, Display source: off). Paste the universal snippet. Squarespace's AJAX navigation is handled automatically — the loader re-scans on route changes.

Add → Embed & Social → Embed HTML → "Enter Code". Paste the universal snippet. Stretch the widget to the section width and set height to at least 640px — the iframe will auto-resize taller as needed.

Online Store → Themes → Customize → Add section → Custom Liquid. Paste the universal snippet. For product pages, add it inside the product template; for standalone pages, use a Page with the "contact" template and add the Custom Liquid section.

If a host platform blocks arbitrary <script> tags (some Wix/Squarespace CSPs, government portals, restricted CMS installs), use the plain-iframe snippet from the editor:

<iframe src="https://your-formengine-host/f/your-slug?embedded=1"
  style="width:100%;border:0;min-height:640px" loading="lazy"></iframe>

You lose auto-resize unless the parent listens for our postMessage("resize") events, but you keep every other feature.

For React apps, drop the mount div into any component and load the script once in useEffect:

useEffect(() => {
  const s = document.createElement('script');
  s.src = 'https://your-formengine-host/embed.js';
  s.async = true;
  document.body.appendChild(s);
}, []);
// then in JSX:
<div data-formengine="your-slug" />

Next.js App Router: use next/script with strategy="afterInteractive". TanStack Start: put the script tag in the route's head().scripts.

If your site sends a strict CSP header, allow the loader and iframe:

Content-Security-Policy:
  script-src 'self' https://your-formengine-host;
  frame-src  https://your-formengine-host;
  connect-src 'self' https://your-formengine-host;

No inline scripts or eval — our loader is a single external file.

Every embed is mounted inside a ShadowRoot plus an iframe. This gives you two layers of isolation from the host site's CSS: the shadow boundary prevents descendant selectors from leaking in, and the iframe prevents everything else — CSS resets, * { box-sizing } overrides, aggressive typography rules — from reaching the form.

The outer wrapper carries all: initial so inherited font, color, and box-model values from the host are neutralized before our styles apply.

Every form has a shape (rounded, sharp, pill, ticket, blob, notched, arch, cut-corner) and a theme (12 presets: midnight, editorial, brutalist, terminal, noir-gold, sunset, and more). Change either in the editor's Style panel — the preview updates instantly.

Any question can be shown or hidden based on an earlier answer. Open the question, click Add condition, pick the source question and the value that should reveal it. Nested conditions and multi-value matches are supported on Growth and Scale plans.

Quote-type forms carry a base price plus per-option deltas. Options may add a flat price, and counter fields multiply a perUnit value. The estimate rolls in real time as answers change — no page reload, no submit-and-wait.

Formula: total = base + Σ(option.price × selected) + Σ(counter × perUnit). Rounding is applied at display time (nearest dollar by default; toggle to two decimals in Style → Pricing).

Booking-type forms include a calendar step, party size, and a time-slot picker. Slots are configured per form. Deposit / hold logic is a placeholder — connect a Stripe or Paddle account in Settings to charge on submission.

Blackout dates (holidays, private events) are set under Bookings → Availability. Time zones follow the visitor's browser by default; force a fixed zone in Settings for restaurants and clinics with a single physical location.

Every submission triggers a transactional confirmation from Cono's high-reputation server pool. Set your business email in Settings → Reply-to. When a lead hits reply, the conversation lands in your inbox natively — you're never stuck copy-pasting from the dashboard.

Emails include: (1) a confirmation to the lead with their answer summary and total (for quotes), (2) a notification to you with the same details, and (3) optional CC recipients for team inboxes.

Send confirmations from quotes@yourdomain.com instead of our shared pool. Add a domain in Settings → Domains, verify DKIM/SPF/DMARC via the DNS records we generate, and set it as the default sender.

Send every new submission to a URL you own. Payload: form id, submission id, contact fields, and the full answer graph. Retries with exponential backoff for 24 hours on non-2xx responses.

POST https://your-endpoint
Content-Type: application/json
X-Cono-Signature: sha256=<hex>

{
  "form_id": "…",
  "submission_id": "…",
  "created_at": "2026-07-09T12:34:56Z",
  "total": 240,
  "contact": { "name": "…", "email": "…", "phone": null },
  "answers": { … }
}

Verify the signature with your webhook secret (HMAC-SHA256 over the raw body) to prove the request came from Cono.

List and export submissions programmatically. Base URL: https://your-formengine-host/api. Auth: Bearer token from Settings → API keys.

GET /api/forms/{form_id}/submissions?since=2026-07-01&limit=100
Authorization: Bearer sk_live_…

Every embed emits postMessage events you can forward to GA4, PostHog, or Segment:

• form_view — mount rendered
• step_advance — visitor moved to the next step
• form_submit — submission accepted
• quote_change — live total updated (quote forms)

Submissions are stored encrypted at rest. TLS 1.2+ in transit. Row-level security ensures no other account can read your forms or leads. Optional field-level PII redaction in exports (Scale).

Add a consent step to any form (Editor → Add step → Consent). Store the exact wording and timestamp with every submission. Data-subject requests: export or delete a lead from the Leads table with a single click.

Forms ship with proper label/aria wiring, keyboard navigation, visible focus rings, and 4.5:1 minimum contrast on all themes. Screen-reader announcements fire on step change and submission success.

The loader is under 3 KB gzipped. The iframe payload is lazy-loaded and code-split by form kind. First interactive render averages under 400 ms on a mid-tier mobile connection. Cache-Control on the loader is 5 minutes to allow fast rollout without stale scripts pinning users.

• Starter — 3 active forms, 150 leads / month, standard templates, "Powered by" badge required.
• Growth — 10 active forms, 1,000 leads / month, booking + agency templates, webhooks, no badge.
• Scale — unlimited forms & leads, priority queue, historical analytics, multi-user, custom domain.

Export your existing form as JSON or CSV. In Settings → Import, paste it in — we'll map questions, options, and validation rules automatically. Redirects: keep your old URL, add a 302 to your new /f/<slug>, and traffic keeps flowing.

Because the form lives in an iframe, its content is not indexed on your host page — which is usually what you want (the form is transactional, not editorial). To rank for template queries like "framer roofing quote form", link to our public template pages under /templates; each is server-rendered with unique metadata and JSON-LD.

Every submission lands in the form's Leads inbox. Filter by status (New / Contacted / Archived), click to view the full answer trail, copy contact info in one click, or export to CSV.

• Form isn't showing → confirm the form is published and the slug on the mount div matches exactly.
• Form was showing, now it's blank → your trial may have ended. Upgrade a plan; forms resume immediately.
• Form looks squished → the parent container is narrower than 320px. Give it room.
• CSS looks off → you're not embedded (fallback iframe blocked by CSP). Use the plain iframe snippet from the editor.
• Height doesn't grow → the host's CSP is blocking postMessage. Set the iframe height manually or relax frame-ancestors.
• Duplicate mounts appear on SPA route changes → the loader ships with de-dupe (checks data-formengine-mounted); confirm you're on the latest loader URL.

Email contact@cono.click. Scale plans include a shared Slack channel and same-business-day response SLA.