What Are My Options

Hi, i am almost finished designing & coding a new website and i have noticed one small issue...

I have several different buttons that load different js overlays, which pop up and allow users to enter and update certain details - e.g - sign in form & feedback form etc... - so when a user clicks the sign in button or the feedback button, a small js overlay pops into the middle of the screen so that the user can complete the sign in form / feedback form.

This all works fine on all browsers, however it is not ideal for smartphones (iphone and android) and i envisage a lot of my users visiting my site from mobile devices.

The main reason i have used js overlays, is to keep the user on the same page - e.g - so when they go to sign in or leave feedback, they can do so from the same page, instead of having to bring the user to a new page. The main reason i need to change from these js overlays, is because when a user views it on an iphone, the overlays loose focus when a user clicks into a text field (i have done a lot of research on this and everyone seems to agree that i need to drop the,)

(please do not advise on building a separate mobile site or separate code for mobile devices... for now i just want a method / interface that works well across all browsers / platforms)

Here is an example of what i am currently using (click the login button (top left)) - http://soundcloud.com
Here is what i am thinking i might need to use (click the the account login button (top right)) - http://www.letshost.ie


What is the best user interface to use on a website, so that when a user clicks a button a small form displays allowing them to input data, which allows them to stay on the current page

Thanks for reading all of this :)
Who is Participating?
Instead of using overlays include your forms code into your pages design and hide it until users click the button. When form is submitted hide it again.
oo7mlAuthor Commented:
Ok, i think this is probably the best option, i will look for a script on http://codecanyon.net - do you know what i should be searching for, thanks...
The worst part here is that you'll probably need to adjust your whole design to make the forms to "blend gracefully" into the rest of the page.

If you can make that design changes you just need to show and hide them through CSS or, if you use jQuery just by using .show() and .hide()
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.