Bringing logic to Webflow forms

Using formlylogic, you can now ask only the right questions and skip the rest, create quizzes and fun games all using Webflow and no-code!

What can

you build?

Add logic to Webflow forms

Create user friendly forms by asking relevant questions to the right users and give it a personal touch.

Contact, Support, Ecommerce checkout, Quote requests, Demo requests, Event signups, Digital product downloads, Appointment scheduling and Job applications

Create quizzes

With just a flowchart, a few radio buttons and a 2 attributes, you can create amazing quizzes on Webflow.

Perfect for product recommendation for e-commerce sites, pricing recommendation for SaaS companies/agencies or just plan fun Buzzfeed-like quiz games.

Choose your own adventure microsites

Create stunningly interactive microsites that use logic to allow users to navigate a site.

Perfect for creating mini-games like online escape rooms and interactive storytelling sites.

Add logic

with nocode

Setting up your logic flow

The basic setup is exactly the same as a basic formly form. Form element, Form steps and navigation button attributes are all the same.

To create logic flows, you will need to remember 2 things:

1. Formlylogic moves forwards. This means that at every decision question, the form will go to the next step and to the relevant element.

2. You need to connect every step to the next step with attributes. Even if that step has no logic, you will need to treat it as a step with 1 logic flow.

We know this is confusing, so here's a Loom video explaining how you need to setup logic.

Enable Logic on Formly

Form Block
Form
form-step-wrapper
form-step
form-step
form-step
form-step
back-button
next-button
submit-button
Success Message
Error Message
Question 1
Yes
No
Question 2 (if yes)
Question 2 (if no)
To enable logic on your Formly form, just add this attribute to your Form element. That's it, you have the full power of logic!
Custom <div> attributes
data-logic-extra
=
true
Custom <div> attributes
upgrade-to-formlypro
=
true
01

1 pointing attribute

One attribute is called data-go-to. This attribute essentially tells the code to go a certain element when clicked.

Think of this like a branch reaching out to the next step.
02
Custom <div> attributes
data-go-to
=
'give-branch-name'
Custom <div> attributes
upgrade-to-formlypro
=
true

1 destination attribute

The next attribute is called data-answer. Add this attribute to the div that you want the form to go-to.

Think of this like a block in a flowchart that a branch connects to.
03
Custom <div> attributes
data-answer
=
'give-branch-name'
Custom <div> attributes
upgrade-to-formlypro
=
true

Let's play a game!

Take the quiz now!
Question
1
Question
1
Question
1
Question
1
Question
1
Question
1
Question
1
Question
1
Question
1
Question
1
Question
1
Question
1
Question
1
Question
1
Question
1
Question
1
Question
1
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Pro features

for Pros

FormlyLogic

Using formlylogic, you can now ask only the right questions and skip the rest, create quizzes and fun games all using Webflow and no-code! Just 2 attributes and a bit of grit, you can turn any normal form into a logic form.

LOGIC

FormlyUI

Unstyled formly form components to easily create fully functional multistep forms in minutes without all the debugging work.

Pre-fill Inputs

Auto-populate form fields on a page by adding query strings to the page URL before sending it to your contacts. Fields will populate based on the query string added.

Customisable Disable States

Giving you complete control over the disabled states of the button. Just create a combo class to style your disabled state.

Add a '.disabled'  combo class to your buttons and style them as you wish.

Clickable Indicators

Quickly traverse through the forms by clicking on the progress indicators.

Skip Steps

Let users skip to any part of the form or directly to the last step. Useful for Logic forms.

Delete hidden inputs from form submission

You can choose if the inputs on branches the user did not select get submitted.
Please note that this  can affect automation integrations like Webflow Logic, Zapier or Make, as the form could receive different fields depending on the user branch.

NEW
Add this attribute to the Form element.
Custom <div> attributes
data-remove-unfilled
=
true

Enable Webflow IX

Add this attribute to the Form element.
Please note that this resets every interaction on the page. We only recommend using this if your form is on a dedicated page with no other Webflow IX other than just the scroll-into-view interaction
Custom <div> attributes
data-reinit
=
true

Form Memory

Automatically saves user input for forms as you type and restores it once the page is reloaded.

Add this attribute to the Form element.
Custom <div> attributes
data-memory
=
true

Call Code Dropdown

Add country calling code select inputs easily with no-code. Includes flag emoji, country shorthand and the ability to search for the call code directly form the input.

Country Dropdown

Add country select input easily with no-code. Includes flag emoji and ability to search through the select input.