MS Access Tips/Sample and VBA and Blog customize etc...

メールフォームのポップアップ表示

このブログのタイトル下のナビゲーションの「CONTACT ME」をクリックするメイルフォームがポップアップします。

これもSiteMapポップアップ表示 初級向け導入法 と同様に jQuery Fancybox で表示しています。メールフォームは FC2メールフォームを利用しています。

今回はこの導入法の紹介です。

難易度:

メールフォームの作成

まず、メールフォームを作成する必要がありますが、無料レンタルフォームを探せばいろいろあるので気に入ったのを使えばいいでしょう。当ブログではFC2メールフォーム を使うことにしました。

簡単に設定できるし、機能的にも十分です。オリジナルのCSSファイルを適用させることもできるので、デザインも自分のブログに合わせたものにカスタマイズできます。

ユーザー登録して、フォームを新規作成するとURLが発行されるので、そのURLリンクをブログに設置するだけで、メールフォームへジャンプします。

ちなみに、当ブログのカスタマイズしたメールフォーム用スタイルシートは下記のコードです。

jQuery FancyBox の導入

SiteMapポップアップ表示 初級向け導入法 を参照して jQuery FancyBox のスクリプトファイルをアップロードしてください。

テンプレートのHTMLの <head> ~ </head> 内に下記のコードを記述します。jQuery FancyBoxを既に導入済みの場合は、前半の3行は不必要です。*********はファイルアップロード先のパスにしてください

このコードは、ポップアップウィンドウの幅は670px固定、高さがウェブプラウザのクライアントの高さより80px小さくて最大630pxの例です。

あとは、メールフォームへのリンクに、 class="iframe" id="mail" を追加するだけです。

拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/200-c0b49aa5
該当の記事は見つかりませんでした。