Forms: Add more input types and allow input restrictions

Following custom input types will be good to can be set:

  • color
  • email
  • date/time
    • month
    • week
  • number
  • range
  • phone

And availability for some common input restrictions:

Attribute Description
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field
  • Bruno Schenk
  • May 20 2017
  • Nov 19, 2018

    Admin response

    11/19/2018 Update:

    Hi everyone. Here's an update on this issue. 

    Color
    We don't support this yet, but you can add any input type/attributes with an "embed" block. For example: 

    `<input type="color" name="color" value="#FF0000" />`


    Email, Number, and Phone Number
    Shipped. You can mark these as Required in the UI. 

    Date/Time
    Unsupported as Safari is still missing support for the type:"date". We can prioritize this once support has been added for Safari. 

    Max, min, maxlength, step, pattern:
    You can define these via custom attributes

  • Frederico Leonardo commented
    August 03, 2022 09:57

    Also input type url, search. Not sure Webflow is aware of how the keyboard changes in mobile, if these types are properly coded.

  • Patina Photo commented
    November 16, 2021 01:15

    @Admin


    Safari now supports type:date as of April 2021


  • Lane Bowman commented
    July 04, 2020 14:52

    As mentioned below, why not just add the type=date and display a warning that this isn't supported in Safari?

  • Hans-Jørgen Kristiansen commented
    January 30, 2019 17:35

    Safari won't be supporting date picker anytime in the near future. So there is no point in waiting for Safari to support it. Just add a warning when using it.

  • William Wong commented
    December 30, 2018 00:04

    url?

  • Prashant Trivedi commented
    November 14, 2018 01:07

    Yes, Even if it's not stylable, this feature is much needed in forms.

  • Samuel commented
    November 09, 2018 00:50

    "Number" type has just been launched, and we already have email and phone.

  • Quentin Plomteux commented
    October 02, 2018 23:40

    I really need to be able to setup de value of a field. I don't want to have to use js to set the value of a field

  • Martin Staflund commented
    May 30, 2018 10:09

    I really need to specify my input to be of type "search". Without it, there is no key "search" (or "go") on the virtual keyboard. This oversight makes it harder to get prototype acceptance from stakeholders.

  • David Mkwambisi commented
    May 17, 2018 23:55

    It's rather shocking that this isn't a feature yet. It goes without saying really. Please do something about this.

  • David Mkwambisi commented
    May 17, 2018 23:46

    It's rather shocking that this isn't a feature yet. It goes without saying really. Please do something about this.

  • Scottie J. Haines commented
    May 17, 2018 22:15

    @webflow How on earth is this not in development yet?

  • Steven Hambleton commented
    May 07, 2018 03:47

    Yup this would be very useful right now!

  • Amnon Barnea commented
    January 02, 2018 07:41

    Yes! I need that.

  • +277