CROSSBREED クロスブリード！

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

ここでは住所は必要なかったので、その除去方法もふまえて書いていきます。
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）の部分になるかと思います。以下のスクリプトを追加します。
大体こんなカンジですね。「xxx.com」の部分をお使いのアドレスに変更するといいと思います。初めての方は大体このあたりでつまずくんですよね。なかなかうまく説明できないです。
6.メールフォーム呼び出しリンク（ボタン）設置
ここまで来たらあと少しです。
こんなカンジで。テキトーに変更して見て下さい。「::」で区切られたテキストで、フォームの表示を制御します。
「（タイトル）::（文章）::（サイズ）」
サイズの部分、width、heightはフォームの幅、高さです。
また、リンクではなくボタン（風）にしたい場合のボタン画像素材をのせておきます。imgタグで差し込んで使ってください。
ちなみに、僕が改良したindex.htmlをおいておきます。
ajaxmailカスタマイズファイル(ZIP形式)
これで完了です。
メールフォームからいつでも僕に連絡が取れますよ（ニヤケながら

Popularity: 1% [?]

※このサイトはさくらインターネットのサーバを利用しています。