Squarespace form not working on mobile: keyboard

On a laptop, the field you are typing into is always in view. On a phone, the keyboard rises from the bottom and takes a large part of the screen, and the page has to scroll the focused field above it. If the form does not do that, the field sits behind the keyboard, and the visitor cannot see what they have typed. Some phone browsers also zoom in on a small text field, and the zoom can push the send button off the screen. Each of these looks like a broken form, and none of them shows up in a laptop test.

• Tap the first field on a phone. Does the page scroll it above the keyboard?
• Type a full phone number with spaces and dashes. Does the form accept it?
• Let the phone autofill your name and address. Does a field then reject the value?
• Tap the send button with the keyboard still open. Is the button hidden under it?
• Turn the phone sideways. Does the form still fit, or does a field run off the edge?

Typing is where a phone form hides its problem. The keyboard covers the lower part of the screen, and a form that does not scroll the focused field leaves the visitor typing blind. The characters go in, but the field stays hidden. They tap around, guess, or close the keyboard to see what they wrote. Some then tap the next field, which the keyboard also covers, and leave without a single error message. Check this on a phone with the keyboard open, not from a screenshot of the form with no keyboard.

A screenshot taken with no keyboard shows every field in place, so it proves nothing here. Open the page in a private window, tap the first field, and watch whether the page moves. Then tap each field in turn, including the last one above the send button. The field you can see is the one that works, and the field behind the keyboard is the one to fix.

Phones fill forms for the visitor. Autofill puts a saved name, address or phone number into the fields, sometimes in a format the form does not expect, such as a country code in front of the number. A form that checks the phone field against one narrow rule, like digits only, rejects a number the visitor typed correctly. The visitor sees a red message on a field they did not touch, and no clue which value to change. Postal code and date fields can fail the same way.

Check each rule with a value a real visitor would type. Use a number with a space in it, another with a plus sign and a country code, and one that the phone's autofill fills in for you. Write down which ones pass. A field that accepts only bare digits is a rule to loosen, not a visitor to blame.

The two faults look alike on a laptop, but the phone shows the difference. If the field you typed into is hidden while the keyboard is up, the cause is the keyboard. If the field is visible and shows a red message next to a value you know is correct, the cause is the rule. If the send button is missing from the screen while the keyboard is open, the cause is the layout. Write which of the three you saw beside each field, then fix them in that order, since a hidden field makes every later check meaningless.

A new font size, a cookie banner or a layout change can bring the keyboard fault back, and a new autofill habit can surface a rule fault nobody saw before. Rerun the same simulated visitors on phone browsers after each of those edits, using the same list of values, so each run compares like with like. Try at least one iOS phone and one Android phone before you call it fixed, since the two handle keyboards differently.