< Back

Triggering Users Camera plus lots more! – Advanced Form Fields Part 3

Input Type Part 1: https://youtu.be/eRBtFSeRXvo
Codepen of examples: https://codepen.io/FakeSamGregory/pen/dyvagLE


Hello and welcome to another episode of Webflow and Code where I teach you the underlying code you’re writing in Webflow.

This episode is actually part two of a two-part micro series within the Webflow forms master class series. I actually have a playlist on the Webflow forms masterclass series which I’ll link to up in the cards, but like I say this is actually episode two, the first one I did last week, so if you haven’t checked out the first episode in this two part mini-series then I’ll link that once again in the card and in the description there’s some really important information actually at the beginning of that section so at the very least please check out that it kind of goes over what the input type element really is and, and kind of what, what it’s used for and various things like that, so do watch that intro and without further ado here is episode part two of input type attribute.

[Music] Now the input type file, this is actually a, a component that’s available to us in Webflow but only if you have a certain plan we can still use input type file with custom code but just know that the file itself will not be submitted to the Webflow backend, so this is if you’re using a custom kind of backend or you need to you’re sending it elsewhere this will not work.

It will not show up in the backend, it will, it will work in terms of that it will not throw an error or anything like that but you won’t see any kind of file submission in the backend having said that, it’s probably worth taking a look into it the input elements with type file lets the user choose one or more files from their device storage the file thing can be uploaded to using a form submission or manipulated with JavaScript using the file API and we’re not going to get into the file API or anything like that, this episode but maybe something we look into the future.

So, do let me know if you want to kind of look into these different APIs of the different form groups scrolling down to our summary again the change in the input is, is uh, is the events we listen out for but what’s, what’s worth checking out here specifically is the accept capture files and multiple attributes that it can actually use so accept actually tells it and you can see an example of it up here except actually, you can tell it what files it can accept and if a user was to upload a file that, it’s not accepted it will fail the validation.

Another benefit to that is when the user clicks choose file, it’s only going to show, it’s only going to allow me to select PNGs or JPEGs because I’ve used that accept property so that’s actually really handy if you want to limit or, or prevent a user from uploading files that you do not want them to up upload, so here’s a bit of documentation just lower down and the on the page scrolling down.

I can see an example here um, but you might have to do a bit of research if you do want to limit the the types of files and if it’s a bit more complicated than just a jpeg captures a really cool really interesting one so capture. Actually it will trigger the user’s camera if this is set so you can have um, a value of user or environment so taking a look I’ve got some all the examples.

Here, if we take a look at the embed and go to our file then we can do capture user and we go down to choose file then I’ll open my uh camera it’s changing it to environment then you’ll see that it opens up the rear camera so a real cool way to trigger the camera there with the file capture multiple allows you to select multiple files instead of just one which is pretty straightforward there so once again a very straightforward input and very, very powerful.

I’m sure you can agree so type hidden is one thing we’ve used on our multi-step form so input type hidden is exactly as you would imagine it to be it’s an input that can hold a value but it doesn’t actually display anything on the page this could be obviously in our multi-step form example we are able to pass data through and allow that data to still be submitted in the next stage but hiding it from the user so they can’t, they shouldn’t easily be able to manipulate it so input type image again, input type image is a very, very interesting one so essentially this takes a source which is of an image and it will display that image and essentially.

This will, this will actually submit the form. It’s not abundantly clear that this is something you know if you were to upload a picture of a wombat or something that that is going to submit the form but it does and you can see that in the description here the other element to this is that there are a bunch of attributes that you can apply to this that actually override everything that you put in the form attribute so this is the post well you can see here this is the action, this is the end type the method.

And whether it validates or not, so this is really powerful but also quite sort of dangerous and can be very, very confusing especially when you’re trying to reason about sort of the website the code and what what it’s doing and how it’s working but just so you know that if you were to use an input type image that submits the form and you can obviously override where the form submits to the actual types, that it can expect and the method and various things like that.

You can kind of go through here and take a look at the the result or the impact of adding different types of attributes can do so very interesting very very powerful but also would probably recommend against it to be honest range is a great one which I think you would really like again input type of range input type element of type range lets the user specify a numeric value in which must be no less than a given value and no more than another given value.

Okay! so the default if you don’t set a min or a max is zero to a hundred so you can use this without providing any attributes as you can see here but there are some more really interesting things you can do with this element so the step attribute on this one actually means that you can, you can’t, you, you, you might want the user just to select steps of say “two zero two four eight” so that can be quite useful now the really powerful thing on this particular attribute is the list so we took a look at dataless in the previous episode and you can do the same here with this element, but it responds slightly differently actually changes the UI.

So, here’s an example of adding a data list, and you simply put the list and then the id, of the data list that you want to use so these match up and you can select different values that, that actually form as ticks above the range slider okay so that that this is how it renders here and then you can go one step further and actually set labels on that range slider.

I’m in safari right now actually so apologies, If I said earlier, I was in edge um, so I’m in safari right now so you can, you can see safari is not actually rendering it so jumping into edge, edge also doesn’t render it but it’s interesting to see that what you can do obviously they both render the ticks but they render it slightly differently and then the other other final thing to take note of it is actually changing the orientation and the documentation here recommends or suggests different ways you can do it at work in different browsers.

My personal recommendation is to actually transform it using the rotate 90 degrees because you can have varying degrees of luck here you can set the width the height greater than the width and that that will actually try and render it out but you can see here in in safari that it’s not it’s not respecting, that but actually rendering it here I think most browser will most browsers will work when you just rotate, it using the transform property so input type range very, very powerful very, very interesting you can actually select the different values of cowbell there so working our way down we get to input type “reset” now I actually think this is a very underutilized input type.

What input type does is essentially, is it resets all the values of all of the input types in your or all the inputs in your form so that we can just see there’s one uh input here but if there’s multiple it just resets them to their default value this can be a really intuitive user interface element to help users just quickly erase the what they’ve inputted into a form but beware it does it, does reset the whole form so we might use something like this on our multi-step form whether we each form on each page is actually just made up of a few um, inputs not really much more to it.

Other than that, it’s a really underutilized input type, input type search, now this is once again just an input text field essentially but we’re letting the browser know that this is used for site search or various things like that right now there’s not really a lot going on in terms of user interface like difference in user interface but there may be down the line you know browsers might choose to implement a magnifying glass or something like that a different slightly different user interface for type search similarly, we have input type URL which accepts an input type URL and of course we get the benefit of the the form validation kicking in.

If a user doesn’t insert a type of type URL you can see here that in the example they’re enforcing https URLs which is quite handy and a useful tip and scrolling on through again nothing nothing crazy going on in terms of what it’s, what you’re able to do with it so there you go a whistle stop tour of input type you can see it’s a very powerful element you can do many many different things to it and the great, great thing about it is that it gracefully degrades down to an input type if a browser doesn’t support it.

I hope this wasn’t too boring just kind of going through the documentation, but I do think it’s important that on this channel I actually teach you how to solve your problems yourself. I don’t want to give you, you know cloneables or copy paste things because in my opinion that’s not learning so just dipping into the documentation on this particular episode might have been more appropriate than actually typing out the code and just going through the code.

So, that’ll do it for this episode, if you enjoyed it then please show your support by hitting the like button down below if you want to stay up to date with the Webflow forms masterclass series then please make sure you subscribe and hit that bell notification so you are notified when I release the next episode.

I’ll be in the comments section below so if you have any thoughts questions or suggestions then please let me know. I’m always happy to respond to you guys and until next time happy no coding [Music]