Mobile contact forms: 10 practical fixes before your next launch

A useful mobile contact form asks clear questions and helps people finish, even when they make a mistake. Review it on a real phone with the keyboard open, then test errors and confirmation. The empty desktop form is only the beginning of the journey.

This checklist is for a business enquiry form, rather than a complex application or checkout. It contains practical design recommendations, not a claim that any particular change will increase conversion by a fixed amount.

Use your current form as the working example. Write down the purpose of each field, complete it yourself and ask someone unfamiliar with the business to try it. Watch where they hesitate without explaining the questions for them.

Start with the questions you actually need

1. Give each field a job

For every question, finish the sentence: “We need this before we can…” If you cannot finish it with a useful action, consider asking later or making the field optional.

A service business may need contact details and a short description to begin a conversation. Detailed delivery information or internal procurement questions might belong later. The right set depends on how your team handles an enquiry.

Do not remove information your team genuinely needs just to claim that the form is shorter. Instead, explain why a question matters. A brief explanation can make an unfamiliar request easier to answer.

2. Separate required and optional answers

Choose a consistent way to identify required fields and explain it before the questions. Do not make someone discover which fields matter only after pressing the send button.

Where an answer depends on a visitor’s situation, reveal the relevant questions clearly. If someone switches from “Company” to “Individual”, questions that no longer apply should not keep blocking submission.

Write down the rules in plain language before asking a developer to implement them. “Company name is required for a company enquiry” is clearer than a collection of exceptions spread through the interface.

Make the fields easy to recognise and complete

3. Keep a visible label above each field

Placeholder text can disappear as soon as a person starts typing. Keep the question visible so they can check what they are answering.

W3C’s guide to labelling form controls explains how a label should be associated with its control. For a simple email field, the relationship can look like this:

<label for="email"> Email address </label>
<input id="email" name="email" type="email" autocomplete="email" required />

This is a field-markup example, not a complete or secure form implementation. Submission handling still needs server validation and the protections appropriate to your site.

4. Match the keyboard to the answer

Use the appropriate input type for email and telephone fields. For telephone fields, remember that a telephone input does not impose one universal number format. Your validation and instructions need to reflect the countries you accept.

Use relevant autocomplete attributes for common details such as names and email addresses. Test the result on the devices your audience uses, rather than assuming that one browser represents every phone.

5. Put instructions beside the question

If a description needs enough detail for your team to respond, say what would help. For example: “Tell us what you want to build and who will use it.” That is more useful than “Enter description”.

If you accept a file, state the allowed types and size before the upload control. W3C’s form-instruction guidance is a useful reference for connecting that help to the relevant field.

Keep examples clearly recognisable as examples. A sample email address inside a field should not look like information that has already been supplied correctly.

Test the layout with a real mobile interaction

6. Leave room for fingers, text and the keyboard

Open the form on a narrow screen, focus the last field and bring up the keyboard. Can you still reach the button? Does a sticky banner cover the error or the question? Can you scroll without losing your place?

Check the layout with longer labels and enlarged text. A form that works only while every label stays on one line is difficult to maintain. Your next service name or translated phrase may be longer.

For a multi-step form, make the current step and the way back clear. Keep answers when a visitor goes back to correct something. Test whether a newly revealed field is visible and understandable without an abrupt jump.

7. Make the final action specific

Use a button label that describes the action, such as “Send enquiry” or the existing label your business has chosen. On TrioFlare, the fixed project-form label is “Send brief”. Keep established wording consistent across the site.

Show a clear sending state and prevent accidental repeated submissions. If the network fails, explain what happened and offer a sensible next step. Do not present an unconfirmed request as successfully delivered.

Keep spam protection close enough to the final action to make the sequence understandable. Improving the layout should not mean removing security checks that protect your business and visitors.

Help people recover from errors

8. Say what is wrong and how to fix it

“Invalid input” asks the visitor to solve your form’s rules. A message such as “Enter an email address we can reply to” identifies the task more clearly.

Use words as well as visual styling. Colour alone does not explain an error. Where an overall summary is useful, link each message to the relevant field and keep the local message close to the answer.

W3C’s form-notification tutorial describes ways to make errors and success messages understandable, including error lists and associations between messages and controls.

9. Preserve the work someone has done

When a field needs correcting, keep the other valid answers. Test changing a conditional answer too. An error attached to a question that no longer applies should disappear from the summary as well as the visible form.

Client-side checks can provide quicker feedback, but server-side validation is still necessary. Ask your developer to test both paths. A carefully designed message is not a substitute for checking what the server actually accepts.

Include realistic failure cases in the handover: missing required details, an unsupported file, a slow connection and a rejected spam check. These are part of the form, not unusual extras.

Finish the journey after the button

10. Confirm the outcome and test delivery

After a successful submission, say what happened and what the visitor can expect next. Use a response-time promise only if the business can meet it. If you provide a reference, make it easy to copy or revisit.

If a confirmation email is part of the process, test it. Check the visitor’s message and the internal notification separately. The internal recipient needs enough context to act, while the visitor needs a clear acknowledgement.

Run one complete rehearsal with the team that will receive enquiries. Can they identify the service, understand the request and reply using the right address? A form is only useful if the business can handle what arrives.

Keep a compact launch checklist:

• Complete the form with touch and with the keyboard alone.
• Check a narrow screen, enlarged text and long answers.
• Make an error, correct it and confirm the message disappears.
• Go back a step and check that valid answers remain.
• Try a connection failure without losing the entered details.
• Confirm security checks still run and actual delivery works.

Common questions

Should every enquiry form have multiple steps?

No. Use steps when the questions form meaningful groups and the sequence helps the visitor. A short form may be clearer on one page. Test the full task rather than choosing a pattern because it looks polished.

Is this only an accessibility checklist?

The checklist includes accessibility practices, but also covers wording, layout and business follow-up. It is not a complete accessibility audit or a certification. A review should account for the whole page and how its controls work together.

Do we need a redesign to make these changes?

Many improvements can fit the current design system. Start with the questions, labels and error states, then assess the layout. If the wider journey also needs work, our branding and UI/UX service can help. You can send us the form you want reviewed, and use our website speed tutorial to check the page’s performance too.