Advanced Webflow Forms - Multi Steps & Conditional Logic

Community resources Show & Tell
1

Hi! Already posted in the facebook group yesterday, but figured someone may appreciate it here :slight_smile:

Let me introduce the Advanced Webflow Forms builder.

Use this builder tool to create advanced forms with conditional logic and multi steps in just a few clicks, without writing one single line of code!

MULTI STEPS

  • Multiple steps with input validation
  • Additional options like alerts, custom interactions, displaying values, sending hidden forms, and much more.

CONDITIONAL LOGIC

  • Build workflows that show, hide, enable, disable, require or unrequire inputs depending on your logic.
  • Trigger custom animations when your conditions are met.

More features comming soon :grin:

I’ve tried to create this builder with no-code people in mind, just follow the steps and read the info when you want to add any functionality, the builder will generate the needed code for you. :muscle:

Play around with the builder and let me know if you find any bug, have a request, or need help using it.

BUILDER:

https://advanced-forms.webflow.io/

WEBFLOW SHOWCASE

https://webflow.com/website/Advanced-Webflow-Forms-Multi-Steps-and-Conditional-Logic

8 Likes
2

MAN! Super congrats on this tool! I didn’t get the chance to put it to work yet but it looks great! It’s definitely going to come in handy to those who don’t fully grasp coding and etc

Would you be interested in open-sourcing this project? I would love to contribute to it when I get some free time from work.

I really enjoy helping our fellow webflowers that don’t like coding as much as I do :joy::joy:!

3

Hey man, appreciate your words!
I’ll give it a thought about open-sourcing it, thanks for the offer!!

4

Sounds good!! Feel free to shoot me a message if you want!

Also, I created the tool below for working with CSV imports and hooking them up to reference and multi-reference fields. Feel free to take a look and make use of it in case you need

https://cms-gems.webflow.io/

2 Likes
5

That tool looks great!

6

Hey Alex, I like your idea. Wondering if you can help with something slightly related. The “select field” element in the forms section of the toolbox, looks ugly. More specifically, the drop down arrow is VERY close tot he right border of the dropdown field, and there is no way to move it left to make it more balanced. Can you help?

image
image643Ă—589 10.8 KB

7

Amazing!

A couple of issues.

  1. Conditional logic does not work for HTML embeds set with respective ID. (Not when wrapped within the embed, around the embed.

  2. When selecting “Start checked” within a Webflow form checkbox, AWF cannot read the field.

image

Cheers

1 Like
8

Edit: Looks like I got it working! Didn’t realize it could only hide form elements (like radio, checkbox, submit). Feature request to hide other elements within form (like HTML embed, images, etc) :purple_heart:

1 Like
9

@coyot3 Sorry for the late reply! You can actually hide any other element by using Webflow Interactions, check the Quick Intro in the builder to see how to do it :slight_smile:

10

@bitteusz You should check CSS styling for select fields (for example Styling a Select Like It’s 2019 | CSS-Tricks - CSS-Tricks) as this is not related with the tool itself :slight_smile:

11

No worries! Have an idea. Have you thought about making a “Pro” paid version that allows saving of conditions / logic? Would be interested! As building them out with the interface it great but then you lose all once refreshed.

If not, maybe a way to import code and start again?

Best

12

@coyot3 Ability to save the logic is something that I want to add in a future for free, will definetely do it when I have time for it!

1 Like
13

That’s simply amazing, thanks a lot for the detailed explanation for using multi step forms, Alex! I’m having one issue though: I tried to implement your solution and double-checked everything a couple of times already. But even though the hidden submit button gets executed by your code, there is no submission “arriving” on the webflow end. I assume it’s because I’m using a recaptcha is that possible?

Best,

Julian

14

@jjs can you send me the published link of your site?

15

sure, it’s https://www.jobletter.online/redesign-copy-form

16

Yep, that’s probably because of the captcha. This is something I didn’t think could happen! I’ll put it on the list of bugs to fix.

17

Hey Alex, is it possible to generate forms based on a number.

For example, user inputs number 2. Two forms are displayed of the same type.

I am looking to show multiple forms for a ticketing website. I.e user is buying 2 tickets, needs to fill out two forms.

18

Hey Alex, in the meantime I deactivated recaptcha and tried again. It turns out, that the form submission is still not working. Any other idea why it’s not working?

19

Hey @AlexIglesias,

great work, thanks for that but I think I found a bug:
When you have a back button in the form, you can only go back one step but not several.

https://preview.webflow.com/preview/capitava-formulare?utm_medium=preview_link&utm_source=designer&utm_content=capitava-formulare&preview=74b1a6d96c3f7bbec3b1d5b84d36fa01&pageId=5fcfe6d66687f275e4ae4d87&mode=preview

20

Hey @Maximilian_Shiraishi!

It should be fixed by now. Please update the Advanced Forms script from this:
<script src="https://cdn.jsdelivr.net/gh/brotame/advanced-webflow-forms@1.1.2/dist/awf.js"></script>

To this:
<script src="https://cdn.jsdelivr.net/gh/brotame/advanced-webflow-forms@1/dist/awf.js"></script>