Wednesday, October 28, 2009

Form in tooltip with text linked send button

While continuing to work on gergomatis.com I needed to find a simple contact form, something that fits the minimalist design of the site. I was spending a very long time with searching and I thought this was only possible with JavaScript [one of the simplest examples: Help Writing An Html Code (onclick Open Something)], but then I found exactly what I needed. No JavaScript, no complicated coding, a simple CSS rule is enough: The thread a Form in Tooltip - is it possible? suggests another link, CSS Bubble Tooltips that is using the a:hover attribute to display tooltips that on the other hand can be filled in with any html code such as an e-mail form for example - really just what I was looking for!

Another thing i needed in the same form, to keep that simple and minimalist design I talked about, was to transform the send button into a simple text link. Well, nothing is easier than that: you just have to set the input tag's border to 0 and set its background color to match the page's (you may set a style class instead in the head section of your page and add the class to the input tag, just like you do it with your divs). Additionally, to make sure your users know that it's a link, you'll have to turn your cursor into a pointer. Guess what, there's a css attribute for that too! I remember how amazed I was when I first realized that actually everything in the input tag can be edited just the same way as any tag that allows using styles. :)

Let me put an example css code here for you:
(click in the box to highlight the code for copy)

You'll find a more detailed article only talking about how to make a submit button work like a link here.

The end restult, once again, can be found on Gergo Matis's website in the bottom left hand corner by hovering over the 'contact' link. Neat, ain't it?

No comments:

Post a Comment

Dear legitimate commenters, please post your comments below. I'd be happy to receive your feedback; helps me a lot improving, or getting reassurance that I'm doing something really great here.

IMPORTANT! A note to commenters planning on advertising their business in comments: please be informed that I'm NOT going to post your comments but will ALWAYS mark them as SPAM.