HTML DEMO

This is a basic demo setup to play around with the new Custom Element
for <input> types
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
Probably easier to use what's native.
Probably easier to use what's native.
Output A
Output B
Choose your monster's colors:
Head
Body
Probably easier to use what's native but the pattern attributes are useful.
To modify the emails that are accepted use the pattern attribute. The regular expressions below are optional ways to restrict your Email field.

.+@(example\.com|example\.co|example\.net
This pattern will match email addresses with domains ending in .com, .co, or .net after the @ symbol. Adjust the example part in the pattern to match your desired domain name. This is a great way to limit spam.

.+@[\w-]+\.(com|co|net)
This pattern will match email addresses where the domain part after the @ symbol ends with either .com, .co, or .net. It allows any word characters and hyphens before the domain suffix. Use this pattern if you want to allow "business emails" like bob@bobsburgers.com.
This will not bypass Webflow's file upload. That is restricted server side so I don't have a use for this.

To modify what kinds of file types are accepted use the accept attribute.

You want to accept ANY format of that media type:
Add a new attribute for each media type and set the values as:
audio/*
video/*
image/*
Let developers include data that cannot be seen or modified by users when a form is submittedWhile the value isn't displayed to the user in the page's content, it is visible—and can be edited—using any browser's developer tools or "View Source" functionality. Do not rely on hidden inputs as a form of security.

Whatever you want to hide goes in the value attribute. Such a:
name:value
value:this is a secret note

One of the most common ways I use this in Webflow is to pass a CMS id or a Page URL so I know where a user was when they submitted a form.
You would use this to create a button that takes the form of an image instead of text.
Probably easier to use what's native.
Probably easier to use what's native.
8 characters minumum (change the Type attribute to "password" to activate.
Huey
Dewey
Louie
Warning: Add min and max to define the start and end. Set a value to choose a starting position. Set a step attribute to cover larger ranges quickly.
The next step here would be showing the # value dynamically. That requres javascript as seen in this example https://www.w3schools.com/howto/howto_js_rangeslider.asp
Warning: You should usually avoid including reset buttons in your forms. They're rarely useful, and are instead more likely to frustrate users who click them by mistake.
Easier to use what's native.
What happens if I have more than once instance of this tag in my form element? They both will Submit.
Warning: These default hours are set to 9am - 6pm.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.