Jquery Magical Contact Form

iPhoneの画像を利用したとても個性的なアニメーションコンタクトフォームを紹介します。

「Magical Contact Form」と名付けられたユニークな効果のあるフォームです。なぜかiPhoneにカードが収められて飛んでいきます。テキストを入力しているときのアニメーションもユニークです。

画像を変更するだけでも容易にカスタマイズできますので、初心者のかたでもデザイン変更が簡単にできます。

サンプルを作ってみました。サンプルといっても画像を変更しただけです。

→ iPhoneの画像を利用したユニークなコンタクトフォーム「Jquery Magical Contact Form」

※実際に送信はされません。

過去の記事で、色々なモバイル端末のPSDファイルを紹介しています。利用すれば面白いフォームが出来ると思います。
iPhone、iPadやMacなどのディスプレイを集めたPhotoshop(フォトショップ)端末ディスプレイPSD無料素材集

もちろん敢えてiPhoneなどの画像にこだわらなくても、自分で封筒の画像を用意するなど発想次第でユニークなデザインが実現出来ると思います。


【設置方法】
まずはこちらのJquery Magical Contact Formのサイトからファイルを一式ダウンロードします。

Head部分にcssを設定します。

Body部分一番下にJavaScriptを設定します。

Body部分にフォームの記述をします。

変更できる画像は、ダウンロードしてきたファイル内にあるimagesフォルダー内にある
● envelope-ft.png ・・・ 送信前のiPhone画像
● letter.png ・・・ 入力フォーム部分の背景画像
● bg.jpeg ・・・ 背景画像

stampフォルダ内にある
● stamp.png ・・・ 送信後のiPhone画像
となっています。

画像のファイル名や大きさなどを変更した場合はcssファイル内にある対応する箇所を変更して下さい。

印象が強いので記憶に残るなコンタクトフォームになっていますね。
サイトの雰囲気に合いそうならぜひ導入されてみてはいかがでしょうか?

今回はダウンロードしたHTMLファイルをそのまま利用できますので、サンプルソースは省略します。

この記事と関連してると思われる記事: