Conditional logic in Webflow forms (without plugins or custom code)

Conditional logic in Webflow forms (without plugins or custom code) | Webflow Interactions Tutorial

Рет қаралды 19,048

Күн бұрын

How do you create conditional logic in Webflow forms without using any third-party plugins or integrations?
You can use Webflow Animations to display or hide certain question fields based on a selection that a website visitor made. And in this step-by-step tutorial, I show you how.
This is a Webflow Animation Tutorial for beginners.
TIMESTAMPS:
00:00 Intro
01:17 Example Form with Conditional Logic
02:10 Set up with Form in Webflow
03:36 Setting the state when the page loads
05:05 When the second options is selected
06:45 When the third option is selected
06:32 When the first option is reselected
LINKS:
www.connorfinlayson.com
form-with-options.webflow.io/
webflow.com/website/Create-co...

Пікірлер: 24

@JoshGonsalves 3 жыл бұрын

This is SO useful and I love how it uses no custom code :) great job once again Connor!

@kishparikh6484 3 жыл бұрын

Sickkkk! The other option with a text field is a huge unlock! I vaguely thought this was possible but cool to see it is!

@jeremiahbanda7534 2 жыл бұрын

This is very goooooooood, I was struggling with this for a while. Thanks. Very helpful.

@_Nikko_-cz8mi 9 ай бұрын

Great tutorial! Easy to understand and straight to the point!

@svmbrown Жыл бұрын

Thanks mate! We have moved away from form builders for client websites and this helped perfectly with a little customisation!

@jasinAmsterdam1976 3 жыл бұрын

Awesome, I am going to use this!!

@Londya 3 жыл бұрын

Thank you for creating this video. I knew this was possible without custom code with animations!

@connorfinlayson 3 жыл бұрын

You bet!

@hpkvelos 2 жыл бұрын

Super helpful - many thanks

@shneor5234 2 жыл бұрын

Thanks. Awosome. It won't support if you want fields to be "required" but only for the selected condition

@franciscot 2 жыл бұрын

Great video, thanks for sharing your knowledge. I also thought it was funny, it was confusing to me the way you say "Heading" and "Hidden" - but nothing some good old context can't help with. Again, great video.

@diegoamendoza734 2 жыл бұрын

Hi Connor, thank you so much for this video. I was thinking a lot about doing this without 3 party tools and you just solved it for me. Just one question, is there a way to make this required? I mean, that the user has to, at least, answer one of the inputs (questions) or is it already build that way?

@jayferrick4643 2 жыл бұрын

Do you have a video showing how to do it with div blocks like you talked about at the end of the video?

@femtechnology3055 2 жыл бұрын

Would it be possible to do this for multiple questions? Like a sort of branching logic? Select option A out of A, B, C and it gives you option A1, A2, A3, select option A1 and it gives you options A11, 12, A13 ... is that possible?

@frazermc 3 жыл бұрын

Great video mate! But why doesn’t Australia have ‘great choice’ too? 😎

@connorfinlayson 3 жыл бұрын

Ahhhh... I'll add it next time haha

@shibly95 3 жыл бұрын

Hello Conor, As I commented on your another video that I’m making a multi-step form for survey. It has 12 questions but on the 9th question if they click yes then it will skip next options and lead to the final submission and if they select no then it will lead to next step. But it would work this way you should if they have to only select the button but the problem is it will happen when then select yes and press the next button. So what can I do for that?

@connorfinlayson 3 жыл бұрын

I would look up Multi-Step forms by Flowpros. They have a pretty decent template. It sounds like what you are doing will require some custom code. This example is just a real basic example of displaying fields when certain selections are made.

@ackyeeee Жыл бұрын

Hi Connor, I managed to build this using interactions; but the problem is the form won't submit (the submit button won't do anything) if there are hidden elements? Please help.