サイト内検索  

フルCSSテンプレート対応 メールフォーム(PHP版)

特徴

見本のページはこちらから。

PHPファイルはこちらから。
解凍すると、configure.php と mailform.php 2つのファイルがあるので、プロフェッショナルCSSテンプレートを使って作っているファイルにコピーする。

環境

PHP5以上、sendmailが使えること

対応テンプレート

カスタマイズ(HTML)

入力チェック用JavaScript埋め込み

以下のJavaScriptを</head>の前に入れる

<script type="text/javascript">
function messageCheck(){
//お問い合わせ内容チェック
var val= document.contactform.message.value;
if (val.length == 0){
alert("お問い合わせ内容は必須入力です");
return 1;
}
return 0;
}

//名前部分チェック
function nameCheck(){
var val = document.contactform.name.value;
if (val.length == 0){
alert("名前は必須入力です");
return 1;
}
return 0;
} 

//カナ部分チェック
function kanaCheck(){
var val= document.contactform.kana.value;
if (val.length == 0){
alert("カナは必須入力です");
return 1;
}
if (val.match( /[^ァ-ン \s]+/ )){
alert("全角カタカナで入力してください");
return 1;
}
return 0;
}

  //メールアドレスチェック
function emailCheck(){
var val= document.contactform.email.value;
if (val.length == 0){
alert("メールアドレスは必須入力です");
return 1;
}
return 0;

if (!val.match( /^([a-z0-9_\.\-])+@([a-z0-9_\.\-])+/ )) {
alert("メールアドレスを確認してください");
return 1;
}
return 0;
}

//電話番号チェック
function telCheck(){
var val= document.contactform.tel.value;
if (val.length == 0){
alert("電話番号は必須入力です");
return 1;
}

val = val.replace("-","");
if (!val.match( /[0-9]+/ )){
alert("電話番号は半角で入力してください");
return 1;
}
return 0;
} 

//FAX番号チェック
function faxCheck(){
var val= document.contactform.fax.value;
if (val.length != 0){
val = val.replace("-","");
if (!val.match( /[0-9]+/ )){
alert("FAX番号は半角で入力してください");
return 1;
}
return 0;
}
return 0;
}


function FormCheck(){
var check = 0;
check += messageCheck();
check += nameCheck();
check += kanaCheck();
check += emailCheck();
check += telCheck();
check += faxCheck();

if( check > 0 ) {
return false;
}
return check;
}

</script>

フォームをカスタマイズ

1.FORMのプロパティで、アクションの部分を mailform.php と入力、メソッドは Postに変更して、名前の部分に contactform と入力して、「OK」ボタンをクリック

2.お問い合わせ内容の部分は、複数行テキスト領域のプロパティを開いて、「イベント」ボタンをクリック。

ここでは、フォーカスが離れたときに、チェックを行うので、イベントは OnBlur を選択。スクリプトの部分にmessageCheck(); と入力して、「登録」をクリックした後、「OK」ボタン。

そのほかの項目も、それぞれの部分の1行テキストのプロパティを開き、項目の内容に合わせてイベントを追加する

名前  nameCheck(); 
カナ kanaCheck();
メールアドレス emailCheck();
電話番号  telCheck();
FAX  faxCheck(); 

送信ボタンをクリックした後にもチェックを行うので、プッシュボタンの属性で、イベントをクリック。

ここでは、送信ボタンがクリックされたときに、再度チェックする。イベントは、OnClickを選び、
スクリプトの部分は、 return FormCheck(); と入力して、「登録」ボタンをクリックした後、OKボタンをクリックする。

PHP設定ファイル(configure.php)の設定

設定ファイルで設定するべき内容は、

となる。メールのイントロ部分やフッターで改行がほしい場合には \n を入れるとよい。

お問い合わせ完了ページ

これは用意されていないので、同じテンプレートを使って作っておこう。

送られたメールのサンプル

お問い合わせ情報は以下のようになります。

お名前:ふーみん
フリガナ:フーミン
メールアドレス:fuming@hpbuilder.ne.net
電話番号:123-1234-4567
FAX番号:
お問い合わせ内容:問い合わせのテストです


−−−−−−−−−−−−−−−−−−−−
会社名
連絡先メールアドレスorURL
連絡先電話番号
−−−−−−−−−−−−−−−−−−−−

CGIモードで動作させるには?

レンタルサーバーでCGIモードを使っている場合、パーミッションの変更が必要になります。

PHPファイルが置かれているフォルダのパーミッションは705、PHPファイルのパーミッション(アクセス権)はすべて705にしてください。

パーミッションの変更は付属のFTPツールで可能です。→FTPツールの使い方を読む

上記対策を取った上で、まだ動作しない場合は、PHPファイルに<? php より前、すなわち 一番最初の行に、

#! /usr/local/bin/php

といった、PHPへのパスを記述する必要があります。(詳細は、レンタルサーバー側の説明を読みましょう。)