Multi Step Forms in Webflow (with Inputflow)
ฝัง
- เผยแพร่เมื่อ 22 มิ.ย. 2023
- In this video, you learn how to use Inputflow to build advanced Multi-Step forms in Webflow. You can use this method to build Onboarding Forms, Lead generation forms, signup forms, quiz forms, and much more.
▶ Inputflow website:
inputflow.io
▶ Clone the Multistep form project:
webflow.grsm.io/form *
#webflow
With Inputflow you can turn your Webflow forms into intelligent, multi-step journeys with different paths, based on the user's input.
* The description of this video contains affiliate links (marked with *), which means that if you sign up for one of the tools that I recommend and decide to switch to the paid plan, I’ll receive a small commission without any additional cost for you. This helps support the channel and allows me to continue making videos like this. Thank you for your support! - แนวปฏิบัติและการใช้ชีวิต
▶Check out the updated tutorial for the new version of Inputflow:
th-cam.com/video/TLxTJE5ii_w/w-d-xo.html
Mike, das ist Next-Level was du hier baust! Toller Mehrwert für die Community!
Danke Jonas, über deinen Kommentar freue ich mich natürlich besonders 😉
Your content is just awesome, Mike. Thanks for sharing all these with us!
mike making life easier for developers thank you
Thanks mate :)
Taking things to the next level! Awesome job!
Thanks Dimitris 😎. Not as advanced as some of your deltaclan solutions, but working on it 😉
Great work @mikepecha this is a really help video and awesome tool 👏👏👏
Happy to hear that settledhomeloans :)
Incredibly useful content and tool! I'll definitely be using it on my designs! Thank you for your work!
Thanks :) Happy to hear that
You are just amazing! Thank you so much to share your knowledge with us...
Thanks for you nice comment David :)
This is great, thanks! Is there a way to refresh the builder if I made a change on my form page on Webflow (added an option to a radio button field, added an additional step etc), and dont want to rebuild the full logic flow from scratch?
Very clear and great UX, nice work
Thanks Eddie :)
Amazing stuff as usual !
Thank you ProNoob :)
You're a legend brother
Thank you, Lazar :)
Sehr gut! Danke schön. Heute wird's live benutzt…
Cool. Freut mich zu hören :) Ich arbeite gerade an Version 2 die wird dann in wenigen Wochen live gehen. Da sind dann noch mal deutlich mehr Funktionen dabei. Wenn du irgendwelche Fragen zum Setup hast schreib' mir gerne per Mail/Twitter .
Gruß, Mike :)
@@mikepecha It works fine. Only thing I find is that the script ignores the fact that some fields are requiered.
Ziemlich cool @Mike! Trifft nicht ganz meine Preisvorstellung, weil ich das aktuell mit custom code löse.. Aber ich bin mir sicher, das wird vielen hier mega weiterhelfen!
Danke für dein Feedback, Marvin :)
Amazing!
Thanks Marcel :)
Hey Mike! Really enjoy the videos and learnt a few things I didn’t know from your other ones. Is it possible with your product to create a section just before submission when the user can review the information they have given as an overview? Thanks! James
Hi James, yes that is possible to a certain extend. With the pro version of Inputflow there is the possibility to display the user input somewhere else inside the form.
Check out this documentation video: th-cam.com/video/Ofjk1JT_uaM/w-d-xo.html
That’s a great job mike , awesome … pls help implement a back and forward button … and if possible make a video of how to work around using the back and forward button
Thanks mate. The back and forth button can be configured with the if-element=button-next and if-element=button-back attributes
Hey Mike, great video, congratulations!
I am just starting out with Webflow, there is one thing I couldn't understand,
when the user submits the form, how do I know which service they chose from the beginning?
Do you suggest to insert tags on every form with which the user interacts, in order to profile the user from the beginning?
Thank's
You can see it in the Webflow form submission. Alll of the steps and input fields are inside a single form => If this form gets submitted, all the answers of all steps are submitted as well.
Great!
Thanks :)
Hey Mike! Really enjoy the videos and learn a lot! How about the CMS? Can we integtate it with maybe google sheet?
Happy to hear that :)
How do you want to connect Google sheets with the CMS?
Really helpful so far. Just wondering how can we add button to go to previous page ?
Yes, will be possible in 1-2 weeks
Very smart ! Very useful ! Very easy to use ! Thanks @mikepecha !
Happy to hear that, David :)
great video! i am getting into designing with webflow and i would to know how you made the form itself. i am struggling to figure out how to make bigger elements clickable and to act as input for the form, like you did for example with the "Custom Javascript" card, the radio_content element to be exact, thx😁
I will record a video about this soon
Very nice! Is there any way to get a "summary so far"-feature? What I mean is, if there are many steps for a service, can I somehow show which selections the user has selected so far, as well as a complete overview before they send it in?
Yes, in the new Inputflow App you can display all Input values with an intuitive syntax
Pls use steps on TH-cam. But thx for the useful video!
Hi Mike, cooles Tool. Gibt es auch die Möglichkeit, dass der next button erst funktioniert, wenn alle Pflichtfelder ausgefüllt sind? Aktuell werden die glaube ich ignoriert und man kann gänzlich ohne das Formular abschicken.
Servus, es gibt seit ein paar Tagen eine Pro Version, wo die Input Validation & Custom Fehlermeldungen dabei sind.
In der Basis-Version werden die required Attribute fields entfernt, damit am Ende das Formular nicht ohne Fehlermeldung blockiert. Das mit dem deaktivierten Button ist eine gute Idee. Ich schaue mal, wie ich das geschickt einbauen kann👍
@@mikepecha funktioniert gut in der Pro Version! In der light wäre es cool, wenn die native checkbox "required" beachtet werden würde
Thanks for tutorial. How to sent answers to extrernal API?
What API do you want to send it to?
hi mike pecha thanks for the video
does it have a way for back button (how to add it)
instead of if-element=button-next, you can also set if-element=button-back
@@mikepecha thanks Mike I really appreciate it
Hey Mike, this is just perfect! Is this going to be free forever?
Happy to hear that, Daniel :) I am working on a Pro version right now, with additional features, but there will always be a useful free version as well.
Hey Mike. I'm trying to use this in Cms, but it only seems to work for one of the cms items. Is there a way around this?
Hi Dennis, I replied to your form submission via email :)
Mike, thank you, very useful! Very easy to use your service! I just have a few questions:
1) For some reason there is no check for required fields, even if the fields in webflow are marked as required, is it something to do with your script?
2) It would also be nice to make a "Back" button (or link) to go back to the previous step. Is this possible?
Hi Andrew, Thanks for your feedback!
1) right now there is no validation functionality, but I will build this in the coming weeks. Until then, that's why the reuqired attribute is removed before submission, b/c otherwise it would silently fail. (As some input fields are required, but no longer visible b/c they are in a different step)
2) This will be implemented within the next few days.
Cheers, Mike
@@mikepechahas the required field functionality been enabled now? It's not working in your clonable.
@@tinadee8488 Yes, in in the premium version
Where is the pricing for that? I need to quote a client. @@mikepecha
Hey I saw where you had a project with pizza and you incremented the price based on select. How can I contact you to ask about that?
Send an email to hey@inputflow.io
kann ich den attribute für next button auch einfach in radio button packen damit man drauf clickt und direkt weiter kommt. Ansonsten geiles tool weiter so!
Coole Idee. Habe ich selber gar nicht dran gedacht. Sollte eigentlich funktionieren. Ich arbeite gerade an Version 2, welche in wenigen Wochen fertig sein wird, da wird das dann nochmal ein separatesFeature sein :)
Hi mike, how do i add hte submit form button
Hi, you can use the standard Webflow "Form button" element
Can you also creat a progress bar?
Not yet, but will be possible in the near future!
Can we use hubspot to collect the data from the form?
Sure. You can connect the form to Hubspot just like a normal Webflow form.
I have a question, after my form collected this info from my clients, how do i collect this data the user selected after?
I am not 100% sure what you mean. Could you elaborate?
Hey is there an option to make to next step appear after choosing one Input?
Yes, the feature will be released next week
@@mikepecha Danke genau richtig mir ist gerade aufgefallen du bist ja deutscher. Dein Tool ist echt geil dadurch braucht man nicht merh die ganzen überteuerten 3rd party tools zu benutzen
Can I make pricing calculator with this tool??
Yes, you can. Check out this: solar-investment-calculator.webflow.io/
Is it possible to have multiple forms on one page?
Not yet, but will be available soob
In der Theorie sehr genial, in der Praxis vielleicht auch, aber leider funktioniert es bei mir irgendwie nicht. Wahrscheinlich liegt der Fehler bei mir, aber sobald ich das Code Snippet in den Header Bereich einfüge, werden meine Formularseiten weiß und es passiert nichts mehr, egal ob ich auf "weiter" klicke, oder auf "zurück". Sobald ich das Snippet wieder entferne funktioniert alles wieder. Das ist jetzt wahrscheinlich eine Frage, die man so nicht einfach beantworten kann, aber was könnte ich falsch gemacht haben? Die Divs sind alle passend benannt, die einzelnen Seiten miteinander verknüpft und die Wenn-Dann-Funktionen passend ausgewählt. Das ich es als Popup in meine Seite integriert habe, welches sich durch das klicken eines Button öffnet, dürfte das Ganze ja eigentlich nicht beeinflussen oder?
Schick mir mal deinen read-only link + Link zur live Webseite an mike@inputflow.io, dann schaue ich es mir an
Is there a way to do this on wordpress?
No, Inputflow is made specifically for Webflow
Gibt's auch die möglichkeit ein zurück-button ein zu bauen?
Ja, mit dem Attributed if-element=button-back
Das war schnell, danke schön!@@mikepecha
Did you manage to implement a 'Back' button into this, I think that's the only thing stopping me from using this
Is implemented now :)
That's great! How might I implement a 'Back' button into my project? @@mikepecha
Hi Mike, that's great, but the multi-step form is not cloneable.
Just fixed, you should be able to clone it now! Thanks for pointingthis out, Norbert!
Can you make a back button?
Working on it right now ;) Will be available in 1-2 weeks
Could You Make a video of imbedding chat feature into webflow like fiverr?
I'll put it on my list!
Tried to send feedback on the site but got an error. So i'll post it here as a comment:
Hi there! I currently have a single form for lead submission on my site.
I'd love to use this for a multi-step flow, but have the user input their name/phone/email on the first step and have that info saved/submitted when they hit next
then if they complete the entire form, have that information attached with their name/phone/email upon final submission as well
I send all form submissions to airtable as my CRM via webhooks
:)
Hi Sicknails, so you want to submit the form twice? May I ask what your use case is for this?
@@mikepecha capture contact details of cold leads, anyone that does the full form is a further validated lead
Hi, ist das DSGVO Konform?
Du kannst es mit einem DSGVO konformen Forular Anbieter verknüpfen. Schaue dir dazu am besten mal dieses Video hier an:
th-cam.com/video/C80hhcwPX3o/w-d-xo.html
@@mikepecha super, danke dir
Gerne :)
Great stuff! Is this free?
There is a free and a paid version
@@jorims8537 Ja, gibt es in der Pro Version wenn du auf das settings Icon oben rechts im Form Editor klickst