CSSカスタマイズのレスポンシブ対応-メールフォームプロの解決方法

今回のシステム開発で取り扱うテーマは『メールフォームプロ(古いバージョン)でテキストエリアやテキストボックスがいくらCSSで指定してもサイズ変更できない場合の対処』の解決方法である。

mailform.js内にJavaScriptでフォーム部品の大きさ制御など指定する関数があったのでコメントアウトして回避
とする。

解決方法の補足として、メールフォームプロでCSSセレクタで調整できない場合、オリジナルのカスタマイズをJavaScriptで指定している場合がありJavaScriptをカスタマイズしないとスマホ表示などで期待するビジュアルに変更できない場合があるがあり、CSSカスタマイズについて今回のテーマの補足知識となります。

問題解決カテゴリーとしては、レスポンシブ対応についてのメールフォームプロに分類される。

情報について、検索エンジンでは下記の関連情報での組み合わせでインデックスされている。
スマホ メールフォーム 無料
レスポンシブ メールフォーム フリー
レスポンシブ メールフォーム テンプレート
responsive mailform
メールフォーム html
メールフォーム デザイン
メールフォーム php
mailformpro
php工房
フォームズ

Javascriptでメール送信フォームいろいろなチェック

JQueryなどで簡単にチェックできるライブラリも多いのですが、シンプルなJavascriptのメールフォームチェックについて。

通常の入力チェックから、メールアドレスの正誤チェック、ラジオボタンやチェックボックス、プルダウンメニューのselectタグやテキストエリアの文字数チェックなどについて記述します。

■値の入力チェック

空の場合はアラートポップアップウィンドウにエラーメッセージが表示される。
var flag;はチェック用の変数のいれもの。

if(document.mailform1.name.value == “”){
flag = 1;
message= message+’\n’+’名前を入力してください。’;
}

■メールアドレスの形式チェック

メールアドレスとして正しい書式かをチェックします

if(!document.mailform1.mail.value.match(/.+@.+\..+/)){
flag = 1;
message= message+’\n’+’メールアドレスは半角英数字で正しくご入力ください。’;
}

■セレクトボックスの選択チェック

プルダウンメニューのセレクトボックスの選択の有無をチェック

selectタグ内の選択されたオプションタグのvalueの値を取得して、正誤判定。

if(document.mailform1.selectbox1.options[document.mailform1.selectbox1.selectedIndex].value == “0”){
flag = 1;
message= message+’\n’+’セレクトボックスを選択してください。’;
}

■同一グループのラジオボタンの選択の有無をチェック

for(i = 0; i < document.mailform1.radiobox1.length; i ++){   if(document.mailform1.radiobox[i].checked){ flag = 1; } } ■テキストエリアの文字数チェック テキストエリアに入力された文字数をチェック if(document.mailform1.textarea1.value != ""){ txtarea = document.getElementById("textarea1").value; txtarealeng = txtarea.length; if(txtarealeng >100){
flag = 1;
message= message+’\n’+’文字数は100文字以内で入力してください。’;
}
}

■ポップアップアラートウィンドウの表示

flagに1が代入されたときに、アラートメッセージを表示させます。

if(flag){
window.alert(message);
return false;
}
else{
return true;
}

メールフォームプロCGIを導入してみる

無料のCGIで動くメールフォームプロを導入してみます。

メールフォームプロとは無償でSYNCK GRAPHICA社が提供するプログラムで、
以下からダウンロード可能です。

http://www.synck.com/contents/download/cgi-perl/mailformpro.html

1・メールフォームプログラムファイルをダウンロード、解凍します。

2・添付するPDFファイルの説明書を読みます

注意点としては、以下が記載されています。

[注意点]
CGIファイルを編集する際に
×メモ帳
×テキストエディット
×ホームページビルダー
×Adobe DreamWeaver
を使うのはゼッタイダメ!本プログラムは文字コード
UTF-8で作られており、上記のアプリケーションで編集する場合BOMという特殊
な目に見えないデータが加えられてしまい、サーバ上でプログラムが動作しなく
なります。
Windowsの場合はTeraPad
http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html
MacOSの場合は ミミカキエディット
http://www.mimikaki.net/
を使いUTF-8N(BOM無し)・改行コードLFで保存しましょう。

3・必要な環境の確認

[CGIが動くサーバかどうかを確認:以下マニュアル記載内容を参照]

CGIが動くサーバかどうか確認。

●sendmailが利用できるかどうか
●sendmailが利用できない場合はSMTPサーバを使うオプションもあります。

●Yahooジオプラスの場合
Yahooジオプラスの場合、コントロールパネルで許可されたメールアドレスしか
送信する権限を持ちません。
http://geocities.yahoo.co.jp/v/originalcgi/sendmail/
上記URLを参照の上、必ずメールアドレスの設定を行なってください。
また、ジオプラスの場合はconfig.cgiで以下の設定をしてください。
## メールの差出人を固定 (0:無効 / 1:固定)
$config{‘fixed’} = 1;
## 連続送信対応
$config{‘seek’} = 3;

4・使用するファイルの確認とアップロード

下記のファイルをすべてアップロード

[ファイル群]

動的ファイル群はCGIをcgi-binフォルダ内に設置しなければならないサーバで
はcgi-binフォルダにアップします。
多くの場合、変更の必要はありませんが、ご利用のWebサーバによってはPerlの
パスを変更する必要があります。Perlのパスとは「mailformpro.cgi」の1行目に
記述されている「#!/usr/bin/perl」という部分です。ご利用のWebサーバのFAQ
などをご覧になって、Perlのパスが異なる場合は変更しましょう。
Perlのパスを変更しよう。
パーミッションはそれぞれ記載のある方法で。

■mailformpro メールフォームプログラムのフォルダ 755
┠mailformpro.cgiプログラム本体 755
┠config.c gi設定ファイル(編集するファイル)
┠■dataデータ保存用フォルダ777
┠■add-onsアドオンフォルダ
┠■configs設定用フォルダ(モジュール用)
┗■librarysモジュール用フォルダ

■iplogsIPログ機能用フォルダ755
┠iplogs.cgiIPログ機能本体755
┗iplogs.dat.cgiIPログ機能用データファイル777

■example.htmlメールフォームサンプルHTMLファイル
■thanks.htmlサンクスページサンプルHTMLファイル

■mfp.staticsCSSや画像などの用のフォルダ
┠mailformpro.cssメールフォーム用CSSファイル
┠cssメールフォーム用CSSファイル
┠images画像フォルダ
┠add-onsアドオンフォルダ
┗audios音声データフォルダ

多くの場合、変更の必要はありませんが、ご利用のWebサーバによってはPerlの
パスを変更する必要があ ります。Perlのパスとは「mailformpro.cgi」の1行目に
記述されている「#!/usr/bin/perl」という部分です。ご利用のWebサーバのFAQ
などをご覧になって、Perlのパスが異なる場合は変更しましょう。

5・動作確認

アップロードさせたexample.htmlを表示させ、メールフォームページ内の上部に下記が表示されていればOKです。

===========================================
mailformpro.cgi は正常に動作しています。
[ CGI動作チェックモジュールを実行する ]
この表示はconfig.cgiの設定により消すことができます。っていうか消して。
===========================================

表示されない場合は、CGI動作の確認、ファイルとフォルダのパーミッション設定、必要ファイルやフォルダがきちんとアップロードされているか確認して、

/mailformpro/mailformpro.cgi

を表示させる。

// Mailform Pro Javascript Libraryは正常に動作しています。
と表示されているならOK。

6・設定ファイルconfig.cgi編集してみよう

まずはconfig.cgiをTerapadで開いて、

## フォームの送信先
push @mailto,’xx@xxx.com’;

#をとって送信先を指定します。

次に各種署名や、差出人などのテキストを調整し、example.htmlファイルをもとにフォーム部分を生成して、テスト。

問題がなければ、実際にフォームを組み込む位置にフォルダごと配置して完了。