Mobile Form - Contact Us - Autofill Settings

[RassanGrant]

Vicky - Do you know if our form has the most up to date autofill technology in it? I want to ensure that we've done everything we can on the technical side to make sure mobile phone users have an easy time filling out our form. Let me know how we're looking and/or if you have ideas for improving it. Thanks!

[vleong2332]

Hi, @RassanGrant I just filled out the Contact Us form on mobile to test it out. Here are my initial thoughts:

• Majority of the fields were fine.
• I like that USA and Canada were on top of the country list. Do you get submission from outside of the US? If not, I may want to consider defaulting that field to USA.
• The country and postal code fields could be auto-filled based on user's location. I've never done it but I could look into it if you want.
• The phone field was required but there was no asterisk to indicate that.
• The checkboxes of what "I am interested in" could use a different styling for mobile since they're rather small and difficult to check.
• The quantity radio boxes could also be styled differently.
• The message text area could be left empty. Is that intentional?

Let me know if you want me to spend some time addressing any of these.

[RassanGrant]

Hey Vicky – Do you know if the autofill settings on our forms on as current as we can be? I want to make sure people can quickly and easily autofill their data.

• I think defaulting to the USA is a good idea
• Agree about the check boxes of what I am interest in – Want to take a stab at that?
• Same for the radio boxes for quantity
• Yep we are okay with the text area allowed to be empty
• Is it possible to lose the first name field, and have the Last name field just say “Name” for mobile only browsers? We do like to have separate first and last name fields for desktop, but I am trying to simplify and condense the form, so just wondering about that.

From: Vicky Leong notifications@github.com<mailto:notifications@github.com> Reply-To: "Norstone/norstone.github.io" reply@reply.github.com<mailto:reply@reply.github.com> Date: Monday, March 5, 2018 at 9:05 AM To: "Norstone/norstone.github.io" norstone.github.io@noreply.github.com<mailto:norstone.github.io@noreply.github.com> Cc: Rassan Grant Rassan@norstoneusa.com<mailto:Rassan@norstoneusa.com>, Mention mention@noreply.github.com<mailto:mention@noreply.github.com> Subject: Re: [Norstone/norstone.github.io] Mobile Form - Contact Us - Autofill Settings (#259)

Hi, @RassanGranthttps://github.com/rassangrant I just filled out the Contact Us form on mobile to test it out. Here are my initial thoughts:

• Majority of the fields were fine.
• I like that USA and Canada were on top of the country list. Do you get submission from outside of the US? If not, I may want to consider defaulting that field to USA.
• The country and postal code fields could be auto-filled based on user's location. I've never done it but I could look into it if you want.
• The phone field was required but there was no asterisk to indicate that.
• The checkboxes of what "I am interested in" could use a different styling for mobile since they're rather small and difficult to check.
• The quantity radio boxes could also be styled differently.
• The message text area could be left empty. Is that intentional?

Let me know if you want me to spend some time addressing any of these.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/Norstone/norstone.github.io/issues/259#issuecomment-370429106, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ARjj3QFXoNKxYAbqaaOKKKyV2rMruvOFks5tbUY7gaJpZM4SbKyZ.

[vleong2332]

@RassanGrant Is there any other form on the site? I browse the website but could only found the contact form.

As far as I know there are only contact and project registration forms and both have no autofill.

For the checkboxes and the radio buttons, I'm thinking of something simple: adjusting the layouts and the sizes. Is it okay if I spend 20-30 minutes on that?

For the name, how beneficial is it to have them as separate piece of data? I'm always leaning to "Full Name" by default for mobile and desktop.

[RassanGrant]

Hey Vicky -

Forms are on: Contact Us, How To Buy, and Project Registration. We do have forms on some old landing pages, like this onehttps://www.norstoneusa.com/natural-stone-veneer-solutions/, but that is not a part of the scope of this project.

As far as autofill is concerned – Do you know how to implement it?

You are approved to work on the check boxes and radios, thanks Vicky

From: Vicky Leong notifications@github.com<mailto:notifications@github.com> Reply-To: "Norstone/norstone.github.io" reply@reply.github.com<mailto:reply@reply.github.com> Date: Tuesday, March 6, 2018 at 9:19 PM To: "Norstone/norstone.github.io" norstone.github.io@noreply.github.com<mailto:norstone.github.io@noreply.github.com> Cc: Rassan Grant Rassan@norstoneusa.com<mailto:Rassan@norstoneusa.com>, Mention mention@noreply.github.com<mailto:mention@noreply.github.com> Subject: Re: [Norstone/norstone.github.io] Mobile Form - Contact Us - Autofill Settings (#259)

@RassanGranthttps://github.com/rassangrant Is there any other form on the site? I browse the website but could only found the contact form.

As far as I know there are only contact and project registration forms and both have no autofill.

For the checkboxes and the radio buttons, I'm thinking of something simple: adjusting the layouts and the sizes. Is it okay if I spend 20-30 minutes on that?

For the name, how beneficial is it to have them as separate piece of data? I'm always leaning to "Full Name" by default for mobile and desktop.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/Norstone/norstone.github.io/issues/259#issuecomment-370999561, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ARjj3ZIp90q5TPaG6skIjqsiBPsLHnkSks5tb0PMgaJpZM4SbKyZ.

[vleong2332]

@RassanGrant, I'll work on those radio buttons.

Could you clarify what you mean by autofill? I just want to make sure we're on the same page.

[RassanGrant]

Hi Vicky -

I am fairly certain this all boils down to labels, which may already be set up properly, but in any case I’m asking if you can review to ensure we are complying with the latest best practices. Here’s an older article covering labels: https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

Here is an article with more information, please scroll down to the section that says “Choose the best input type” and read on from there: https://developers.google.com/web/fundamentals/design-and-ux/input/forms/

Ultimately I’m looking for all data entries from mobile devices to be eligible for auto populating. Perhaps we are already optimized but wanted to check. Thanks!

From: Vicky Leong notifications@github.com<mailto:notifications@github.com> Reply-To: "Norstone/norstone.github.io" reply@reply.github.com<mailto:reply@reply.github.com> Date: Thursday, March 8, 2018 at 10:11 PM To: "Norstone/norstone.github.io" norstone.github.io@noreply.github.com<mailto:norstone.github.io@noreply.github.com> Cc: Rassan Grant Rassan@norstoneusa.com<mailto:Rassan@norstoneusa.com>, Mention mention@noreply.github.com<mailto:mention@noreply.github.com> Subject: Re: [Norstone/norstone.github.io] Mobile Form - Contact Us - Autofill Settings (#259)

@RassanGranthttps://github.com/rassangrant, I'll work on those radio buttons.

Could you clarify what you mean by autofill? I just want to make sure we're on the same page.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/Norstone/norstone.github.io/issues/259#issuecomment-371700068, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ARjj3VtV7xIA9hLDFpeZgd8lEAQLVC2gks5tcfLFgaJpZM4SbKyZ.

[vleong2332]

@RassanGrant Thank you for the articles. I watched Ido's tutorial on forms a while back. If you look at the open PR #260, you'll see that I put labels there so that user can click on the label to check the box instead on the actual box itself. Just a slight improvement on UX.

There are certainly other things in the form that I can re-examine in light of the articles you posted. Let me get back to you on that. In the mean time, why don't you check out the adjust-contact-form branch and see if you like the way I arrange the checkboxes and radio button?

[vleong2332]

@RassanGrant I put in a few things in the contact form:

• Native required flag on required input elements.
• autocomplete attributes on some input elements.
• Change the type on some input elements.

Because those features are for HTML5, users with modern web browsers that support it will get the benefit. Users that don't will have the experience as it is right now.

For the Autofill, users would have to have compatible browsers, enable the feature, and "teach" it how to autofill. https://www.computerhope.com/issues/ch001377.htm

[vleong2332]

I've been using the contact form as the prototype. Once you're happy, I'll apply the same things to the other forms.

[RassanGrant]

Thanks @vleong2332 - I went ahead and merged this, it looks great. Couple of quick questions:

1. Can we make the quantity field pull up the number pad like we do for the Phone field?
2. When the check boxes and radios are selected, can we make the selection color #1c778f so it matches the brand?
3. Is there a way to adjust the banana yellow background color that appears when the form has been autofilled? If so, I'd like to adjust it to something that fits within our theme, so either a lighter shade variation on #1c778f or #4fb1d5

Thanks, @vleong2332!

[vleong2332]

@RassanGrant

1. On my phone (chrome), the quantity field already pulled up a number pad like the phone one. Which phone and browser are you using?
2. The rendering of checkboxes and radio buttons are usually up to the browser. There's a workaround we can do, but they're not trivial. Basically, we hide the default checkbox and do our own implementation of it. I estimate 1-2 hours of work for it if you would like to have that.
3. There's a hack I know for this, but I haven't tried it in all the browsers. I estimate 30 mins - 1 hour for this one.

Let me know what you think.