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
    3 Aug, 2022 09:57am

    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
    16 Nov, 2021 01:15am

    @Admin


    Safari now supports type:date as of April 2021


  • Lane Bowman commented
    4 Jul, 2020 02:52pm

    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
    30 Jan, 2019 05:35pm

    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
    30 Dec, 2018 12:04am

    url?

  • Prashant Trivedi commented
    14 Nov, 2018 01:07am

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

  • Samuel commented
    9 Nov, 2018 12:50am

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

  • Quentin Plomteux commented
    2 Oct, 2018 11:40pm

    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
    30 May, 2018 10:09am

    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
    17 May, 2018 11:55pm

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

  • David Mkwambisi commented
    17 May, 2018 11:46pm

    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
    17 May, 2018 10:15pm

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

  • Steven Hambleton commented
    7 May, 2018 03:47am

    Yup this would be very useful right now!

  • Amnon Barnea commented
    2 Jan, 2018 07:41am

    Yes! I need that.

  • +270