Create Forms with Conditional Logic in Framer

Build a form that reacts to its answers with the Conditional logic block, then embed it on a Framer site where logic keeps working inside the frame.

A form in Framer's own builder is static: every visitor sees every question. Often you want something else. Show a follow-up only when somebody answers "Yes". Skip a whole page for people it does not apply to. Make an email address required only for those who asked to be contacted. That is conditional logic, and Tinyform gives you a block for it that behaves exactly the same once the form is embedded in Framer.

What logic is used for

A few things a rule can do:

Send a visitor to a different Thank you page depending on what they answered
Add up a score in a quiz
Jump past pages that do not concern the respondent
Reveal or hide questions as the answers come in

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 that holds 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 decides 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, so a question appears the moment its condition is met. Only Jump to page waits for the button press.

Jump to page

Jump to page skips pages that do not apply, or sends a respondent to a different Thank you page. In the example below, anyone under 18 is taken straight to page 3 instead of continuing through the rest of the form.

Rename pages

In a form with many pages, a named page is easier to pick from the Select page list than "Page 7". Click the page label on a divider to give it a name.

Calculate a value

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

Make an answer required

Require answer turns a question required only when the condition holds. If somebody ticks "Send me the newsletter", the email question becomes mandatory; for everyone else it stays optional.

Show or hide blocks

A rule can show or hide one block or many, and individual answer options too. In the example below, an extra text field appears only when the respondent picks "Other".

Start by creating 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, then hide them from the menu.

Finally insert a Conditional logic block, set the condition, and choose Show blocks or Hide blocks. The target 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 go on. Pair it with a text block that explains 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 pick between several destinations. Redirect on completion explains the mentions.

Embed the form in Framer

Publish and copy the snippet
Press Publish, open the Share tab, choose Embed Form and press Get the code on the Standard embed.
Paste it into Framer
Insert an Embed component, set it to HTML and paste the snippet. Or press Copy embed link and give the component the URL instead.
Publish the site
Publish in Framer. The rules run inside the frame just as they do on the form's own page; nothing about logic changes because the form is embedded.