Webflow Advanced Form Builder

When it comes to form, Webflow native form builder is pretty limited in term of functionalities. It does the job well for a simple enquiry form. However, when complex form with multiple steps and logic involved, Webflow form builder will not be able to handle it without custom code. And for a 'no-code' platform that is targeted toward non-coders, it will be a bit tough to get the job done.
You might suggest other third party form builders such as Jotform, Typeform, Google Form and etc. But nothing beats the pleasure of building everything natively, right? Besides, not all clients have the luxury to pay for these premium subscriptions especially small businesses.

And here I would like to recommend an advanced form builder tool created by Alex Iglesias. It is not perfect but it's good enough to handle multi-steps and conditional logic fields. You can check out the demo that I have created to estimate the capability of this tool.
‍

‍

‍

This Advanced Form Builder is still in beta and it's FREE. So, you can expect more features and improvement in near future. You can also contact Alex directly if you have any request or found any bug in this tool.

Coding knowledge is not required to use this tool but it helps for better understanding.
‍

‍

First, I would like to talk about the features available in this tool, my opinions and what I found during the development of the demo. Then I will proceed to briefly talk about how to use this tool.

To start off, there are two main features here, 'Multi Steps' and 'Conditional Logic'.
‍
The 'Multi Steps' feature here is created by using Webflow native slider. So, you will required to disable swipe gesture, auto-play slides, force slider height to be auto and hide all the slider navigations. There are quite a number of options available for your multi-steps form setup. A few noticeable setup such as, Alert Element, Display Completed %, Display Filled Values, Custom Nav Links and more. These options are surprisingly helpful once you have an idea on how to utilize them in your form. But you do need quite a few round of trial and error for your elements placement before you can get things right.

A lot of possibilities can be created using the setup available. For example, using the 'Display Filled Values', you can create an information review page/step. Then you can use 'Custom Nav Links' to return to specific step to edit information from the review page/step. If you want something more customizable, you can specify the Next button to have different text in different step. Overall, the options provided are pretty good and they are easy to setup.
‍

‍

As for 'Conditional Logic', it has pretty much everything that you need. It's quite similar to what other form builders have and it gets the job done. It allows you to trigger elements visibility, enable/disable input field, make a field to be required/unrequired and even triggering interaction. I have yet to try the interaction trigger but it seems interesting and will try it out once I have any use case that need it.

However, I believe I found a bug that might need some attention when triggering element visibility on conditional logic. The element that appears when the condition is met overlap the other elements below it. It might be caused due to the fact that this is built based on Webflow native slider element. On a second thought, it might not be a bug but elements misplacement by myself as there's no tutorial available yet. Thus, I have removed it from the demo form. As I am writing this, I have already contacted the creator and there should be a fix on it soon.

Other than that, everything works great and I love it.
‍

‍

The setup process is pretty easy. You just need to have your Webflow form created in advanced with all the input fields ID completed as well as all the elements required such as buttons, hidden fields, and placeholders ready. Then you just simply need to navigate into the corresponding feature and add in the options needed by following the instructions given and fill in the required input field ID. Once you have completed those, the magic happens in the 'Generate Code' tab. Just copy the generated code and paste it into your project's custom code section before </body> tag. That's it, publish it and you should be seeing a working multi-steps and conditional logic capable form.
‍

‍

This tool might not be perfect yet but it does a very good job and all thanks to Alex Iglesias's effort for sharing this wonderful tool. I believe with consistent efforts and more feedback, this tool will gets better. Do check out our demo form and the form builder from the links below. Let me know your thoughts or share what you have built using it. ✌😁
‍