A long form can make a phone inquiry unnecessarily difficult. The W3C Web Accessibility Initiative<\/a> recommends asking only for information needed for the current process. Review each field: do you need this detail now, or can it wait until a follow-up conversation?<\/p>\n A placeholder can give an example, but it should not replace a visible field label. Placeholder text typically disappears as someone types, making the original prompt harder to recall. Keep a clear label above or beside the field and link it to the control with the matching HTML identifier.<\/p>\n The W3C guidance specifies using explicit Use appropriate input types and autocomplete values to help browsers offer useful keyboards and saved details. These are hints whose presentation varies by device and browser; they do not remove the need for clear instructions or server-side validation. See the MDN inputmode reference<\/a>.<\/p>\n Ensure your form inputs use specific attributes:<\/p>\n Side-by-side fields can become cramped or confusing on a narrow screen. Start with one column on mobile and test the reading and tab order before using a more complex layout. A layout that fits a desktop monitor still needs its own phone check.<\/p>\n\n
Use Explicit Labels Instead of Disappearing Placeholders<\/h2>\n
<label><\/code> elements to identify form controls. Properly linked labels also expand the clickable and tappable area around checkboxes and radio buttons, making them far easier to activate with a thumb on a handheld device.<\/p>\nTrigger the Right Mobile Keyboard with HTML5 Input Types<\/h2>\n
\n
type=\"tel\"<\/code> commonly offers a telephone-oriented keyboard. It does not validate an international phone-number format automatically; accept the formats your customers use and validate appropriately. See MDN\u2019s telephone input documentation<\/a>.<\/li>\ntype=\"email\"<\/code> can offer a keyboard suited to email entry. Keep an explicit email label and test it on the phones your customers use.<\/li>\ninputmode=\"numeric\"<\/code> so leading zeros can be retained. Use a numeric input only for a value intended to behave as a number; budgets may need decimal entry. Keyboard hints do not enforce valid values.<\/li>\nautocomplete<\/code> values, such as name<\/code>, email<\/code> and tel<\/code>, where the fields request those details. Autofill availability depends on the browser and the visitor\u2019s settings.<\/li>\n<\/ul>\nAdopt a Single-Column Layout with Generous Tap Targets<\/h2>\n