Design mobile-friendly WordPress forms

Make the question order do the work

Write the questions in the order a person would explain their request. For a repair enquiry, asking what needs attention before requesting a preferred visit date gives the date a purpose. Avoid jumping between contact details, service details and contact details again.

Keep related answers close without squeezing them into columns. A name and email address can each use a full row. When a person enlarges text, labels should still sit beside the answer they describe in the reading order. Remove introductory paragraphs that repeat what the heading already explains.

Reduce unnecessary typing

Use the field that matches the answer: an email field for an email address and a telephone field for a phone number. Configure relevant autofill purposes when asking for familiar personal details. Check the result on your intended devices; keyboard and autofill presentation varies by browser and operating system.

Do not ask people to type a long reference unless the team actually uses it. If a reference is optional, say where to find it and let the request continue without it. For a message, describe the useful detail rather than setting a minimum length merely to make the answer look substantial.

Keep the form usable when space is tight

W3C's reflow guidance describes a 320 CSS pixel width for ordinary vertically scrolling content. Check that instructions, choice labels and errors wrap without forcing sideways scrolling. Also test enlarged text; a form that fits at its initial size may still clip a longer label.

Give buttons and choices enough space to use comfortably. WCAG 2.2's target-size minimum is 24 by 24 CSS pixels, with specified exceptions including spacing. Treat that as a criterion to understand, not a reason to make every control tiny. W3C also notes that larger targets can help people operate controls more easily.

Test the phone journey, not just the layout

Use a staging copy with sample information. Start at the page heading, open every choice control and type a longer message. Leave a required answer empty, send the form and follow the resulting error back to its field. Look for a sticky site header, chat widget or cookie notice covering the focused answer.

Rotate the device, enlarge the text and return after briefly opening another app. If the form has an attachment, try selecting it from the phone's own file picker. Finally complete the request and verify that the confirmation fits, makes sense and does not require another tap merely to understand whether sending worked.

Using Accessible Forms

Use the same accessible questions on desktop and mobile, then check the form inside the WordPress page where it will appear.

In Free: Accessible Forms Free includes email and telephone fields, autofill purposes, visible labels, linked errors and four built-in themes. Its public styles protect minimum text sizes, control targets and narrow layouts.

With Pro: Pro adds layout and appearance choices. Recheck narrow screens after changing columns, label placement, spacing or text size.