[Terry Jett]

Greetz!

Racking my ole brain out and know (hoping) there is a simple solution to my problem. Searched Google and even here without results.

When using email opt-in forms (like getresponse / aweber) on mobile devices and user fills out their name in first field, how do you make the "Next" button appear and not the "Go" on users mobile keyboard?

"Go" button should appear when user gets to the email field of course, but not when filling out the name field.

Anyone know how to make this happen?

First Name, "Next" button appears and user is taken to the email field, then the "Go" button appears... Have seen it but for life can find example or code.

Thanks in advance,

Terry

[JimDucharme]

Hi Terry,

I don't have the general solution ( I looked around but no luck), but if you are a GetResponse user, I can speak diret to our mobile marketing dev team about this for you and get you the answer specific to GR. Drop me a PM and let me know.

Regards,
jim

[Terry Jett]

Thanks Jim, PM sent.

There is a solution for all forms in general. Some time back I saw one and it used some type of number tag, but cannot find it now.

Got a form for a school soccer team want to use on. Parents subscribe to get updates, news and schedules.

[Terry Jett]

Originally Posted by dhap1

OK.
Thank you.

This is SPAM? Or post count increase?

[John Ayling]

You might want to check out the HTML5 specification for input fields.

Basically there are now specific input type fields you can use that affect some device keyboard screens that pop up.

So instead of

<input type="text" name="email" />

you can put

<input type="email" name="email"/>

Use 'number' for phone numbers.

The other thing that you should use is

<label for="fieldName">Field</label>

The closer you can get to the HTML5 spec, the more likely certain devices are going to support functionality such as 'Next'

[WillR]

John is correct but that still doesn't transition the user from one field to the next. I know on a regular desktop PC you push the 'TAB' button to toggle from one field to the next, does that not work on mobile devices? I've never tried.

[Terry Jett]

Thanks John! That is very good advice. I am currently enrolled in a HTML5 course and your input is right on.

Hey Will, always nice to hear from you. The tab does work on my mobile for the fields. But trying to get the "Next" button to appear.

Turning out to be a little harder than expected, but have learned a lot

Also have been playing with:

$('[name="name"]').focusin(function() {
  $('#next-button').show();
});

Mainly attempting to make the filling of opt-in forms fool proof.

Thanks to all for the valued input!

[Jay Moreno]

@terry what john mentions is extremely useful when creating forms for mobile, however that alone wont help what you are trying to do.

one thing i would suggest is you go button from submitting the form is to disable the submit function until all the other required feeds are completed, every form is different but basically you would need to use something like javascript or jquery to validate that all the fields are properly populated before the form can be submitted... hope that makes sense.

i just did a little research for you and noticed that on android devices and ios devices they do actually have the ability to go to the next field built in, i actually wasnt that aware of it till i looked more closely... like will mentioned there is a tab button on the android that makes you jump to the next field, on the iphone there should be a next and previous button at the top of the keyboard... if you deactive the submit button as i mentioned about you should be fine, i guess it comes down to user awareness of these features whether they use them or not...

Anyhow i hope the above makes sense - also to expand on what John was talking about this link may also be useful to you....

HTML5 tests - inputs (mobile)

Please let me know how you get on.

Cheers,

Jay

** Screenshot showing next button at top of iOS device keyboard...

[Terry Jett]

@Jay, thanks dude! That is very useful information. I appreciate you taking the time to find out about it.

Something I have discovered in the past few months:

1) Many, many people hit the "Go" button after entering their name on opt-in forms. This results in them getting an error page. Some then throw their hands in air and move on. The solution I have been using is email field only, but not what I really want.

2) Smartphones are finding their way into older peoples pockets. Some of them have never really used and are easily confused. But something to remember is the "silver" crowd have money in their pockets...

Trying to make opt-in easier for all.

Blows we away that autoreponder services are moving so slow into mobile. For the life of me I do not understand why many of them do not at least have their error pages in responsive format. Most look like crap on mobile devices.

[John Ayling]

Thanks Jay - really handy to know.

Regarding people hitting the 'Go' button and getting an ugly message from an autoresponder.

I've found that the best way around this is to take control of the form validation, using jQuery validate plugin, and then do your own form submit to the autoresponder.

In this way you can show a nice 'thank you' message while still on the mobile site, while the email address gets added to the subcriber list, welcome message sent, etc...

[Terry Jett]

Good advice John.

You said "I've found that the best way around this is to take control of the form validation, using jQuery validate plugin, and then do your own form submit to the autoresponder."

Do you know of a site with example for this? Sounds like something I need to learn.

[Jay Moreno]

Originally Posted by Terry Jett

Good advice John.

You said "I've found that the best way around this is to take control of the form validation, using jQuery validate plugin, and then do your own form submit to the autoresponder."

Do you know of a site with example for this? Sounds like something I need to learn.

If your not already using jquery mobile then i would probably look at doing it using just regular javascript, the reason being you dont force the mobile user to download the jquery library....

i did a little searching and found this...
Simple JavaScript Form Validation | Devin R. Olsen Web Developer

the example is extremely simple and only checks to see if the fields are empty or not, it should only take minimal customization of your form... basically add following to the first line of your form tag

onsubmit="return validate();"

and then adding the javascript but customize it so it matches up with the names of your form fields and also the name of your actual form.

hth

jay

[Terry Jett]

Thanks Jay, great input as usual.

Most of my mobile site are based on the jquery mobile. But for simple opt-in page not so. The simple javascript is a very possible solution for single page opt-ins.

Still interested in the jquery method John spoke of though.

[Jay Moreno]

Originally Posted by Terry Jett

Thanks Jay, great input as usual.

Most of my mobile site are based on the jquery mobile. But for simple opt-in page not so. The simple javascript is a very possible solution for single page opt-ins.

Still interested in the jquery method John spoke of though.

Hi Terry,

Was just looking more into the jquery side of things... the absolute simplest jquery solution i could find is this one...

MagicEdit - Easy Form Validation with jQuery

All you need to do is connect the jquerys, do a simple modify to the field class and add the jquery snippet...

this is the actual jquery page for it - but for anyone non technical you may want to give this a miss! lol

Plugins/Validation - jQuery JavaScript Library

HTH

Jay

[Terry Jett]

That is a simple one Jay, thanks!

My head is tired from trying to find way to make the "Next" button appear on android/iphones, it is spinning, lol.

But, I shall not give up!

Thanks again man.

[John Ayling]

I have used this validation plugin for large commercial sites and also now for mobile sites.
bassistance.de » jQuery plugin: Validation

Here's code examples of someone else using it.
Web Dev .NET: jQuery Mobile Form Validation

I wouldn't avoid jQuery because the user is forced to download a javascript library by the way.
Firstly the user only has to do this once, and from then one it is cached for other page requests. Also you can actually speed up subsequent page requests by prefetching them in between the normal page requests.

Sorry if this is a bit too technical, but at least you can understand the capabilities being made available by such an awesome mobile framework.

[Jay Moreno]

Originally Posted by John Ayling

I have used this validation plugin for large commercial sites and also now for mobile sites.
bassistance.de » jQuery plugin: Validation

Here's code examples of someone else using it.
Web Dev .NET: jQuery Mobile Form Validation

I wouldn't avoid jQuery because the user is forced to download a javascript library by the way.
Firstly the user only has to do this once, and from then one it is cached for other page requests. Also you can actually speed up subsequent page requests by prefetching them in between the normal page requests.

Sorry if this is a bit too technical, but at least you can understand the capabilities being made available by such an awesome mobile framework.

what i was getting at was that to me it would be overkill if your not using it in the rest of your mobile site already - especially when its something that can be done with a few lines of code, if you are using it already then it would be a no brainer

[WillR]

Originally Posted by Jay Moreno

Gotcha.

I don't use my IOS devices enough, obviously. I had completely forgotten about that button.

[Terry Jett]

next button also on many android devices. not just apple.

but i have discovered not all android devices seem to have and all depends on keyboard. on one of my tablets (rooted), can see the next button on some forms. but i use my atrix2 and next does not appear - instead there is a ->| button (right arrow with vertical line).

so not sure this is worth spending much time on. but i sure have learned a lot

[Jay Moreno]

Originally Posted by Terry Jett

instead there is a ->| button (right arrow with vertical line).

so not sure this is worth spending much time on. but i sure have learned a lot

@terry i believe that to be the universal symbol for the Tab key... personally i would just have it so the form doesn't submit unless all the fields are completed (that's the links to the different solutions i posted earlier), there isn't a common solution for what you are trying to do and think it maybe coded into the actual device firmware or operating system which you wouldn't normally have much or any control over from a web point of view...

glad you learned some valuable info along the way though!

cheers

jay

[Terry Jett]

Thanks Jay. Yes, tab key.

After spending days on this, I have to agree that some of the solution presented here will be a better route.

Had some luck with the code below and the jquery library, but only with some phone / tablet models.

  <script>
$('[name="name"]').focusin(function() {
  $('#next-button').show();
});
   </script>

[Jay Moreno]

Originally Posted by Terry Jett

Thanks Jay. Yes, tab key.

After spending days on this, I have to agree that some of the solution presented here will be a better route.

Had some luck with the code below and the jquery library, but only with some phone / tablet models.

  <script>
$('[name="name"]').focusin(function() {
  $('#next-button').show();
});
   </script>

thanks terry ill take a look at that snippet too see if i can do anything with it too