Take your forms up a notch with input masks

in this video we're going to show you how to make your forms easier to fill out using input masks let's dive in [Music] hi i'm kyle the creator of no code collab a site with tips tricks and tutorials for your next no code project if you haven't already please like this video subscribe to our channel and be sure to head over to our website where we've got code snippets and other things to help you as you're implementing these solutions on your next project so out of the box in webflow when you create a form your form fields your little inputs are just blank boxes you can put placeholder information in there but you can't format the text when people are actually inputting numbers so say for example you want to collect a telephone number you can put in a nice looking placeholder text that has all the the parentheses and the and the dashes and all that but once someone starts filling it in it's on them to add all of that formatting so what will end up happening is some people will add the formatting some people won't add the formatting and so the data that you're receiving is in all of these different formats additionally for the people who are filling out the form it can be a little bit more confusing are they supposed to add the formatting are they not supposed to add the formatting and so it just doesn't provide the greatest experience when you just kind of have an open field where people can write whatever they want and that's where input masks come in with a little bit of code we can put the formatting right into the form field so that as people are filling it out it stays there and then when they submit it all of that information also gets submitted with the form so it's good for the user and it's good to help you keep cleaner data on the back end so let's head over to webflow and take a look at how we're going to do this okay so i have a really simple form on my page i have four input fields as you can see they have placeholders in them now the unique thing here is we've got a plugin and that plug-in is creating these placeholders that don't go away when you focus into the input they stay there and then as you add your input to the field you add your your values let's say i'm going to add a phone number here the placeholder just updates with your with your input so you can see that we are just updating the placeholder stays and we are updating the the value as it goes in now the nice thing with currency currency is a little more unique and i'll show you in a minute but as we add our numbers i'm going to say 5250. and 25 cents now if i just type and 25 cents what it's going to do is it's going to make it it's going to go up so what ends up happening though is if i hit the the period or the decimal then now the cursor has jumped to the other side and now i can add my 25 cents so it's it's pretty smart the currency one is smart and as a result it's a little different how we do it now the last one is you can see doesn't have a placeholder and that's because i have a different setting and i just want to show you this because all three of these have a setting uh that that is the same this last one i have a different setting on it and what happens is when i hover that's when the placeholder shows so depending on what you like you might not want that you might not want that placeholder to always be showing you might only want it to show up on hover or on focus so that would be that's something that we'll that we'll look into so let's jump over to webflow and show you how we are achieving this i'm now in my page i've got my four inputs and as you can see i've got the four inputs and what i've done is i have just added a an id to each of these inputs you can use it by class and then you can apply these these input masks to more than more than one input in this case i've just used an id so i've got my phone phone 2 date 2 money 2 credit card 2. those are the ids for the the different inputs so once you've created your form give it ids on on the actual input set the inputs to plane because the input mask is going to do a lot of the a lot of the the heavy work for us and then head over to your page settings scroll to the bottom where you see before body closing tag what we have here is we've got our script that is the plugin that we are pulling in so that's the first thing this is the that's the plugin then below the plugin we've got our custom javascript that we are writing for these input masks and then we've got a little style because actually on the currency it always sends the currency to align right justified and so what we're doing is we're actually going to pull that back over to the left you may or may not need that i will include it in the in the snippet though on no codecollab.com so once we're inside of our script we've got our document ready this is jquery that we've that we've now got here and we've got our basically our document ready so once this document is ready then start to do this this stuff so the first thing we're doing is we are saying the phone to input so the hashtag or the pound is is indicating that it's an id so we've got phone two input mask is the function and then what we're saying is we're calling this this attribute this mask and we're saying the mask that we're trying to collect the information in is this phone number and and i've you type this yourself you can change this to be whatever you want so if you wanted to make this a question mark you could do that and then when it's rendering it'll show a question mark instead of a dash so you type that in and it so it's very flexible and then the placeholder attribute is this is whatever you want to show so i've used those those pound signs again to make it a little more clear instead of using numbers and i've also matched my placeholder to my mask so that as i'm my placeholder showing and as i'm filling it in there's it's not a jarring it it matches and so it looks like i'm filling in on that placeholder and then lastly is this clear mask on lost focus and i've set it to false setting this to false means that your placeholder will show right away it'll always be showing if you set it to true like we did on the credit card then the placeholder will only show on hover or on focus so if you set it to true or you could actually just get rid of this this attribute altogether but if you set it to true then you'll need to hover or focus if it's set to false it will always be shown so that will give us the input mask for our phone the date is very similar all i've done is i've said i want to collect i want to collect the information and the input field in this format i'm using nines because nines is the it tells the plugin to collect numbers so i'm using nines to collect numbers and then i've got these other characters to indicate how i want to collect it i've got my placeholder image which is month month day day year year um the the month day and year is not actually there's no smarts behind that so it's not going to require or force a person to only put in months they could actually put in 99 as their months so this is just the placeholder and because we're using the mask this way where we're allowing them to put in any number they technically could put in a date that doesn't exist and then i've also got my clear mask on lost focus so this means that it's going to be showing when the page loads lastly is our credit card input input mask again same thing the only difference here and i might want to update i would maybe change this to be something that's more along the lines of maybe maybe we want to do stars to indicate that we want four numbers because as i was filling it out the numbers i was getting confused as to what was the one i had filled in versus what was the placeholder so putting more of a symbol is probably going to make that easier for me to understand what's being filled in and then i've got the clear mask on lost focus let's make that false because we want to show that when it when it opens up so those are the first three the one that i've pulled out here the money one is a little different because there's some smarts going on with the money input field we're using this thing called an alias and what an alias does is it's got smarts built into it so that you don't have to create the mask or the placeholder or anything like that it it is a it's kind of it's it's all it's already baked in so we've got our alias of currency we've got our prefix which is the dollar if you wanted to use a different currency you could do that and then uh you see you would just swap that out if you had a a british pound or euros or something or pesos um you could do that there and then clear mask on lost focus i've set that to false because i i want that to show up as well so that's what we have going on here i will also include in this in the tutorial article a link to the actual plugin plugin github repository where you can see more of the more of the settings that you can use these are probably the most common and so that's why we're doing them here but you can go check out the the settings in the repository lastly i did include that style so that the currency was not right aligned but left aligned so i targeted the money input and then i said text aligned and i had to add this important because the script is actually trying to right align it so when i throw in that important i'm kind of overriding that so let's take a look here i've changed a few things so let's take a look save this and then let's republish and see how things look once i have republished the the page okay so i'm back on my page now as you can see with the the credit card is now showing on load because i changed that i changed that that setting from true to false and then i also updated the the placeholder to be the the asterisks so now if i put in information it fills in and i think that's a little easier to follow instead of having having numbers in there so and that's it all you have to do is copy that snippet that's on our tutorial page paste that into the page where your form is and then update the ids update the masks and you should be good as gold so hopefully that helps you with your next project and makes those forms just a little bit easier for your users and gives you better data on the back end thanks for watching and we will see you at the next tutorial [Music]

Channel: No Code Collab

Views: 108

Keywords: Input Mask, No Code, Webflow, low code no code, webflow tutorial

Id: r4zmA4pyl2E

Length: 12min 34sec (754 seconds)

Published: Wed Sep 22 2021