Your first website form

A website form is one you build inside Formwork and embed on a site you control. This page walks the whole path in order: create it, build it, decide where its leads go, publish it, put it on a page, and check that a real lead arrived.

Budget about fifteen minutes the first time.

Step 1 - Start a new capture

Go to Forms. This page is your inventory: every website form, Facebook form, TikTok form and inbound endpoint you have, with its status, what it routes to, and how many leads it has taken.

Press New capture. The first screen asks what kind of lead source this is.

Choose Website form.

Step 2 - Name it and pick a starting point

Three things to fill in:

Title is for you. It appears in the Forms list and nowhere a visitor can see.

Start from decides whether you begin with an empty canvas or a working form you can edit down. The templates are real, complete forms - a solar claim review, a debt relief quiz, a form that demonstrates conditional logic, and a plain single-step contact form. Starting from one and deleting what you do not need is usually faster than starting blank.

Form ID is the public identifier. It ends up in your embed snippet and in your page source, so it should read like a URL: lowercase letters, numbers and hyphens. Leave it alone and Formwork derives one from the title.

Step 3 - Decide where the leads go

Pick a routing setup and this form's leads will run through its routing rules the moment they arrive. Pick nothing and the form still works - leads are captured, normalised and stored - they are simply never offered to a destination.

You can attach or change the routing setup later from the form's settings page, so a blank here is a decision deferred, not a mistake.

If the routing setup needs a field your form does not collect, Formwork says so now rather than at three in the morning when a destination starts rejecting everything.

Step 4 - Open the builder

The last screen confirms what was made and hands you a link into the builder. That is where the next section starts.

Step 5 - Build the form

The builder is three columns and a bar.

The bar across the top carries the form's title, its status, its version, the save indicator, undo and redo, and the buttons that matter: Validate, Embed, and Publish.

The left rail has three tabs. Steps is the running order of your form - drag to reorder, duplicate, delete. Layers is the same thing as a tree, useful once a step has a dozen elements. Add is the palette you drag fields and content blocks from.

The middle is the form itself, rendered by the exact same code that will run on your customer's website. It is not an approximation. Click any element to select it.

The right panel is the inspector, and it changes to match whatever you selected - a field, a content block, the buttons, a step, or the whole form.

Adding questions

Open the Add tab and drag a field onto the canvas, or click it to append it to the current step. Then select it and work through the inspector:

The two settings that matter more than the others:

• Name is the key the answer is stored under. It must be unique across the entire form.
• Canonical field is how this question maps into Formwork's shared vocabulary. Set the phone question to phone and every preset, destination template and event that refers to {{phone}} will find it.

Adding steps and conditional logic

Multi-step forms are what make a form a funnel. Add steps in the Steps rail, then decide how a visitor moves between them.

Formwork resolves the next step in a fixed order of precedence, and the first thing that applies wins:

1. The answer they picked. An individual option on a choice field can send them to a specific step, or disqualify them outright. This beats everything else.
2. The step's rules. Select a step and open If / then in the inspector to build rules like if state is not one of TX, FL, AZ → disqualify. Rules are evaluated in order and the first match wins. A rule can read any answer from any earlier step.
3. Whatever comes next in the list. If nothing above applied, the visitor goes to the following step.

Rule actions are jump to a named step, skip a step, disqualify the visitor with a message, or submit immediately.

Styling it

The left rail's Whole form control opens Theme, Setup, Scripts and Info.

Theme covers colours, fonts, corner radius, the progress bar, and - the settings that most change how a form performs - how choices are presented. Card options make the entire panel tappable with a drawn tick instead of a small native radio button; on a phone that is often the difference between a funnel that converts and one that does not. List remains the default and is the better choice for long lists and for keyboard users.

Setup holds the behavioural settings: whether visitors may go back, the success message or redirect URL, the disqualification message, and two anti-spam measures - a honeypot field and a minimum completion time, both of which silently drop obvious bots.

Step 6 - Validate and publish

Press Validate. Formwork checks the form the way it will be checked at publish time and lists anything wrong, split into errors and warnings.

Errors block publishing. Warnings do not.

When it is clean, press Publish. Three things happen: an immutable snapshot of the form is stored as a new version, that version becomes what the public API serves, and the form's source is switched on so it can accept leads.

Step 7 - Put it on your site

Press Embed in the top bar and copy the snippet.

<div id="your-form-id"></div>
<script src="https://your-formwork-domain.com/embed.js" data-form-id="your-form-id"></script>

Paste it wherever the form should appear - a WordPress page or post in a Custom HTML block, a raw HTML template, anything that lets you put a script tag on a page.

A few things worth knowing about the embed:

• It has no dependencies. No jQuery, no framework, nothing to install.
• It renders inside a shadow root, so your site's CSS cannot leak in and break the form, and the form's CSS cannot leak out and break your site.
• Several forms can share one page. Each one is keyed by its own Form ID.
• The <div> is optional. If it is absent, the script creates its own container where it sits.

Restricting which sites may submit

By default a published form accepts submissions from any origin. To lock it to your own domains, open the form's settings page from the Forms list and add them under Who can submit this form.

Step 8 - Check that it worked

Fill the form in yourself, on the real page, and then open Logs.

The Lead logs tab has one row per lead. Click it to open everything Formwork knows about that lead: the normalised data beside the raw payload it arrived as, any mapping warnings, and the full waterfall - every destination called, in order, with the response each one gave and what Formwork concluded from it.

If the lead is there but the sale column says nothing was sold, the lead arrived fine and the routing is what needs attention - start with Destinations.

If the lead is not there at all, the submission never reached Formwork. Check that the form is published, that the source is enabled, and that the page's origin is allowed.

What to read next

• Fields - the canonical vocabulary your questions map into.
• Routing - the routing this form's leads run through.
• Presets - sending different leads to different destinations.
• Destinations - who receives the lead, and what counts as a yes.