<p class="thumb"><img src="http://web-marketing.zako.org/wp-content/uploads/2009/06/visitorcontact.jpg" alt="クールなAjaxポップアップのお問い合わせフォーム作成サービス" title="クールなAjaxポップアップのお問い合わせフォーム作成サービス" width="514" height="204" class="alignnone size-full wp-image-6978" /></p><p>最近見かけるようになった、Ajaxでその場にポップアップするお問い合わせフォーム。なかなかカッコ良いですよね。</p><p>今回は、そんなお問い合わせフォームをカンタンに作成できるサービスをご紹介します。</p><!--more--><h3 class="header-label">クールなAjaxポップアップのお問い合わせフォーム作成サービス</h3><p>「<a class="web-site-link" href="http://www.visitorcontact.com/" onclick="window.open('http://www.visitorcontact.com/'); return false;">VisitorContact</a>」は、<strong>サイト上に「Contact」のバッジを表示し、Lightbox調でその場にポップアップ表示できる、CAPTHA認証付のシンプルなフォームを作成する</strong>サービスです。</p><h4 class="header-label">Ajaxポップアップフォーム</h4><p><img src="http://lh5.ggpht.com/_fRSz8mJZTZY/SkIGlEUKCTI/AAAAAAAAYjo/PzC4PacRSvM/s400/visitorcontact3.jpg" /><br />↑これが、「Contact」バッジをクリックして現れたAjaxポップアップフォーム。このページ左側にもバッジがあるので、お試しいただけます。</p><p><img src="http://lh6.ggpht.com/_fRSz8mJZTZY/SkIGlWy2GDI/AAAAAAAAYjs/J737sOjDHiY/s400/visitorcontact4.jpg" /><br />↑内容を入力して送信すると、このような画面になります。</p><p><img src="http://lh5.ggpht.com/_fRSz8mJZTZY/SkIGlpqMFPI/AAAAAAAAYjw/fRMyKNi75eQ/s400/visitorcontact5.jpg" /><br />↑こちらが運営者に送られてきたメール。送信者のIPアドレスと地域も表示されます。</p><p><img src="http://lh6.ggpht.com/_fRSz8mJZTZY/SkIK71XMP-I/AAAAAAAAYkE/f-teM2aiDrA/s400/visitorcontact8.jpg" /><br />↑日本語文字化けは残念ですが、後から送信先やボタンの色などを変更することも可能です。（タグの再設置不要）</p><h4 class="header-label">埋め込んだ問い合わせフォームサンプル</h4><iframe src="http://visitorcontact.com/embed/60" frameborder="0" scrolling="no" allowtransparency="true" width="300" height="340" style="height: 340px; width: 300px;"></iframe><p>↑このように埋め込むことも可能です。</p><h4 class="header-label">フォーム設置手順</h4><p><img src="http://lh3.ggpht.com/_fRSz8mJZTZY/SkIGl-nleDI/AAAAAAAAYj0/tiZgtDr7Tdk/s400/visitorcontact1.jpg" /><br />↑<a class="web-site-link" href="http://www.visitorcontact.com/signup" onclick="window.open('http://www.visitorcontact.com/signup'); return false;">Sign Up</a>のページを開き、登録を行います。</p><p><img src="http://lh4.ggpht.com/_fRSz8mJZTZY/SkIGmE_17ZI/AAAAAAAAYj4/mZHeWnIAgbw/s400/visitorcontact2.jpg" /><br />↑次のページで、フォームの名前やサイトURL、メールのあて先、そして住所を入力。<b>残念ながら日本語は文字化けします。</b></p><p><img src="http://lh4.ggpht.com/_fRSz8mJZTZY/SkIGmUBEDBI/AAAAAAAAYj8/esqJeBQRUZw/s400/visitorcontact6.jpg" /><br />↑自動返信機能もありますが、現段階ではどうやらうまく機能しない様子。下はバッジの色や表示場所を決める項目です。</p><p><img src="http://lh3.ggpht.com/_fRSz8mJZTZY/SkIGm43FBFI/AAAAAAAAYkA/_qs7FzHfUZQ/s400/visitorcontact7.jpg" /><br />↑１がバッジを表示し、Ajaxポップアップでフォームを表示するためのコード、 &lt;/body&gt; タグの直前に貼り付けます。 ２がサイトにフォームを埋め込むためのコードです。</p><p>興味のある方は<a class="web-site-link" href="http://www.visitorcontact.com/" onclick="window.open('http://www.visitorcontact.com/'); return false;">VisitorContact</a>へどうぞ。</p><p>運営側の管理のしやすさよりも、バッジで目立たせ、画面遷移なしに問い合わせ出来る利便性を重視したものですが、場合によってはその方がもしかしたら良いのかもしれませんよね。</p><p>Via：<a class="website-link" href="http://delicious.com/url/233e894a3ee5398ba43d449376ef2a9d" onclick="window.open('http://delicious.com/url/233e894a3ee5398ba43d449376ef2a9d'); return false;">delicious</a></p>