無料WEB素材の配布とクリエーター作品展示 XTREC

SETTING

1. 先ず、/mfp/config.inc.phpを任意で設定します。※UTF対応のテキストエディタで開き、保存時はUTF-8(BOMなし)で保存してください。

   // mfp/までのサーバーパスを設定します。基本はこのままでOK.
   define("SYSTEM_ROOT", dirname(__FILE__) . ’/’);
   
   // 日付フォーマットの設定。
   define("DATE_FORMAT", 'Y年m月d日 H:i:s');
   
   //禁止語句を任意で設定します。複数の場合は半角カンマ(,)区切り。
   define("BAD_WORDS", '');
   
   //禁止ホストを任意で設定します。複数の場合は半角カンマ(,)区切り。
   define("BAD_HOST", '');
   

2. フォームの基本設定します。※必ずHTMLヘッダ出力前で設定してください。

   // 最初にファイルをインクルードします。'/mfp/config.inc.php'までのサーバーパス
   include(getcwd().'/mfp/config.inc.php');
   
   // 初期化
   $config = array();
   
   // メールフォームを設置するURLを設定します。
   $config['form_url'] = 'http://example.com/mail/';
   
   // サイト名を設定します。※メール送信時に使用。
   $config['sitename'] 	= 'XTREC';
   
   // 送信先メールアドレスを設定。
   $config['recipient']  = 'mail@example.com';
   
   // テンプレート用ディレクトリまでのサーバーパスを設定。
   $config['template_dir'] = SYSTEM_ROOT . 'template/';
   
   // フォームのネーム属性を設定。※半角カンマ区切りで複数設定します。
   // ネーム属性とはテキストフィールドなら<input type="text" name="値" value="" />の「name="値"」部分。
   $config['post_name'] = 'name,furigana,email,subject,body,drink';
   
   // 送信元となるメールアドレスのネーム属性を設定。
   $config['from_email'] = 'email';
   
   // 送信元となる名前のネーム属性を設定。
   $config['from_name'] = 'name';
   
   // 送信者に自動返信メールを送信する場合はtrue、送信しない場合は空
   $config['reply'] = true;
   
   // 二重投稿防止のために投稿規制する時間（分）。設定しない場合は空または０
   $config['limit'] = '30'; //30と入力した場合30分同一IPからの受付を拒否。
   
   // PHPスクリプト及び出力HTMLの文字コードを設定。
   $config['charset'] = $carrier != 'p' ? 'SJIS' : 'UTF-8'; //HTML出力はPCはUTF-8,携帯はシフトJISの例。
   
   // 入力チェックを設定します。各チェックをしたい項目のネーム属性を入れると自動で入力チェックを行います。項目が複数の場合半角カンマ(,)区切り。
   $config['valid'] 	= array(
   					'requires' 	=> 入力必須項目チェックをしたい項目のname属性を指定,
   					'email' 		=> メールアドレスチェックをしたい項目のname属性を指定,
   					'url' 			=> URLチェックをしたい項目のname属性を指定,
   					'zipcode' 	=> 郵便番号チェックをしたい項目のname属性を指定,
   					'telephone' => 電話番号チェックをしたい項目のname属性を指定,
   					'japanese' 	=> 日本語チェックをしたい項目のname属性を指定,
   					'hiragana' 	=> ひらがなチェックをしたい項目のname属性を指定,
   					'katakana' 	=> かたかなチェックをしたい項目のname属性を指定,
   					'numeric' 	=> 半角数字チェックをしたい項目のname属性を指定,
   					'alnum' 		=> 半角英数字チェックをしたい項目のname属性を指定,
   					'alphabet' 	=> 半角英字チェックをしたい項目のname属性を指定,
   					'words' 		=> config.inc.phpで設定した禁止語句チェックをしたい項目のname属性を指定,
   					); 
   // ※上記以外にも自身で簡単に入力チェック項目を追加できます。※functions.php/validate参照。
   
   // 次に上記で設定した基本設定をMailform+へ読み込ませます。
   $mailform = new MailFormPlus($config, XHTMLorHTML);
   // XHTMLorHTML部分はフォーム出力先がXHTMLだったらtrueまたは1、HTMLの場合はfalseまたは0を入力。PCはXHTMLで携帯はHTMLの場合は下記のようになります。
   // $mailform = new MailFormPlus($config, ($carrier == 'p' ? true : false));
   

3. フォームを表示させたい所にフォームを呼び出します。

   <?php $mailform->formMethod(); ?>

4. フォーム用テンプレート(mfp/template/)を上記設定に習って編集します。

5. 最後に本体ディレクトリをサーバーへアップロードし、tmp/とlog/にパーミッション設定で書き込み権限を与えます（707/777等サーバー推奨値）。

   ■mfp/
   ┣ ■inc/ （言語＆関数ファイル）
   ┃　　┣‥functions.php (本体用コード)
   ┃　　┣‥index.html (ダミーファイル)
   ┃　　┣‥lang_en.php (日本語用ファイル)
   ┃　　┗‥lang_ja.php (英語用ファイル)
   ┣ ■lib/ （ライブラリー）
   ┃　　┣‥class.mailform.php (Mailform+本体)
   ┃　　┣‥class.template.php (テンプレートエンジン)
   ┃　　┣‥class.xtmailer.php (メール送信ライブラリ)
   ┃　　┗‥index.html (ダミーファイル)
   ┣ ■log/ (二重投稿防止用ログファイル格納ディレクトリ。※パーミッションを707/777等)
   ┃　　┗‥index.html (ダミーファイル)
   ┣ ■template/ (各テンプレート格納ディレクトリ)
   ┃　　┣ ■mail/ (メール本文用テンプレート格納ディレクトリ。※編集時は必ずUTF-8(BOMなし)で保存)
   ┃　　┃　　┣‥body.tpl (受信用本文テンプレート)
   ┃　　┃　　┣‥reply.tpl (自動返信用本文テンプレート)
   ┃　　┃　　┗‥index.html (ダミーファイル)
   ┃　　┣‥confirm.tpl (PC用入力確認画面テンプレート)
   ┃　　┣‥form.tpl (PC用入力フォーム画面テンプレート)
   ┃　　┣‥index.html (ダミーファイル)
   ┃　　┣‥m_confirm.tpl (携帯用入力確認画面テンプレート)
   ┃　　┣‥m_form.tpl (携帯用入力フォーム画面テンプレート)
   ┃　　┣‥m_pre_success.tpl (携帯用送信完了画面テンプレート ※header()関数で飛ばない場合用
   ┃　　┣‥m_success.tpl (携帯用送信完了画面テンプレート)
   ┃　　┣‥pre_success.tpl (PC用送信完了画面テンプレート) ※header()関数で飛ばない場合用
   ┃　　┗‥success.tpl (PC用送信完了画面テンプレート)
   ┣ ■tmp/ (セッションファイル格納ディレクトリ。※パーミッションを707/777等)
   ┃　　┗‥index.html (ダミーファイル)
   ┣‥config.inc.php (各種設定ファイル)
   ┗‥index.html (ダミーファイル)
   

6. 設置例。

   <?php
   include(getcwd().'/mfp/config.inc.php');
   $config = array(
   			'form_url' 		=> 'http://www/xtrec.com/mail/',
   			'sitename' 	=> 'XTREC',
   			'recipient' 	=> 'info@xtrec.com',
   			'template' 	=> SYSTEM_ROOT . 'template/',
   			'post_name' 	=> "name,furigana,email,subject,body,drink",
   			'from_email' 	=> 'email',
   			'from_name' 	=> 'name',
   			'reply' 		=> true,
   			'limit' 		=> '5',
   			'charset' 		=> $carrier != 'p' ? 'SJIS' : 'UTF-8',
   			'valid' 		=> array(
   								'requires' 		=> 'name,furigana,email,subject,body',
   								'email' 		=> 'email',
   								'japanese' 	=> 'furigana,body',
   								'words' 		=> 'body'
   								)
   			);
   $mailform = new MailFormPlus($config, 1);
   ?>
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP" lang="ja-JP">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>お問い合わせ｜XTREC</title>
   <meta name="language" content="Japanese" />
   <meta http-equiv="Content-Script-Type" content="text/javascript" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   </head>
   <body>
   <h1>XTREC</h1>
   <?php $mailform->formMethod(); ?>
   </body>
   </html>
   

istyle(入力モード変換機能)

1. DoCoMoのistyleプロパティに沿ってPC/各携帯キャリアの入力モードに自動変換します。

   istyle属性値	入力モード
   1	全角かな
   2	全角カナ
   3	半角英字
   4	半角数字

2. DoCoMo XHTMLの場合。※DoCoMoのHTML及びWILLCOMの場合は変換を行わずistyleのままです。

   istyle="1"  ー (自動変換) →  style="-wap-input-format:"*<ja:h>";"
   istyle="2"  ー (自動変換) →  style="-wap-input-format:"*<ja:hk>";"
   istyle="3"  ー (自動変換) →  style="-wap-input-format:"*<ja:en>";"
   istyle="4"  ー (自動変換) →  style="-wap-input-format:"*<ja:n>";"
   

3. auの場合。

   istyle="1"  ー (自動変換) →  format="*M"
   istyle="2"  ー (自動変換) →  format="*M"
   istyle="3"  ー (自動変換) →  format="*m"
   istyle="4"  ー (自動変換) →  format="*N"
   

4. Yahoo!ケータイ(Softbank端末)の場合。

   istyle="1"  ー (自動変換) →  mode="hiragana"
   istyle="2"  ー (自動変換) →  mode="katakana"
   istyle="3"  ー (自動変換) →  mode="alphabet"
   istyle="4"  ー (自動変換) →  mode="numeric"
   

5. PCの場合。※IEの独自CSSプロパティIMEモードに変換します。

   istyle="1"  ー (自動変換) →  style="ime-mode:active"
   istyle="2"  ー (自動変換) →  style="ime-mode:active"
   istyle="3"  ー (自動変換) →  style="ime-mode:inactive"
   istyle="4"  ー (自動変換) →  style="ime-mode:inactive"
   

exSAMPLE

1. 一言フォーム ※一言メッセージ欄のみで確認画面なしの例

   ■テンプレートform.tpl

   <form method="post" action="{$config.form_url}">
   <p>
   <label for="message">一言</label>
   <!--if:$error.message--><span style="color:red;display:block">{$error.message}</span><!--endif:$error.message-->
   <input name="message" id="message" type="text" value="{$data.message}" istyle="1" />
   <!--if:$error.host--><span style="color:red;display:block">{$error.host}</span><!--endif:$error.host-->
   <input type="submit" name="submit" value="送信" />
   <!-- ↑確認画面を通さないで送信する場合は送信ボタンのname属性をsubmitとしてください -->
   </p>
   </form>
   

   ■埋込側PHP

   <?php
   include(getcwd().'/mfp/config.inc.php');
   $config = array(
   			'form_url' 		=> 'http://www/xtrec.com/mail/',
   			'sitename' 	=> 'XTREC',
   			'recipient' 	=> 'info@xtrec.com',
   			'template' 	=> SYSTEM_ROOT . 'template/',
   			'post_name' 	=> "message",
   			'limit' 		=> '5',
   			'charset' 		=> 'UTF-8',
   			'valid' 		=> array(
   								'requires' 		=> 'message',
   								'japanese' 	=> 'message'
   								)
   			);
   $mailform = new MailFormPlus($config, 1);
   ?>
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP" lang="ja-JP">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>一言メッセージ｜XTREC</title>
   <meta name="language" content="Japanese" />
   <meta http-equiv="Content-Script-Type" content="text/javascript" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   </head>
   <body>
   <h1>XTREC</h1>
   <?php $mailform->formMethod(); ?>
   </body>
   </html>
   

2. セレクトボックスやチェックボックスを使ったアンケート使用例

   ■form.tpl

   <form method="post" action="{$config.form_url}">
   <dl>
   <dt><label for="name">お名前</label></dt>
   <dd>
   <!--if:$error.name--><span style="color:red;display:block">{$error.name}</span><!--endif:$error.name-->
   <input name="name" id="name" type="text" value="{$data.name}" istyle="1" />
   </dd>
   <dt><label for="search">検索エンジンは主に何を使ってますか？</label></dt>
   <dd><!--if:$error.search--><span style="color:red;display:block">{$error.search}</span><!--endif:$error.search-->
   <select name="search" id="search">
   <option value="">選択してください</option>
   <option value="YAHOO!"<?=($this->assign['data']['search'] == 'YAHOO!' ? ' selected="selected"' : '');?>>YAHOO!</option>
   <option value="Google"<?=($this->assign['data']['search'] == 'Google' ? ' selected="selected"' : '');?>>Google</option>
   <option value="Bing"<?=($this->assign['data']['search'] == 'Bing' ? ' selected="selected"' : '');?>>Bing</option>
   </select>
   </dd>
   <dt>どんな時に検索エンジンを利用しますか？<br />複数回答可</dt>
   <dd>
   <!--if:$error.when--><span style="color:red;display:block">{$error.when}</span><!--endif:$error.when-->
   <input type="checkbox" name="when[]" id="item1" value="買い物"<?=(inArray('買い物', $this->assign['data']['when']) ? ' checked="checked"' : '');?> /><label for="item1">買い物</label><br />
   <input type="checkbox" name="when[]" id="item2" value="天気予報"<?=(inArray('天気予報', $this->assign['data']['when']) ? ' checked="checked"' : '');?> /><label for="item2">天気予報</label><br />
   <input type="checkbox" name="when[]" id="item3" value="乗換案内"<?=(inArray('乗換案内', $this->assign['data']['when']) ? ' checked="checked"' : '');?> /><label for="item3">乗換案内</label><br />
   <input type="checkbox" name="when[]" id="item4" value="旅行"<?=(inArray('旅行', $this->assign['data']['when']) ? ' checked="checked"' : '');?> /><label for="item4">旅行</label><br />
   <input type="checkbox" name="when[]" id="item5" value="その他"<?=(inArray('その他', $this->assign['data']['when']) ? ' checked="checked"' : '');?> /><label for="item5">その他</label>
   </dd>
   </dl>
   <p>
   <!--if:$error.host--><span style="color:red;display:block">{$error.host}</span><!--endif:$error.host-->
   <input type="submit" name="confirm" value="確認" />
   </p>
   </form>
   

   ■テンプレートconfig.tpl

   <dl>
   <dt>お名前</dt>
   <dd>{$data.name}</dd>
   <dt>検索エンジンは主に何を使ってますか？</dt>
   <dd>{$data.search}</dd>
   <dt>どんな時に検索エンジンを利用しますか？</dt>
   <dd>{implode|$data.when}</dd>
   </dl>
   <form method="post" action="{$config.form_url}">
   <p>
   <input type="submit" name="edit" value="修正" />
   <input type="submit" name="send" value="送信" />
   </p>
   </form>
   

   ■埋込側PHP

   <?php
   include(getcwd().'/mfp/config.inc.php');
   $config = array(
   			'form_url' 		=> 'http://www/xtrec.com/mail/',
   			'sitename' 	=> 'qnare',
   			'recipient' 	=> 'info@xtrec.com',
   			'template' 	=> SYSTEM_ROOT . 'template/',
   			'post_name' 	=> "name",
   			'limit' 		=> '5',
   			'charset' 		=> 'UTF-8',
   			'valid' 		=> array(
   								'requires' 		=> 'name,search,when',
   								)
   			);
   $mailform = new MailFormPlus($config, 1);
   ?>
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP" lang="ja-JP">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>アンケートフォーム</title>
   <meta name="language" content="Japanese" />
   <meta http-equiv="Content-Script-Type" content="text/javascript" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   </head>
   <body>
   <h1>アンケートフォーム</h1>
   <?php $mailform->formMethod(); ?>
   </body>
   </html>

Movable Typeに組込

MTへの組み込みむ場合MTをPHP化してることが条件となります。
※組み込み例はMT5での例です。基本的に方法は一緒なので各バージョンに置き換えて参考にしてください。

1. 本体のアップロード

   mfpディレクリ以下をサーバーへアップロードしパーミッション設定をます。
   ※パーミッション設定については設定(SETTING)の5を参照。

2. ウェブページ作成

   「ウェブページ」→「新規」を選択し新しくページを作成します。
   本文にフォーマットなしモードで下記通りメールフォーム呼び出しコードを記述しファイル名を「mail.php」、フォルダは初期の「/」とし下書き保存します。
   ※上記のファイル名、フォルダは仮で任意の設定で問題ありません。

   <?php $mailform->formMethod(); ?>

3. テンプレート編集

   「デザイン」→「テンプレート」を選択し、アーカイブテンプレートの「ウェブページ」をクリック。
   一番最初に下記のように設定を書きこみます。
   ※携帯用テンプレートを作成してる場合はそのファイルにも記述します。

   <?php
   if($_SERVER["PHP_SELF"] == '/mail.php') { //1で設定したフォルダ/ファイル名を指定
   	include(getcwd().'/mfp/config.inc.php');
   	$config = array(
       				//〜〜〜基本設定省略〜〜〜。※設定方法・概要は設定(SETTING)の2を参照
   				);
   	$mailform = new MailFormPlus($config, 1);
   }
   ?>
   

4. ウェブページの公開

   2で下書き保存したページを公開にし、組み込み完了です。

Wordpressに組込

Wordpressに組み込む場合、本文にPHPコードが書けるようするExec-PHPやRunPHP、本文でpタグやbrタグの自動挿入を制御するWP clean excerptなどのプラグインを導入する必要があります。
プラグイン導入方法や設定方法は省略させていただきます。

1. 本体のアップロード

   mfpディレクリ以下をサーバーへアップロードしパーミッション設定をます。
   ※パーミッション設定については設定(SETTING)の5を参照。

2. ページ作成

   「ページ」→「新規追加」を選択し新しくページを作成します。
   本文にHTMLモードで下記通りメールフォーム呼び出しコードを記述しページスラッグを「contact」とし下書き保存します。
   ※上記のページスラッグは仮名で任意の設定で問題ありません。

   <?php
   remove_filter('the_content', 'wpautop'); //WP clean excerptの関数でp/brタグの自動挿入を停止させます。
   $GLOBALS['mailform']->wp = true; //wordpress使ってますよという合図。
   $GLOBALS['mailform']->formMethod();
   ?>

3. テンプレート編集

   「外観」→「編集」を選択し、ヘッダー(header.php)をクリック。
   一番最初に下記のように設定を書きこみます。
   Ktai Styleを使ってる方はKtai Styleの利用中のテーマ「header.php」にも記載します。
   ※Ktai Styleをアップデートするとテーマファイルも入れ替わる場合があります。その際は再度header.phpに記載する必要がありますのでご注意ください。

   <?php
   $slug = attribute_escape($post->post_name); //現在のページのスラッグ名を読み出し$slugに入れます。
   if($slug == 'contact') { //1で設定したスラッグ名を指定
   	include(getcwd().'/mfp/config.inc.php');
   	$config = array(
   				'form_url' => get_bloginfo('url').'/contact/', //2で下書き保存したページのパーマリンクを指定
   				'sitename' => get_bloginfo('name'), //Wordpressの一般設定で登録されているブログタイトル
   				'recipient' => get_bloginfo('admin_email'), //Wordpressの一般設定で登録されているメールアドレス
       				//〜〜〜以下省略※設定方法・概要は設定(SETTING)の2を参照〜〜〜。
   				);
   	$GLOBALS['mailform'] = new MailFormPlus($config, 1);
   }
   ?>
   

4. ページの公開

   2で下書き保存したページを公開にし、組み込み完了です。

5. Wordpressでの注意点

   Wordpressではname属性値(<input type="text" name="ここ" />)にnameが利用できません。他にも使えない属性値があるかもしれませんのでご注意ください。
   携帯表示ではKtai Style利用されてる方が多いと思いますが、入力モード変換はKtai Styleに準じます。それによる不具合は一切サポートできませんのでご了承ください。

TEMPLATEタグ

当スクリプトは独自テンプレートエンジンを搭載しいくつかの独自タグを用意しております。またテンプレートにPHPコードも入力出来るようになってます。
独自タグ及びPHPコードはフォームテンプレート及びメール本文用テンプレート共に利用できます。

1. 独自タグ

   タグ	内容	記入例
   striptags	HTMLタグを削除します。	{striptags|$data}
   nl2br	改行コード\nを<br />に変換します。	{nl2br|$data.body}
   implode	配列を半角カンマ(,)区切りで結合します。	{implode|$data}
   strimwidth	文字列を幅で丸めます。	<strimwidth=20>{$data.body}</strimwidth>
   strimlength	文字数を丸めます。	<strimlength=20>{$data.title}</strimlength>
   date	UNIXタイムスタンプの日付フォーマットを定義します。	<date=Y-m-d H:i:s>{$data.date}</date>
   if	条件分岐を行います。	<!--if:$data-->〜〜〜〜<!--endif:$data-->
   else	条件分岐で使用します。	<!--if:$data--> 〜〜〜〜〜〜〜〜〜 <!--else:$data--> 〜〜〜〜〜〜〜〜〜 <!--endif:$data-->
   loop	繰り返し処理を行います。	<!--loop:$data*5-->〜〜〜〜<!--endloop:$data-->
   noloop	繰り返し処理で何もデータがない場合の処理。	<!--loop:$data--> 〜〜〜〜〜〜〜〜〜〜〜〜 <noloop><p>ただいま準備中です。</p></noloop> <!--endloop:$data-->