How can I make a booking form both PC and mobile compatible?

peter_act · 16th Sep 2012, 12:54 AM

If you go to the site I'm in the process of building - restaurants in Canberra, and go to the "Make a booking" page, you'll see quite a nice looking booking form - it's just a Wordpress plugin.

This works fine on a PC, just type in your details and off you go.

However, on a mobile phone of course you can't type in your details.
So...........what makes the keyboard come up on a mobile phone when you tap the entry field?

I've got a couple of scripts from Quentin (thanks), which work very well, but they are a bit plain, I want one I can customise with colour.

iaeo · 16th Sep 2012, 01:47 AM

Well firstly, congrats on the mobile site- looks really nice

Secondly, it appears to work just fine. I browsed to the URL on my iPhone, tapped a text field, and the keyboard came right up. Just so you know, this is a native feature of a smartphone, not something that's built into the website itself. Don't feel bad though, because I was asking myself the exact same question when I was first getting into mobile development.

If there's a particular device on which the keyboard isn't coming up, post the device and OS version and I'll see what I can do.

peter_act · 16th Sep 2012, 06:12 PM

Originally Posted by iaeo

Just so you know, this is a native feature of a smartphone, not something that's built into the website itself.

Thanks - I never realised that!

John Ayling · 16th Sep 2012, 06:15 PM

Another thing that you should know is that if you use HTML5 in your fields, then the type of keyboard that pops up will be different on certain phones.

For example, if you use <input type="email' ..... instead of <input type="text".... then you should get a keyboard popping up with an '@' symbol in it.

zoro · 16th Sep 2012, 06:26 PM

Originally Posted by peter_act

If you go to the site I'm in the process of building - restaurants in Canberra, and go to the "Make a booking" page, you'll see quite a nice looking booking form - it's just a Wordpress plugin.

This works fine on a PC, just type in your details and off you go.

However, on a mobile phone of course you can't type in your details.
So...........what makes the keyboard come up on a mobile phone when you tap the entry field?

I've got a couple of scripts from Quentin (thanks), which work very well, but they are a bit plain, I want one I can customise with colour.

Your mobile site looks great. The keyboard of my Samsung Galaxy came up ok when I tapped.
BTW, if you don't mind me asking, which WP Theme do you use to build all your sites with?

peter_act · 16th Sep 2012, 09:30 PM

Originally Posted by zoro

Your mobile site looks great.
BTW, if you don't mind me asking, which WP Theme do you use to build all your sites with?

Truth is John I chop and change, depending on what side of the bed I got out on!
I tend to toss up between Quentin's (Cheer Chick Charlie) - that was a freebee I did for someone I met at a business fuction, and Neilb's (Email Marketing - Mobile Marketing Landing Page)

However, even though I tend to predominantly use those two, I sometimes steal logos and icons from Kevin Koop's and our NSW mate Will's WSO's, which I also bought.

I don't particularly like building mobile site in Wordpress.

That particular restaurant site you were looking at is just a template, almost straight out of the box. All I've done so far is add a "Canberra restaurant" logo up the top, and even that was just a cheap and nasty first effort to see how the theme options worked. It needs more width, I'll change the image size with Photoshop later, and customise the site a bit more also - at the moment it's just a demo to show people.

The mobile version you looked at, I haven't done anything with it at all - it's an inbuilt feature of the Tasty Place theme from Peter Beattie and Jamie (gogetta) Garside.

Hope this helps

16th Sep 2012, 12:54 AM	#1
peter_act HyperActive Warrior War Room Member Join Date: 2003 Location: Gold Coast, Queensland, Australia Posts: 361 Thanks: 21 Thanked 150 Times in 98 Posts	How can I make a booking form both PC and mobile compatible? Share on: If you go to the site I'm in the process of building - restaurants in Canberra, and go to the "Make a booking" page, you'll see quite a nice looking booking form - it's just a Wordpress plugin. This works fine on a PC, just type in your details and off you go. However, on a mobile phone of course you can't type in your details. So...........what makes the keyboard come up on a mobile phone when you tap the entry field? I've got a couple of scripts from Quentin (thanks), which work very well, but they are a bit plain, I want one I can customise with colour.
	Cheap websites for small businesses: Affordable mobile websites Get a free autoresponder here: Money Making Opportunities

16th Sep 2012, 01:47 AM	#2
iaeo Mobile Developer Join Date: 2012 Location: Huntsville, AL Posts: 48 Thanks: 9 Thanked 5 Times in 5 Posts	Re: How can I make a booking form both PC and mobile compatible? Share on: Well firstly, congrats on the mobile site- looks really nice Secondly, it appears to work just fine. I browsed to the URL on my iPhone, tapped a text field, and the keyboard came right up. Just so you know, this is a native feature of a smartphone, not something that's built into the website itself. Don't feel bad though, because I was asking myself the exact same question when I was first getting into mobile development. If there's a particular device on which the keyboard isn't coming up, post the device and OS version and I'll see what I can do.
	Javascript/jQuery \| Java (Android) \| PHP \| HTML5 \| CSS3 \| Ruby on Rails Want a website, native Android app, or web app? Talk to me. http://lastingwebdesign.com

16th Sep 2012, 06:15 PM	#4
John Ayling HyperActive Warrior War Room Member Join Date: 2009 Location: Australia Posts: 225 Thanks: 42 Thanked 48 Times in 37 Posts	Re: How can I make a booking form both PC and mobile compatible? Share on: Another thing that you should know is that if you use HTML5 in your fields, then the type of keyboard that pops up will be different on certain phones. For example, if you use <input type="email' ..... instead of <input type="text".... then you should get a keyboard popping up with an '@' symbol in it.
	Software Marketing & Licensing System for WordPress Plugins, Themes & .NET Software >> 72 Hour Special <<