Peggy Zhu (Customer) asked a question.

Numeric Keyboard for Postcode Field in Sitefinity Forms

Hi everyone,

 

We're currently using Sitefinity CMS 15.4 and have a question about Sitefinity Forms.

 

Environment Details:

  • Product Version: 15.4
  • Build Version: 15.4.8625.0
  • Product File Version: 15.4.8625.0

 

We're currently using a Phone field (Text field), which displays the numeric keypad on mobile devices when selected.

 

We'd like to create a Postcode field that behaves the same way and brings up the numeric keyboard on mobile rather than the standard ABC keyboard.

 

Has anyone achieved this in Sitefinity Forms? Is there a built-in setting or recommended approach to make a postcode field show the numeric keypad on mobile devices?

 

Any advice would be greatly appreciated.

 

Thanks! 😊

 

Peggy


  • Jonathan Read (Progress Software)

    One option and probably the easier would be to create a template for the text field widget. Then add the appropriate markup needed to support the numeric field for mobile (this is not specific to Sitefinity). If you share what technology stack you are using we can provided a more detailed answer. Are you using .NET Framework MVC or ASP.NET Core or Next.js?

  • Eric Butler (Customer)

    Hi there Peggy! The easiest way to get a numeric keyboard on mobile is to set the input field's "type" to "number" -- open the Designer, click the "Limitations" tab, and change the "Type" value from "text" to "number." The one gotcha with this is it will also create that "spinwheel" on desktop that increments the value if the user accidentally runs their mousewheel inside the field. That was a dealbreaker for us.

     

    So a better solution (what we did, example at https://www.rural1st.com/get-started), is create a new MVC View under \MVC\Views\TextField\Write.NumberField.cshtml (name it whatever you want), copy what's in the existing \MVC\Views\TextField\Write.Default.cshtml into this new View, and then change the Input tag's attributes so that type="text" but add a new attribute, inputmode="decimal". This tells mobile browsers to use the numeric keypad while keeping it a "text" field.

     

    You can see the docs for inputmode here: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inputmode

     

    Give that a try and see if it works for you!