[Pro] Contact Form on iPhone

Freeway
1

This site all looks fine, except for the Contact Form doesn’t look quite right on an iPhone (although have only looked at it via BrowserStack). The boxes seem fatter and too close together, whilst the comment box ends in a different, wrong, place - isn’t aligned with the above boxes on the right.

Any help would be gratefully received. Thanks.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

It seems to be that on iOS, the boxes have somehow acquired a border with rounded corners. Is there a way of overriding this?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Found a thread elsewhere suggesting:

input, textarea, select {
-webkit-appearance: none;
}

and:

input {
-webkit-appearance: none;
-webkit-border-radius:0;
border-radius:0;
}

But neither seem to work.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

I think it would look a lot better if all the elements were stacked on top of each other.

Name

Telephone

Email

Text

Then you can make it narrower so it easier viewed on iPhone in portrait.

If you look at it in desktop Safari and narrow the browser window you will see that you have to scroll left to right to see all the fields easily.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

It’s a fair point, David.

That said, would still be nice to know a fix, since I’m sure I’ll encounter it again in the future.

I have another iPhone webkit fix in the site; maybe the original one was conflicting with the second when I tried it?

Gavin

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

This is how a native form text element is presented in iOS.

tl;dr: Don’t go changing it, to try to please some design ethos of your own. (Music by Billy Joel.)

I recommend, whenever possible, never to alter the basic visual representation of a form field for any artistic reason. Doing so makes your page “special”, for sure, but it also reduces the usability of the form element AS A FORM ELEMENT.

Ugly as a Netscape 4 Windows text field may have been, seen in context, on Windows 3.1, it was a thing of normality. Make a super-cool-whiz-bang search field that looks like a #eee rounded-rectangle on an #efefef background, and I guarantee you won’t have to worry about the functionality of your search engine (because no one will ever find it, let alone use it).

People expect a text field to look like the other hundred text fields they have seen on the same device, and most people use only one device ever – let alone at a time – so they don’t care one bit if your search form looks the same on all platforms. Most people, if they thought about it at all, would consider that a BAD THING, because it’s guaranteed to look wrong in most cases.

Walter

On Jan 9, 2014, at 7:08 AM, gavtro wrote:

It seems to be that on iOS, the boxes have somehow acquired a border with rounded corners. Is there a way of overriding this?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Here’s a one-page example showing the same form differently depending on platform and orientation:

http://scripty.walterdavisstudio.com/native-form.html

Look at this on your iPhone in portrait and landscape orientations, then on the desktop. This is hand-coded, but very much in the Freeway layout style, so it won’t be hard to duplicate there.

Key things to note:

  1. Labels are first-class elements, you can style them to appear how you want them to, without any further container element to carry the styling.
  2. box-sizing: border-box (AKA the Box Sizing Action) is critical when trying to do flexible styling with form elements. No two browsers have the same padding or margin on a form element.
  3. What you see in the Freeway layout has (and should have) very little to do with what you see in a browser. Each browser has its own optimizations in place to make the form elements easier to use in that platform/browser combination. Respect the thousands of person-hours that went into these design decisions. Override them at your distinct peril!

Walter

On Jan 9, 2014, at 7:28 AM, DeltaDave wrote:

I think it would look a lot better if all the elements were stacked on top of each other.

Name

Telephone

Email

Text

Then you can make it narrower so it easier viewed on iPhone in portrait.

If you look at it in desktop Safari and narrow the browser window you will see that you have to scroll left to right to see all the fields easily.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options