Feature request: guidance or implementation of phone number fields

[thibaudcolas]

Feedback from one of our projects to consider – currently we have text and number fields. It’s not necessarily clear what to use for phone numbers, though the GDS has guidance on this.

---

It’s not super clear to me whether this is an issue with this package or Django more generally or Wagtail forms specifically, but thought I’d open it there for further consideration.

[davidjamesharris]

Since this was raised, @nimasmi has created some examples for the project team to review - we're just waiting for confirmation of which spec we should go for:

https://codepen.io/nimasmi/pen/LYraywe

[kbayliss]

While @nimasmi 's examples are nice, they aren't part of the GOV.UK Design System. tbxforms currently supports GOV.UK projects and non-GOV.UK projects, meaning all patterns are within the constraints of the design system.

Adding a custom pattern is certainly possible, though I'm hesitant/reluctant to do that.

The design system has an experimental telephone number pattern - would this meet your needs @thibaudcolas / @davidjamesharris ? I'd be more comfortable adding this than something bespoke that's not part of the design system.

[davidjamesharris]

Hey @kbayliss @thibaudcolas @nimasmi - the RNIB accessibility team have said that their preference is:

type: tel autocomplete: tel inputmode: tel

The difference from the gov.uk experimental pattern being inputmode (which is not set on gov.uk)

I have no idea what the difference is, I'm really happy to go with whatever our team decides as long as we can make a sensible case back to RNIB.

[kbayliss]

@davidjamesharris you can provide additional attributes to fields and tbxforms will add them to the input, so you could define your telephone field like this and it will work:

# in you form's fields
telephone_number = forms.CharField(
    widget=forms.TextInput(attrs={"input_type": "tel"})
)   

# in your form's helper method:
Field(
    "telephone_number",
    autocomplete="tel",
    inputmode="tel",
),

I did a quick demo and confirmed this:

[davidjamesharris]

Awesome! @nimasmi does this give us what we need? If so can you close this issue? Should we be telling all other projects using tbxforms that we're using this method as it is more accessible?