ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
Conditional Form Fields (No Plug-ins): Webflow Forms Masterclass
ฝัง
- เผยแพร่เมื่อ 4 พ.ค. 2021
- Get started with Webflow NOW! webflow.grsm.io/vju2g2zhpv53
In this episode, we take a look at how we can create a reactive Webflow form based on the input values of a form element.
Code: codepen.io/FakeSamGregory/pen...
Support the show: / fakesamgregory
-
Listen to my Podcast!: ThatTech.Show
Affiliated With
Webflow: bit.ly/2ZzlJnd
Namecheap: namecheap.pxf.io/P53Az
Get to know me!
Facebook: @therealfakesamgregory
X: x.com/@0x5am5
Twitch: /fakesamgregory
-
My Gear (affiliate)
Sony A7 III: amzn.to/3oFAoxm
Sigma 24-70mm 2.8: amzn.to/3HkKYR2
VIJIM Video Light: amzn.to/41NrxIS
Hollyland Mark M1: amzn.to/3ng2e2P
Macbook Pro M1 Pro: amzn.to/3L62iKo
iPad Pro 2018: amzn.to/3AxJWNN
Magic Keyboard: amzn.to/421B26P
Travel Laptop Stand: amzn.to/3HmPv5w
Logitech MX Vertical: amzn.to/3LfW6zA
My Books
Lingo: Agile: thefullstackagency.gumroad.co...
Lingo: Startup: thefullstackagency.gumroad.co...
#Webflow #Forms #JavaScript
thank you for creating this tutorial! I've been looking for this all over YT and haven't found anything like it. I can't wait to try this out.
Another great video. I mean this opens the door to many possibilities. I think this shows another aspect of how flexible working with Webflow really is. Thanks a lot.
Man, thank you. This is EXACTLY what I was looking for 🎉
No problem!!
Hey - big shout out to you for this video! I was searching for that for a long time. If by any chance you could share with us here OR add to the code page another example - just like your example #1 but with checkboxes - that would be nice. I was not able to make it work with checkboxes :/// Thanks and all the best from Germany!
THANK YOU so much for this!!
No problem. I hope you learned something!!
Input fields the "Input Settings" have changed to "Text Field settings" over the last two years. For those wondering.
Great tutorial. Do you believe that is possible to implement the second example as a manner to show filters for F’in sweet filters/sort?
I need to create a search for where the user will select a brand and based on that another drop-down or checked items needs to show with the itens related to that brand.
though I’m not familiar, If F’in Sweets library has an API then Yes. You’ll just load all your items into the hidden element and then On change of the drop-down, fire the relevant event on their filters/sort library.
Hi Samuel! How can I make a form with only one input (text field) that checks a CMS database? If the text field is in the CMS database shows SUCCESS container, if it is not then shows FAIL container. Please help ! Thank you so much for your videos!
You will need to build a backend that you call which subsequently checks the database. As far as I’m aware you can’t do this from the front end as it would be a security risk.
I want to hide or block input text when select check box in the form
Add a disabled attribute to the element
@@webflowandcodehow 😢 sos l need help
Google “add disabled attribute JavaScript”
Hey man. I can´t get the third example to work at all. Is there anyway you could upload a read only or cloneable template to work out from??
No clonable unfortunately but there’s a Codepen in the description. What’s your issue?
Great Video! I have a question: Is it possible to qualify Leads with Webflow Forms? F.e. I have a question with 3 different answers to choose from... Is it possible to show the Lead on submit different thank-you pages based on the answer they've chosen?
Yes of course. Make all of the variations you need. Within the success method of the Ajax function you’ll do some if statements that check the values and forward the user based on those values
Is it possible to get the native multiple select option working properly in Webflow?
I’m not sure exactly what you mean but I’m gonna go out on a limb and say yes! You just bind events into the Webflow element ID.
I want to build a simple website with two dropdown menus: One for car brand and the other for car model (depending on which brand is chosen). Do you know of a website builder that allows this?
All of them
For the second option (with the dropdown select), how does it pass the custom input they enter into the fields (for example their phone number) along with the form info if it's a div and not a form field? Is that in the JS?
I’m confused. Users can’t type a value into a div, only form elements. Why aren’t you using a form field?
@@webflowandcode i mean the part where you have them enter their phone number
This isn’t a div, it’s a form input. I go through this at 10:30
Hello. it worked here with a drop down menu, i need to use two in same page. Does it need to be a different code or another setting? Tank you!
Brilliant. Yes it’s possible as long as the layout it the same. Your answer is on line 3. Have you tried Googling “select multiple elements jQuery?”
How would you only allow numbers over a certain amount in a form field? An example like 18 and over for an age form field. And display that you need to be older than that to apply / submit
Multiple ways but I would ask are you using the right field? Couldn’t you use a select field and only have 18 onwards as options? Does the user really need to select their age? Couldn’t it be just a checkbox saying they are over 18? Some things can be solved without tech. If you need an text-based input then you can use the pattern attribute that contains a regex to check it the number is not 1 thru 17? Making this element required will cause an error if the pattern isn’t fulfilled. Having a custom error message unfortunately needs JavaScript to make the check. I would advise looking into pre-existing JavaScript validation libraries if you need to go down this route.
Great content but I get lost because there are many ways to make mistakes. It would be much easier to apply if there was a clonable or a read-only link to the project!
Checkout the link in the description. Might make it easier but thank you for the feedback. Really appreciate it. Webflow don’t allow me to make infinite clonables unfortunately but this would definitely make it easier
Can't get the third option to work at all. How can I contact?
Did you take a look at the Codepen link in the description?
@@webflowandcode yes, can't figure out where I'm going wrong, but I know I'm close
Man I can't get this code to work for the life of me. I'm so frustrated right now.
Any errors in your console?
@@webflowandcode nope, not a word edgewise from my console, getting basically 0 feedback as to why it isn't working. Had to come up with an alternate solution.
Shame. This of course works. Probably a typo somewhere. Easily done
NO CODE!!
That would be nice wouldn’t it?