サイト内検索  

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

特徴

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

Perlファイルはこちらから。
解凍すると、以下のファイルが出てきます。

上記2つのファイルをCSSテンプレートを使って作っているファイルにコピー。
その後、mailform.cgiを開いて、初期設定を行い、ファイルをアップロードしてからパーミッションを755に変更。

環境

Perl5以上、sendmailが使えること

初期設定

mailform.cgiを開いて、1番最初の行をプロバイダで指定されているとおりに書き換える。
例:/usr/bin/perl となっている場合、
1行目は、#!/usr/bin/perl
となります。

その後、以下の5つをカスタマイズしておきます。

お問い合わせ完了ページ

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

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

(message)
問い合わせのテストです

改行もされているかチェックです。

(name)
ふーみん

(kana)
フーミン

(email)
fuming@hpbuilder.net

(tel)
000-1234-5678

(fax)
000-1234-5679

少し味気ないと思いますが、それをそのままお客様に返信するのでなければ問題無いと思います。

JavaScriptでの入力チェックに対応させる

JavaScript埋め込み

以下のスクリプトを</head>の前に入れるのですが、テンプレートに応じて使わない項目は消してください。

どのテンプレートで、どの項目を使っているかは、フルCSSテンプレート 補足説明 をお読みください。

<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 monthCheck(){
var val= document.contactform.month.value;
if (val.length == 0){
alert("月は必須入力です");
return 1;
}
if (val.match(1-12)){
alert("月は1から12です");
return 1;
}
return 0;
}

//日チェック
function dayCheck(){
var val= document.contactform.day.value;
if (val.length == 0){
alert("日は必須入力です");
return 1;
}
if (val.match(1-31)){
alert("月は1から31です");
return 1;
}
return 0;
}

//時刻チェック
function hourCheck(){
var val= document.contactform.hour.value;
if (val.length == 0){
alert("時間は必須入力です");
return 1;
}
if (val.match(0-24)){
alert("時間は0から24です");
return 1;
}
return 0;
}

//人数チェック
function personCheck(){
var val= document.contactform.person.value;
if (val.length == 0){
alert("人数は必須入力です");
return 1;
}
if (!val.match( [0-9] )){
alert("人数は1人以上でお願いします");
return 1;
}
return 0;
}

//室数チェック
function roomCheck(){
var val= document.contactform.room.value;
if (val.length == 0){
alert("室数は必須入力です");
return 1;
}
if (!val.match( [0-9] )){
alert("室数は1人以上でお願いします");
return 1;
}
return 0;
}

function FormCheck(){
var check = 0;
check += messageCheck();
check += nameCheck();
check += kanaCheck();
check += emailCheck();
check += telCheck();
check += faxCheck();
check += monthCheck();
check += dayCheck();
check += hourCheck();
check += personCheck();
check += roomCheck();

if( check > 0 ) {
return false;
}
return check;
}
</script>

フォームをカスタマイズ

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

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

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

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

monthCheck();
dayCheck();
時頃  hourCheck();
人数 personCheck(); 
名前  nameCheck(); 
カナ kanaCheck();
メールアドレス emailCheck();
電話番号  telCheck();
FAX  faxCheck(); 

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

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

飲食店・美容室のテンプレート使用時の注意

月・日・時ごろの部分に致命的なミスがあります。
フォームで何か値を取得するときに、name属性が同じ値になっていると、正しく値を取得できません。

以下のように項目と名前を変更してください。

 項目 名前 
month
day 
時ごろ hour 

変更の仕方は、該当する部分の1行テキストボックスのプロパティを開く→名前のところを変更する→OKボタンをクリック。