Create forms with conditional logic in Webflow

Build a form whose questions appear, hide, become required or skip pages based on the answers, and embed it on a Webflow site with a Code Embed element.

Webflow's form builder is strong on layout and weak on behaviour. Every visitor sees the same fields in the same order, whatever they answer. The moment you want a follow-up question that appears only after a certain choice, or a section that disappears for people it does not concern, you need conditional logic, and Webflow's forms have none. Tinyform has a block for it, and a form built with rules embeds in Webflow through a Code Embed element like any other.

How to add logic to a form

In the editor at /forms/<id>/edit, type / on an empty line and pick Conditional logic. A rule has a When half, where you choose a field, a comparison such as Is or Is not, and a value, and a Then half holding the action. Any input block can be the subject of a condition. The row's menu offers Add condition, Remove, Duplicate and Wrap in group; several conditions combine with And or Or, under a switch that says whether all or any of them must match.

Actions

The Then dropdown lists six actions. Show, hide, require and calculate are re-evaluated as the visitor types; only Jump to page waits for the button press.

Jump to page

Jump to page skips pages that do not apply to a respondent, or sends them to a different Thank you page. In the example, anyone under 18 goes straight to page 3 rather than through the rest of the form.

Rename pages

In a form with many pages, a named page is easier to find in the Select page list than "Page 7". Click the page label on a divider to rename it.

Calculate a value

Calculate writes into a calculated field, so a score, a price or a lead grade can be worked out from the answers and shown to the respondent.

Make an answer required

Require answer makes a question mandatory only while the condition holds. Tick "Send me the newsletter" and the email question becomes required; leave it unticked and it stays optional.

Show or hide blocks

A rule can show or hide one block, several blocks, or single answer options. In the example an extra text field appears only when the respondent picks "Other".

First create the block that should stay out of sight. Here it is a short-answer question, inserted with / and Short answer. Then open the block's menu from the handle beside it and choose Hide. A hidden block stays in the editor but is absent from the published form until a rule shows it.

To hide several blocks at once, drag across them to select them all and hide them from the menu.

Then insert a Conditional logic block, set the condition, and choose Show blocks or Hide blocks. The picker lists every block on the form; clicking a question's title selects or deselects everything grouped under it.

Hide the button to disable completion

Hide button to disable completion removes the Next or Submit button while the condition holds, so a respondent who does not qualify cannot continue. Pair it with a text block that says why.

Redirect after completion

A form can send the respondent to another address once they submit: Redirect on completion, under General in the Settings tab. The address may mention answers, so a visitor's own input can become part of the URL. It is one address per form; a rule cannot choose between several destinations. Redirect on completion explains the mentions.

Embed the form in Webflow

Press Publish in the editor and open the Share tab. Embed Form opens the embed dialog, where the embed type is chosen at the top.

Leave the type on Standard, check the switches, and press Get the code.

Add a Code Embed element
In Webflow, drag a Code Embed element into your layout, or start a blank page for a full-width form.
Paste the snippet
Paste the code into the HTML embed editor that opens and press Save & Close.
Publish
Press Publish at the top right, choose the domains, and open the live page. The rules run inside the frame just as they do on the form's own page.

Send the submissions on

Every fill lands in the form's Submissions tab. A webhook posts each one to an address of your choosing as it is made, and the REST API reads them back. Direct connections to the tools below are on the way; the Integrations section shows what is live today.