新サイト(はてなブログ)

Ajaxを使ったクールなメールフォームを設置する方法

2009-01-12_2253.png 先日の裏クロスブリードの携帯対応化に引き続き、カッコイイメールフォームを実装してみました。
こんなのです。(実際に下のリンクよりメールが送信できます)
AjaxMail:Ajaxを活用したフリーPHPメールフォーム
特徴は

(1) ewebのPHPメールフォーム にカスタマイズを加え
(2) Kawa.netのAjaxZip2.0 住所検索機能を付加し
(3) AdobeSpry で項目をチェックできるようにし
(4) Lightview でインタラクティブなアクションにしました
ここでは住所は必要なかったので、その除去方法もふまえて書いていきます。
1.ダウンロード・解凍
まず上記サイトよりスクリプトをダウンロードします。
「ダウンロード(ver1.2)より」の部分です。設置予定のサイトの文字コードのものをダウンロードです。
文字コードがわからない場合はIEの場合、
サイトの空白で右クリック→エンコード
でチェックが入っているものがサイトの文字コードになります。
ダウンロードしたら即座に解凍です。
2.スクリプト設定
解凍後のフォルダ内の「sendmail.php」をテキストエディタで開きます。メモ帳は使ってはいけません。windowsであればUnEditorがオススメです。
$to = ・・・・送信元メールアドレス
$eles = ・・・必須項目チェック
基本的にはこの二つだけで良いかと思います。住所は必要なかったので必須項目からはずしています。
次にチェック項目のカスタマイズです。「check.js」をテキストエディタで開きます。
emailを任意入力にしたかったので、3行目を削除しました。
設定はこれだけです。
3.項目のカスタマイズ
ここでは郵便番号と住所を削除したいので、「ajaxmail/index.html」を編集します。
34行目~40行目の郵便番号と住所の記述を削除です。これだけ。
入力項目を増やしたい場合は
<p id="checkText3">
などを増やして項目を作ります。
4.アップロード
FTPソフトで設定済みファイルをアップロードします。sample.phpは必要ないのでアップロードしなくても良いです。PHPはパーミッションとか気にしないでいいのが便利ですね。
ここではホームの下にそのままアップロードしたものとします。CSSやjsフォルダが既に存在する場合は注意が必要です。
5.html内編集(スクリプト宣言)
設置したいhtmlの編集を行います。headタグの中、bodyタグの上です。。movabletypeやwordpressであれば、ヘッダー(header)の部分になるかと思います。以下のスクリプトを追加します。
<link rel="stylesheet" type="text/css" href="http://xxx.com/css/lightview.css" />

<script type="text/javascript" src="http://xxx.com/js/protoculous-effects-packer.js"></script>

<script type="text/javascript" src="http://xxx.com/js/lightview.js"></script>
大体こんなカンジですね。「xxx.com」の部分をお使いのアドレスに変更するといいと思います。初めての方は大体このあたりでつまずくんですよね。なかなかうまく説明できないです。
6.メールフォーム呼び出しリンク(ボタン)設置
ここまで来たらあと少しです。
<a href=’http://xxx.com/ajaxmail/index.html’ rel=’iframe’ title=’メール送信システム :: 当サイトに関するご意見ご感想、面白ネタの投稿を心からお待ちしております。<br />なお、投稿内容に関してはサイト上に反映されることはありません。 :: width: 450, height: 450′ class=’lightview’ >メールフォーム</a>
こんなカンジで。テキトーに変更して見て下さい。「::」で区切られたテキストで、フォームの表示を制御します。
「(タイトル)::(文章)::(サイズ)」
サイズの部分、width、heightはフォームの幅、高さです。
また、リンクではなくボタン(風)にしたい場合のボタン画像素材をのせておきます。imgタグで差し込んで使ってください。
ちなみに、僕が改良したindex.htmlをおいておきます。
ajaxmailカスタマイズファイル(ZIP形式)
これで完了です。
メールフォームからいつでも僕に連絡が取れますよ(ニヤケながら