formmail.phpは、自由に作成されたメール送信用のフォームを自動解析して、指定した送信先にメールを送信します。
TryCMSの「メールフォーム」オプションとの違いは、ここにあります。メールフォームオプションは、コンパネ上でフォームを設計しますが、formmail.phpは、ホームページ作成ソフトなどを利用して自由に作成されたフォームを解析するのです。多少の制限はありますが、ほとんどの場合、自動解析できます。

また、今回のバージョン2012.03版からは、jQuery mobileをサポートしていますので、スマートフォンやタブレット型パソコンでもご利用いただけます。

※jQuery mobile は、スマートフォン、タブレット共に「モダンブラウザ」専用です。
iPhone、iPadは、Mac製safariで、その他のandroidを採用している機種ではGoogle製chromeですのでモダンブラウザです。
極一部のMicrosoft Windowsを採用しているスマートフォン、タブレットでは、Internet Explororがモダンブラウザではない為、多少デザインが異なります。
したがって、Windows Internet Explororを使って動作確認もできません。

formmail.php(jQuery mobile対応版)をお申し込みいただき、システムを更新していただくと/trycms下にformmail.phpがインストールされていますので、動作させるディレクトリにコピーして内部の管理者用パスワードを設定します。
以下の自動コピーフォームから、設置するディレクトリと、パスワードを設定するだけでもコピーできます。

自動コピー

パスワード

※formmail.phpは、僅か369バイトしかありませんので、サイト内にいくつ存在してもサーバの負担にはなりません。
formmail.phpのコピーが完了すると、動作環境を設定する為パスワードを指定して管理者モードでアクセスします。

【例】http://$servername/formmail.php?CGI_root=

上記フォームにformmail.phpを設置したディレクトリとパスワードを指定するとこのアドレスをクリックして設定していただけます。
設定項目は、設定フォームに詳しく記されています。

自動コピー

パスワード

次はデザインされたテンプレートのドキュメントを用意します。
本システムはjQuery完全対応版ですので、jQuery以外のjavascriptフレームワーク(prototype等)を使用している場合はご利用いただけません。

標準webサイト用テンプレートサンプル(xhtml 1.0)


									<!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">
									<head>
									<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
									<meta name="content-language" content="ja" />
									<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
									<meta http-equiv="content-style-type" content="text/css" />
									<meta http-equiv="content-script-type" content="text/javascript" />
									<meta name="description" content="" />
									<meta name="keywords" content="" />
									<title></title>
									<link type="text/css" rel="stylesheet" href="http://utf.trycms.net/jquery/themes/start/jquery-ui.css" />
									<script type="text/javascript" src="http://utf.trycms.net/jquery/js/jquery-1.6.4.min.js"></script>
									<script type="text/javascript" src="http://utf.trycms.net/common/getcity.js"></script>
									</head>
									<body>
									<!-- CGI Document.inc -->
									<!-- /CGI Document.inc -->
									</body>
									</html>

このサンプルで重要なのは、18行、19行目のキーワードコメントタグです。 formmail.phpが生成したドキュメントはこの間に挿入されます。

スマートフォン、タブレット用テンプレートサンプル(html5)


									<!DOCTYPE html>
									<html>
									<head>
									<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
									<title></title>
									<link type="text/css" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" />
									<link type="text/css" href="http://utf.trycms.net/mobile/common/themes/default/mobile.min.css" rel="stylesheet" />
									<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
									<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
									<script type="text/javascript" src="http://utf.trycms.net/common/getcity.js"></script>
									</head>
									<body>
									<!-- CGI Document.inc -->
									<!-- /CGI Document.inc -->
									</body>
									</html>

スマートフォンやタブレット用の場合は、jqueryだけでなく、jquery.mobileも必要です。ご自身のサーバに存在する必要は有りませんので、上記のurlのままインクルードすれば簡単で、世界中の誰かがアクセスしていますので高速です。

基本はこの形式で、このルールさえ守っていただければ、どのようにデザインしていただいても結構です。
手動で設問フォームを作成する場合は、 から の間に設問フォームを作成します。


							<!-- CGI Document.inc -->
								<form action="formmail.php" method="post" name="mailform" id="mailform">
									<p class="question">お名前</p>
									<p class="answer"><input type="text" name="お名前" /></p>
									<p class="question">フリガナ</p>
									<p class="answer"><input type="text" name="フリガナ" /></p>
									<p class="question">メールアドレス</p>
									<p class="answer"><input type="text" name="メールアドレス" /></p>
									<p class="question">お問合せ内容</p>
									<p class="answer"><textarea name="お問合せ内容"></textarea></p>
									<div style="clear:both;">
										<input type="button" name="戻る" onclick="history.back();" />
										<input type="reset" name="リセット" />
										<input type="submit" name="確認画面へ" />
									</div>
								</form>
							<!-- /CGI Document.inc -->

これは、最も簡単な設問フォームの例です。 [確認画面へ]ボタンを押すと入力内容を確認するページをformmail.phpが生成して表示します。この時、formmail.phpの環境設定で設定した条件に一致しない項目があればエラーを表示します。

formmail.phpの管理者モードで設問フォームを設計する
一般的なフォームはまだしも、jQuery mobile用のフォームを設計することは簡単ではありません。そこで、formmail.phpの管理者モードには、この厄介なフォームを自動で作成できる機能が備わっています。
1. 環境設定同様の要領で管理者モードにログインし、[フォームの設計]ボタンを押します。
  
  設計フォームはアコーディオン形式になっています。
  タイトルバーをクリックすると設問に関する設定フォームが開きます。
  タイトルバーの設問は必須です。空欄のタイトルバー以降の設問項目はすべて無効になりますのでご注意ください。
2. グループ名
  設問フォームを幾つかのグループに分割できます。グループ名が設定された設問から、次にグループが設定されるまでが1つのグループとなります。設問フォームには最低1つのグループが必要で、先頭の設問にグループ名が設定されていない場合は、「以下のご質問にお答えください。」になります。
3. 設問
  メインの設問はタイトルバーですので、この項目は補助的な設問です。タイトルバーの設問項目は省略できませんが、こちらは省略可能です。両方が設定されている場合は、こちらが設問項目になります。
4. ヒント
  1行テキストボックスに隠しプロパティの「title」を設定できます。
  このタイトルを利用して、プロンプトを表示することも可能になります。(jQueyプラグインなど)
5. タイプ
  - フィールドタイプ
    1. 単一行テキストボックス
      最も利用される1行だけ入力可能なテキストボックスです。
    2. 複数行テキストボックス
      [Enter]で改行して、複数行入力可能なテキストボックスです。
    3. 単一選択ラジオボタン
      用意された選択肢から1つだけ選択可能なラジオボタンです。選択肢は、「タイプ」内にあるテキストボックスに1件ごと改行して設定してください。
    4. 単一選択リストボックス
      ラジオボタン同様、用意された選択肢から1つだけ選択可能なリストボックスです。
      機能的にはラジオボタンと同じですが、表示される領域を節約できます。
      
      単一選択リストボックスを選択した場合にだけ、「リストボックスの選択肢をポップアップする」を指定することができます。このオプションが設定されている場合は、選択肢がポップアップで表示されます。
    5. 複数選択チェックボックス
      予め設定された選択肢から複数選択可能なチェックボックスです。
    6. 複数選択チェックボックス＋テキストボックス
      
      上記チェックボックスと全く同じですが、選択肢に無い場合に直接入力可能なテキストボックスが追加されます。
    7. 郵便番号付き住所セット
      
      これが自動設計で最も特徴的なフィールドタイプで、郵便番号と、住所に関する情報を分割して入力させ、実際には、設定した設問名で取得可能な特殊フィールドです。
      さらに、7桁の郵便番号を記入後、カーソルが移動されると、都道府県以下の情報が自動的に挿入されます。
      
      確認画面では、既に単一の項目になっています。
    8. 確認フィールド付きE-Mail専用テキストボックス
      
      もう1つ特徴的なフィールドタイプがメールアドレス専用フィールドです。このフィールドタイプを選択すると、自動的に確認用テキストボックスが表示され、メインのテキストボックスに入力されたメールアドレスと一致しなければエラーになります。また、メールアドレスの書式をチェックしますので、でたらめな文字列でもエラーになります。
      
      一致していれば確認画面で既に単一の項目になり、確認フィールドは表示されません。
    9. 日付専用(年月日分割)テキスト
      
      このタイプも分割して入力されたデータを単一のデータにして取得可能なタイプになります。ユーザは年月日を分割して入力しますが、取得時は単一の項目名になっています。
      
      確認画面では、既に単一の項目になっています。
    10. 都道府県選択リストボックス
      
      都道府県選択専用フィールドです。 47都道府県がデフォルトで設定されていますので、ユーザはドロップダウンで選択するだけです。お住まいの地域のみ取得する場合や、住所項目を独自に設計する場合に便利です。
  - テキストボックスの幅
    選択されたフィールドタイプがテキストボックスの場合は、幅をpx単位で設定できます。通常はスタイルシートで行いますので未設定にしておきます。
  - 文字の配置
    フィールドタイプがテキストボックスの場合は、文字の配置を指定できます。一般的には、通常文字は左寄せ、数値を右寄せにします。
  - 使用文字
    入力可能な文字を半角文字に限定できます。
  - 必須項目
    この項目を必須にします。必須に設定された項目を省略(未記入)して投稿することはできません。
こちらが、すべて自動生成されたメールフォームです。デザインにも手を加えていません。
同じページでも解像度の低いスマートフォンでは、自動で右側のようにレイアウトされ表示されます。

jQuery mobile でも確認ページ用のスタイルシートは必要です。
以下は上記のサンプルです。
```
							p,h4,form {margin:0px;}
							#mailformtable {list-style-type:none;margin:0px;padding:0px;}
							#mailformtable .fm-group {
								/*background:url(/jquery/themes/hot-sneaks/images/ui-bg_dots-small_35_35414f_2x2.png);*/
								background: #0078ae url(/jquery/themes/start/images/ui-bg_glass_45_0078ae_1x400.png) 50% 50% repeat-x;
								padding-left:10px;
								margin-bottom:8px;
								-moz-border-radius-topleft: 8px;
								-webkit-border-top-left-radius: 8px;
								border-top-left-radius: 8px;
								-moz-border-radius-topright: 8px;
								-webkit-border-top-right-radius: 8px;
								border-top-right-radius: 8px;
								color:#fff;
								text-shadow: 1px 1px 1px #aaa;
							}
							#fm-confirm {max-width:480px;margin:0 auto;}
							#mailformtable li {
									background:-moz-linear-gradient(top, #ffe,#fff,#dfe);
									background:-webkit-gradient(linear, left top, left bottom, from(#ffe),color-stop(0.5, #fff), to(#dfe));
									margin-bottom:10px;border:solid #aaa 1px;
							}
							#mailformtable li p {padding:10px;height:100%;}
							#mailformtable .que {width:39.6%;}
							#mailformtable .ans {border-left:solid #bbb 1px;background:#fff;width:60%;}
							#mailformtable #buttonArea {text-align:center;}
							#mailform #messageBox {max-width:480px;margin:0 auto;}
						
```
※スタイルシートに関するお問い合わせはご遠慮ください。別途サポート費用が発生します。

作成されたデータは、formmail.phpと同じディレクトリ内にxml形式(formmail.xml)で保存されています。
以下は上記のフォームを設計時に自動保存されたxmlファイルです。このファイルをコピーして、formmail.phpのディレクトリにインストールすれば、全く同じフォームが作成可能です。
```
								<?xml version="1.0" encoding="UTF-8" ?>
								<root>
									<item>
										<Que>Q1:お名前</Que>
										<Group>あなたの情報</Group>
										<longQue></longQue>
										<Type>0</Type>
										<textAlign>0</textAlign>
										<imemode>0</imemode>
										<textWidth></textWidth>
										<Select></Select>
										<Required>1</Required>
									</item>
									<item>
										<Que>Q2:フリガナ</Que>
										<Group></Group>
										<longQue></longQue>
										<Type>0</Type>
										<textAlign>0</textAlign>
										<imemode>0</imemode>
										<textWidth></textWidth>
										<Select></Select>
										<Required>0</Required>
									</item>
									<item>
										<Que>Q3:メールアドレス</Que>
										<Group></Group>
										<longQue></longQue>
										<Type>7</Type>
										<textAlign>0</textAlign>
										<imemode>0</imemode>
										<textWidth></textWidth>
										<Select></Select>
										<Required>1</Required>
									</item>
									<item>
										<Que>Q4:ご住所</Que>
										<Group></Group>
										<longQue></longQue>
										<Type>6</Type>
										<textAlign>0</textAlign>
										<imemode>0</imemode>
										<textWidth></textWidth>
										<Select></Select>
										<Required>0</Required>
									</item>
									<item>
										<Que>Q5:生年月日</Que>
										<Group></Group>
										<longQue></longQue>
										<Type>8</Type>
										<textAlign>0</textAlign>
										<imemode>0</imemode>
										<textWidth></textWidth>
										<Select></Select>
										<Required>0</Required>
									</item>
									<item>
										<Que>Q6:ご趣味</Que>
										<Group></Group>
										<longQue></longQue>
										<Type>5</Type>
										<textAlign>0</textAlign>
										<imemode>0</imemode>
										<textWidth></textWidth>
										<Select>パソコン/インターネット自動車/バイク鉄道/飛行機競輪/競馬/競艇パチンコ/マージャンお茶/生け花バレー/日本舞踊/ダンス音楽/映画鑑賞/読書</Select>
										<Required>0</Required>
									</item>
									<item>
										<Que>Q7:勤務先</Que>
										<Group>勤務先情報</Group>
										<longQue></longQue>
										<Type>0</Type>
										<textAlign>0</textAlign>
										<imemode>0</imemode>
										<textWidth></textWidth>
										<Select></Select>
										<Required>0</Required>
									</item>
									<item>
										<Que>Q8:フリガナ</Que>
										<Group></Group>
										<longQue></longQue>
										<Type>0</Type>
										<textAlign>0</textAlign>
										<imemode>0</imemode>
										<textWidth></textWidth>
										<Select></Select>
										<Required>0</Required>
									</item>
									<item>
										<Que>Q9:業種</Que>
										<Group></Group>
										<longQue></longQue>
										<Type>3</Type>
										<textAlign>0</textAlign>
										<imemode>0</imemode>
										<textWidth></textWidth>
										<Select>IT関連建設業製造業農業小売業サービス業</Select>
										<Required>0</Required>
									</item>
									<item>
										<Que>Q10:所属部署</Que>
										<Group></Group>
										<longQue></longQue>
										<Type>0</Type>
										<textAlign>0</textAlign>
										<imemode>0</imemode>
										<textWidth></textWidth>
										<Select></Select>
										<Required>0</Required>
									</item>
									<item>
										<Que>Q11:電話番号</Que>
										<Group></Group>
										<longQue></longQue>
										<Type>0</Type>
										<textAlign>0</textAlign>
										<imemode>0</imemode>
										<textWidth></textWidth>
										<Select></Select>
										<Required>0</Required>
									</item>
									<item>
										<Que>Q12:内容</Que>
										<Group></Group>
										<longQue></longQue>
										<Type>1</Type>
										<textAlign>0</textAlign>
										<imemode>0</imemode>
										<textWidth></textWidth>
										<Select></Select>
										<Required>0</Required>
									</item>
								</root>
							
```
この情報を元に、次回formmail.phpが管理者モードでアクセスされると変更訂正モードになります。設問は、各設問のタイトルバーをドラッグして設問順を入れ替えることができます。この並び替え機能を利用して、未設定の行を挿入した箇所にドラッグして挿入することも可能です。設問の削除は、削除する設問を最下行に移動させ、タイトルバーの設問名を消去します。
※自動設計モードを使用すると、環境設定で設定した必須項目など、一部の設定が無効になります。

フォームの利用
設計内容を保存(プレビューを表示)すると、xml形式のファイルの保存と同時に、完全なhtml形式のテキストファイル(formmail.txt)も保存されています。
もちろん、jQuery mobile対応ですので、専用のタグも挿入済です。
jQuery mobileを使用しない場合は、ページのヘッダーでインクルードしているhttp://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.jsなど、 jQuery mobileに関するjavascriptとスタイルシートを削除して、独自のスタイルシートでデザインしてください。


							<form action="formmail.php" method="post" data-ajax="false" name="mailform" id="mailform">
								<div id="Group1" class="Q-group" data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
									<input type="hidden" name="Group1" value="あなたの情報" />
									<h3>あなたの情報</h3>
									<div id="Q1-container" data-role="fieldcontain" class="fieldcontainer">
										<label for="Q1"><p class="Q-title">Q1:お名前 <b style="color:#a00;">※</b></p></label>
										<input type="text" name="Q1:お名前" id="Q1" style="ime-mode:disabled;" />
									</div>
									<div id="Q2-container" data-role="fieldcontain" class="fieldcontainer">
										<label for="Q2"><p class="Q-title">Q2:フリガナ</p></label>
										<input type="text" name="Q2:フリガナ" id="Q2" style="ime-mode:disabled;" />
									</div>
									<div id="Q3-container" data-role="fieldcontain" class="fieldcontainer">
										<fieldset data-role="controlgroup">
											<legend>Q3:メールアドレス <b style="color:#a00;">※</b></legend>
											<label for="Q3-1"><p class="Q-email">E-Mail</p></label>
											<input type="text" name="Q3:メールアドレス" id="Q3-1" style="ime-mode:disabled;" /><br />
											<label for="Q3-2"><p class="Q-emailconf">(再入力)</p></label>
											<input type="text" name="Q3:メールアドレス(再入力)" id="Q3-2" style="ime-mode:disabled;" />
										</fieldset>
									</div>
									<div id="Q4-container" data-role="fieldcontain" class="fieldcontainer">
										<fieldset data-role="controlgroup">
											<legend>Q4:ご住所</legend>
											<label for="Q4-zip"><p class="Q-zip">郵便番号</p></label>
											<input type="text" name="Q4-zip" id="Q4-zip" style="width:100px;ime-mode:disabled;"
												onblur="
												if (this.value.match(/\d{7}/) || this.value.match(/\d{3}-\d{4}/)) {
													getcity('mailform,Q4-zip,Q4-pre,Q4-city,Q4-addr','');
												}" /><br />
											<label for="Q4-pre"><p class="Q-pre">都道府県</p></label>
											<input type="text" name="Q4-pre" id="Q4-pre" /><br />
											<label for="Q4-city"><p class="Q-city">市区町村</p></label>
											<input type="text" name="Q4-city" id="Q4-city" /><br />
											<label for="Q4-addr"><p class="Q-addr">町域以下</p></label>
											<input type="text" name="Q4-addr"  id="Q4-addr" /><br />
											<label for="Q4-buill"><p class="Q-buill">ビル名</p></label>
											<input type="text" name="Q4-buill" id="Q4-buill" />
										</fieldset>
									</div>
									<div id="Q5-container" data-role="fieldcontain" class="fieldcontainer">
										<fieldset data-role="controlgroup">
											<legend>Q5:生年月日</legend>
											<input type="text" name="Q5-year" id="Q5-year" style="width:60px;ime-mode:disabled;text-align:right;" />年
											<input type="text" name="Q5-month" id="Q5-month" style="width:30px;ime-mode:disabled;text-align:right;" />月
											<input type="text" name="Q5-day" id="Q5-day" style="width:30px;ime-mode:disabled;text-align:right;" />日
										</fieldset>
									</div>
									<div id="Q6-container" data-role="fieldcontain" class="fieldcontainer">
										<fieldset data-role="controlgroup">
											<legend>Q6:ご趣味</legend>
											<label for="Q6-1"><p class="Q-check">
												<input type="checkbox" name="Q6:ご趣味[]" id="Q6-1" class="Q6-check" value="パソコン/インターネット" />パソコン/インターネット</p>
												</label>
											<label for="Q6-2"><p class="Q-check">
												<input type="checkbox" name="Q6:ご趣味[]" id="Q6-2" class="Q6-check" value="自動車/バイク" />自動車/バイク</p>
												</label>
											<label for="Q6-3"><p class="Q-check">
												<input type="checkbox" name="Q6:ご趣味[]" id="Q6-3" class="Q6-check" value="鉄道/飛行機" />鉄道/飛行機</p>
												</label>
											<label for="Q6-4"><p class="Q-check">
												<input type="checkbox" name="Q6:ご趣味[]" id="Q6-4" class="Q6-check" value="競輪/競馬/競艇" />競輪/競馬/競艇</p>
												</label>
											<label for="Q6-5"><p class="Q-check">
												<input type="checkbox" name="Q6:ご趣味[]" id="Q6-5" class="Q6-check" value="パチンコ/マージャン" />パチンコ/マージャン</p>
												</label>
											<label for="Q6-6"><p class="Q-check">
												<input type="checkbox" name="Q6:ご趣味[]" id="Q6-6" class="Q6-check" value="お茶/生け花" />お茶/生け花</p>
												</label>
											<label for="Q6-7"><p class="Q-check">
												<input type="checkbox" name="Q6:ご趣味[]" id="Q6-7" class="Q6-check" value="バレー/日本舞踊/ダンス" />バレー/日本舞踊/ダンス</p>
												</label>
											<label for="Q6-8"><p class="Q-check">
												<input type="checkbox" name="Q6:ご趣味[]" id="Q6-8" class="Q6-check" value="音楽/映画鑑賞/読書" />音楽/映画鑑賞/読書</p>
												</label>
											<label for="Q6-9"><p class="Q-anny">その他<p></label>
											<input type="text" name="Q6:ご趣味[]" id="Q6-9" style="ime-mode:disabled;" />
										</fieldset>
									</div>
								</div>
								<div id="Group7" class="Q-group" data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
									<input type="hidden" name="Group7" value="勤務先情報" />
									<h3>勤務先情報</h3>
									<div id="Q7-container" data-role="fieldcontain" class="fieldcontainer">
										<label for="Q7"><p class="Q-title">Q7:勤務先</p></label>
										<input type="text" name="Q7:勤務先" id="Q7" style="ime-mode:disabled;" />
									</div>
									<div id="Q8-container" data-role="fieldcontain" class="fieldcontainer">
										<label for="Q8"><p class="Q-title">Q8:フリガナ</p></label>
										<input type="text" name="Q8:フリガナ" id="Q8" style="ime-mode:disabled;" />
									</div>
									<div id="Q9-container" data-role="fieldcontain" class="fieldcontainer">
										<fieldset data-role="controlgroup">
											<legend>Q9:業種</legend>
											<label for="Q9-1"><p class="Q-radio">
												<input type="radio" name="Q9:業種" id="Q9-1" class="Q9-radio" value="IT関連" />IT関連</p></label>
											<label for="Q9-2"><p class="Q-radio">
												<input type="radio" name="Q9:業種" id="Q9-2" class="Q9-radio" value="建設業" />建設業</p></label>
											<label for="Q9-3"><p class="Q-radio">
												<input type="radio" name="Q9:業種" id="Q9-3" class="Q9-radio" value="製造業" />製造業</p></label>
											<label for="Q9-4"><p class="Q-radio">
												<input type="radio" name="Q9:業種" id="Q9-4" class="Q9-radio" value="農業" />農業</p></label>
											<label for="Q9-5"><p class="Q-radio">
												<input type="radio" name="Q9:業種" id="Q9-5" class="Q9-radio" value="小売業" />小売業</p></label>
											<label for="Q9-6"><p class="Q-radio">
												<input type="radio" name="Q9:業種" id="Q9-6" class="Q9-radio" value="サービス業" />サービス業</p></label>
										</fieldset>
									</div>
									<div id="Q10-container" data-role="fieldcontain" class="fieldcontainer">
										<label for="Q10"><p class="Q-title">Q10:所属部署</p></label>
										<input type="text" name="Q10:所属部署" id="Q10" style="ime-mode:disabled;" />
									</div>
									<div id="Q11-container" data-role="fieldcontain" class="fieldcontainer">
										<label for="Q11"><p class="Q-title">Q11:電話番号</p></label>
										<input type="text" name="Q11:電話番号" id="Q11" style="ime-mode:disabled;" />
									</div>
									<div id="Q12-container" data-role="fieldcontain" class="fieldcontainer">
										<label for="Q12"><p class="Q-title">Q12:内容</p></label>
										<textarea name="Q12:内容" id="Q12" style="ime-mode:disabled;"></textarea>
									</div>
								</div>
								<div id="fm-button" class="ui-body ui-body-b" style="margin-top:10px;text-align:center;">
									<fieldset data-role="controlgroup" data-type="horizontal">
										<button type="button" data-theme="d" data-icon="arrow-l" id="fm-return" class="commandButton">戻る</button>
										<button type="reset" data-theme="d" data-icon="back" id="fm-reset" class="commandButton">リセット</button>
										<button type="button" data-theme="b" data-icon="check" onclick="this.form.submit();"
											id="fm-submit" class="commandButton">送信する</button>
									</fieldset>
								</div>
								<!-----------------------------------------------------
									自動生成された項目による条件設定
									CGI_Check       ：必須項目
									CGI_Connectfield：結合フィールド
									CGI_Hidden      ：非表示フィールド
									CGI_Comparison  ：確認フィールド
								------------------------------------------------------->
								<input type="hidden" name="CGI_Check"
									value="Q1:お名前,Q3:メールアドレス" />
								<input type="hidden" name="CGI_Connectfield"
									value="Q4:ご住所, ,Q4-zip,Q4-pre,Q4-city,Q4-addr,Q4-buill;Q5:生年月日,-,Q5-year,Q5-month,Q5-day" />
								<input type="hidden" name="CGI_Hidden"
									value="Q3:メールアドレス(再入力),Q4-zip,Q4-pre,Q4-city,Q4-addr,Q4-buill,Q5-year,Q5-month,Q5-day" />
								<input type="hidden" name="CGI_Comparison"
									value="Q3:メールアドレス,Q3:メールアドレス(再入力)" />
							</form>

このファイルを、テンプレートにSSIでインクルードするだけでページが完成します。


							<!DOCTYPE html>
							<html>
							<head>
							<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
							<title></title>
							<link type="text/css" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" />
							<link type="text/css" href="http://utf.trycms.net/mobile/common/themes/default/mobile.min.css" rel="stylesheet" />
							<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
							<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
							<script type="text/javascript" src="http://utf.trycms.net/common/getcity.js"></script>
							</head>
							<body>
							<!-- CGI Document.inc -->
								<!--#include virtual="formmail.txt"-->
							<!-- /CGI Document.inc -->
							</body>
							</html>

jQuery mobileのデザイン機能を使用しないで、独自のデザインを設定する場合は、このソースを参照していただき、細かく設定されたDOMとid、classをご利用ください。

こちらは、同じソースを使用し、オリジナルのスタイルシートを設定した例です。
スタイルシートの知識が有れば、オリジナルのデザインからでもメールを送信可能です。
もちろん、スマートフォンやタブレットも問題ありません。

以下が実際に使用したスタイルシートになります。


							* {font-size:13px;font-family:"MeiryoKe_PGothic","Meiryo UI","メイリオ",Meiryo,"ＭＳ Ｐゴシック";text-decoration:none;}
							form, p, h3 {margin:0px;}
							label {cursor:pointer;}
							#contents {max-width:600px;margin:0 auto;}
							/* フォームのデザイン */
							#mailform #Q3-container p, #Q4-container p {clear:both;float:left;width:80px;}
							#mailform #Q3-container input, #Q4-container input {float:left;}
							#mailform #Q12 {width:400px;height:100px;}
							#mailform #Q6-container .Q-check {float:left;width:180px;}
							#mailform #Q6-container .Q-anny {clear:both;margin-top:5px;}
							#mailform #Q9-container p {float:left;}
							#mailform .Q-group {margin-top:10px;clear:both;border:solid #aaa 1px;
								-moz-border-radius-topleft: 5px;
								-webkit-border-top-left-radius: 5px;
								border-top-left-radius: 5px;
								-moz-border-radius-topright: 5px;
								-webkit-border-top-right-radius: 5px;
								border-top-right-radius: 5px;
							}
							#mailform .Q-group h3 {
								background:url(/jquery/themes/hot-sneaks/images/ui-bg_dots-small_35_35414f_2x2.png);
								padding-left:10px;line-height:32px;color:#fff;
								-moz-border-radius-topleft: 4px;
								-webkit-border-top-left-radius: 4px;
								border-top-left-radius: 4px;
								-moz-border-radius-topright: 4px;
								-webkit-border-top-right-radius: 4px;
								border-top-right-radius: 4px;
							}
							#mailform .fieldcontainer {margin:10px;}
							#mailform .fieldcontainer label .Q-title {width:100px;float:left;white-space:nowrap;}
							#mailform #fm-button {
								background: #93c3cd url(/jquery/themes/hot-sneaks/images/ui-bg_diagonals-small_50_93c3cd_40x40.png) 50% 50% repeat;
							}
							#mailform .commandButton {
								border:solid #444 1px;
								line-height:32px;
								height:32px;
								-moz-border-radius:14px; -webkit-border-radius:14px; border-radius:14px;
								padding:0 20px 0 20px;
								cursor:pointer;
								margin:0 2px 0 2px;
							}
							#mailform #fm-return, #mailform #fm-reset {
								background: #0078ae url(/jquery/themes/start/images/ui-bg_glass_55_f8da4e_1x400.png) 50% 50% repeat-x;
							}
							#mailform #fm-submit {
								background: #0078ae url(/jquery/themes/start/images/ui-bg_glass_45_0078ae_1x400.png) 50% 50% repeat-x;
								color:#fff;
							}
							#mailformtable .fm-group {
								background:url(/jquery/themes/hot-sneaks/images/ui-bg_dots-small_35_35414f_2x2.png);
								color:#fff;
								text-shadow: 1px 1px 1px #aaa;
								padding-left:10px;
								margin-top:10px;
								-moz-border-radius-topleft: 8px;
								-webkit-border-top-left-radius: 8px;
								border-top-left-radius: 8px;
								-moz-border-radius-topright: 8px;
								-webkit-border-top-right-radius: 8px;
								border-top-right-radius: 8px;
							}
							#mailform fieldset {border:solid #aaa 1px;}
							#mailform label,form input,form select,form textarea{font-size:13px;font-weight:normal;line-height:normal;}
							#mailform input[type=checkbox],form input[type=radio]{cursor:pointer;}
							#mailform input[type=text],form input[type=password],form textarea,form select,form .uneditable-input{
								display:inline-block;width:210px;margin:0;padding:2px;font-size:13px;
								line-height:18px;height:18px;color:#444;border:1px solid #ccc;
								-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
							}
							#mailform select,form input[type=file]{height:24px;line-height:24px;}
							#mailform input[type=text],form input[type=password],form select,form textarea{
								-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;
								-moz-transition:border linear 0.2s,box-shadow linear 0.2s;
								transition:border linear 0.2s,box-shadow linear 0.2s;
								-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);
								-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);
								box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);
							}
							#mailform input[type=text]:focus,form input[type=password]:focus,form textarea:focus{
								outline:none;border-color:rgba(82, 168, 236, 0.8);
								-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);
								-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);
								box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);
							}
							#mailform textarea.xxlarge {overflow-y:scroll;}
							#mailform input[readonly]:focus,form textarea[readonly]:focus,form input.disabled{
								background:#f5f5f5;border-color:#ddd;
								-webkit-box-shadow:none;
								-moz-box-shadow:none;
								box-shadow:none;
							}
							/* メッセージボックスのデザイン */
							#mailform #messageBox {max-width:480px;margin:50px auto;
								border:solid #aaa 1px;
								-moz-border-radius-topleft: 5px;
								-webkit-border-top-left-radius: 5px;
								border-top-left-radius: 5px;
								-moz-border-radius-topright: 5px;
								-webkit-border-top-right-radius: 5px;
								border-top-right-radius: 5px;
							}
							#mailform #messageBox h3 {
								background:url(/jquery/themes/hot-sneaks/images/ui-bg_diagonals-small_50_ff3853_40x40.png);
								padding-left:10px;line-height:32px;color:#fff;
								-moz-border-radius-topleft: 4px;
								-webkit-border-top-left-radius: 4px;
								border-top-left-radius: 4px;
								-moz-border-radius-topright: 4px;
								-webkit-border-top-right-radius: 4px;
								border-top-right-radius: 4px;
							}
							#mailform #messageBox div div {margin:10px;}
							#mailform #messageBox ul, #mailform #messageBox ol {margin-top:20px;line-height:18px;}
							#mailform #messageBox .ui-body-b {
								margin:10px;
								background: #93c3cd url(/jquery/themes/hot-sneaks/images/ui-bg_diagonals-small_50_93c3cd_40x40.png) 50% 50% repeat;
							}
							/* 確認画面のデザイン */
							#fm-confirm {
								border:solid #aaa 1px;
								padding:10px;
								-moz-border-radius-topleft: 5px;
								-webkit-border-top-left-radius: 5px;
								border-top-left-radius: 5px;
								-moz-border-radius-topright: 5px;
								-webkit-border-top-right-radius: 5px;
								border-top-right-radius: 5px;
							}
							#mailformtable {list-style-type:none;margin:0px;padding:0px;}
							#mailformtable li {
								border:solid #aaa 1px;
								margin-bottom:5px;
								background:-moz-linear-gradient(top, #ffe,#fff,#dfe);
								background:-webkit-gradient(linear, left top, left bottom, from(#ffe),color-stop(0.5, #fff), to(#dfe));
							}
							#mailformtable li p {margin:10px;}
							#mailformtable .que {float:left;width:140px;}
							#mailformtable .ans {max-width:420px;border-left:solid #aaa 1px;}
							html>/**/body #mailformtable .ans {float:left;}
							html>/**/body #mailformtable li .both {clear:both;}
							#mailform #buttonArea {
								padding:5px;
								text-align:center;
								background: #93c3cd url(/jquery/themes/hot-sneaks/images/ui-bg_diagonals-small_50_93c3cd_40x40.png) 50% 50% repeat;
							}
							#mailform #buttonArea fieldset {padding:5px;}
							.ui-corner-all {
								border-radius: 5px;
								behavior: url(border-radius.htc);
							}

※サンプルのスタイルシートはCSS3形式です。スマートフォンやタブレットでも併用可能なように設計されています。
このスタイルシートだけでPC、スマートフォン、タブレットで表示可能です。各解像度に合わせて自動でレイアウトが調整されます。
Microsoft Internet Explororは、IE9以降がCSS3をサポートしています。スマートフォン、タブレットではすべてのキャリアがCSS3をサポートします。

確認画面のソースは以下のようになっています。スタイルシートの設計にご利用ください。


							<form action="formmail.php" method="post" name="mailform" id="mailform" data-ajax="false">
								<input type="hidden" name="CGI_Quepage" value="http://utf.trycms.net/mobile/sample.html" />
								<input type="hidden" name="CGI_Status" value="1" />
								<div id="fm-confirm">
									<input type="hidden" name="CGI_Check" value="Q1:お名前,Q3:メールアドレス" />
									<input type="hidden" name="CGI_Connectfield"
										value="Q4:ご住所, ,Q4-zip,Q4-pre,Q4-city,Q4-addr,Q4-buill;Q5:生年月日,-,Q5-year,Q5-month,Q5-day" />
									<input type="hidden" name="CGI_Hidden"
										value="Q3:メールアドレス(再入力),Q4-zip,Q4-pre,Q4-city,Q4-addr,Q4-buill,Q5-year,Q5-month,Q5-day" />
									<input type="hidden" name="CGI_Comparison"
										value="Q3:メールアドレス,Q3:メールアドレス(再入力)" />
									<ul id="mailformtable">
										<li id="Group1" class="fm-group" data-theme="b"><p>あなたの情報</p></li>
										<li id="Q1-container" class="ui-grid-a ui-corner-all">
											<div class="que ui-block-a" id="que1"><p>Q1:お名前
												<b style="color:#f00;">※</b></p></div>
											<div class="ans ui-block-b"><p><input type="hidden" name="Q1:お名前"
												value="坂本　竜馬" />坂本　竜馬</p></div>
											<div class="both"></div>
										</li>
										<li id="Q2-container" class="ui-grid-a ui-corner-all">
											<div class="que ui-block-a" id="que2"><p>Q2:フリガナ</p></div>
											<div class="ans ui-block-b"><p><input type="hidden" name="Q2:フリガナ"
												value="サカモトリョウマ" />サカモトリョウマ</p></div>
											<div class="both"></div>
										</li>
										<li id="Q3-container" class="ui-grid-a ui-corner-all">
											<div class="que ui-block-a" id="que3"><p>Q3:メールアドレス
												<b style="color:#f00;">※</b></p></div>
											<div class="ans ui-block-b"><p><input type="hidden" name="Q3:メールアドレス"
												value="ryoma@company.co.jp" />ryoma@company.co.jp</p></div>
											<div class="both"></div>
										</li>
										<li id="Q4-container" class="ui-grid-a ui-corner-all">
											<div class="que ui-block-a" id="que4"><p>Q4:ご住所</p></div>
											<div class="ans ui-block-b"><p><input type="hidden" name="Q4:ご住所"
												value="101-0035 東京都 千代田区 神田紺屋町 " />101-0035 東京都 千代田区 神田紺屋町 </p></div>
											<div class="both"></div>
										</li>
										<li id="Q5-container" class="ui-grid-a ui-corner-all">
											<div class="que ui-block-a" id="que5"><p>Q5:生年月日</p></div>
											<div class="ans ui-block-b"><p><input type="hidden" name="Q5:生年月日"
												value="1975-10-10" />1975-10-10</p></div>
											<div class="both"></div>
										</li>
										<li id="Q6-container" class="ui-grid-a ui-corner-all">
											<div class="que ui-block-a" id="que6"><p>Q6:ご趣味</p></div>
											<div class="ans ui-block-b"><p><input type="hidden" name="Q6:ご趣味"
												value="パソコン/インターネット" />パソコン/インターネット</p></div>
											<div class="both"></div>
										</li>
										<li id="Group2" class="fm-group" data-theme="b"><p>勤務先情報</p></li>
										<li id="Q7-container" class="ui-grid-a ui-corner-all">
											<div class="que ui-block-a" id="que7"><p>Q7:勤務先</p></div>
											<div class="ans ui-block-b"><p><input type="hidden" name="Q7:勤務先" value="" /> </p></div>
											<div class="both"></div>
										</li>
										<li id="Q8-container" class="ui-grid-a ui-corner-all">
											<div class="que ui-block-a" id="que8"><p>Q8:フリガナ</p></div>
											<div class="ans ui-block-b"><p><input type="hidden" name="Q8:フリガナ" value="" /> </p></div>
											<div class="both"></div>
										</li>
										<li id="Q9-container" class="ui-grid-a ui-corner-all">
											<div class="que ui-block-a" id="que9"><p>Q9:業種</p></div>
											<div class="ans ui-block-b"><p><input type="hidden" name="Q9:業種" value="IT関連" />IT関連</p></div>
											<div class="both"></div>
										</li>
										<li id="Q10-container" class="ui-grid-a ui-corner-all">
											<div class="que ui-block-a" id="que10"><p>Q10:所属部署</p></div>
											<div class="ans ui-block-b"><p><input type="hidden" name="Q10:所属部署" value="" /> </p></div>
											<div class="both"></div>
										</li>
										<li id="Q11-container" class="ui-grid-a ui-corner-all">
											<div class="que ui-block-a" id="que11"><p>Q11:電話番号</p></div>
											<div class="ans ui-block-b"><p><input type="hidden" name="Q11:電話番号" value="" /> </p></div>
											<div class="both"></div>
										</li>
										<li id="Q12-container" class="ui-grid-a ui-corner-all">
											<div class="que ui-block-a" id="que12"><p>Q12:内容</p></div>
											<div class="ans ui-block-b"><p><input type="hidden" name="Q12:内容" value="" /></p></div>
											<div class="both"></div>
										</li>
									</ul>
									<br style="clear:both;" />
										<input type="checkbox" name="CGI_auth" value="checked"
										id="CGI_auth" /><label for="CGI_auth">利用規約/プライバシーポリシーに同意する</label>
									<div id="buttonArea" class="ui-body ui-body-b" style="margin-top:10px;text-align:center;">
										<fieldset data-role="controlgroup" data-type="horizontal">
											<input type="button" value="戻る" data-theme="d" data-icon="arrow-l"
												id="fm-return" class="commandButton" onclick="history.back()" />
											<input type="button" value="確認OK!! 送信する" data-theme="b" data-icon="check"
												id="fm-submit" class="commandButton" onclick="gosubmit()" />
										</fieldset>
									</div>
								</div>
							</form>

以下は、エラーメッセージの完全なhtmlソースです。
エラーメッセージのデザインのスタイルシートにご利用ください。


							<form action="formmail.php" method="post" name="mailform" id="mailform" data-ajax="false">
								<div id="messageBox">
									<div data-role="collapsible" data-theme="e" data-content-theme="c" data-inset="true" data-collapsed="false">
										<h3 id="caption-err">送信エラー</h3>
										<div><b>申し訳有りません。メールの送信に失敗しました。<br />以下の内容をご確認していただき、再送信してください。<br /></b>
											<ol style="margin:10px 0 0 0;">
												<li style="margin-bottom:10px;">必須項目
													<b>Q1:お名前,Q3:メールアドレス</b> が未記入又は、値に問題が有ります。<br />以下の項目は、すべて必須項目です。
													<ul>
														<li>Q1:お名前</li>
														<li>Q3:メールアドレス</li>
													</ul></li>
											</ol>
										</div>
									</div>
									<div class="ui-body ui-body-b" style="margin-top:10px;text-align:center;">
										<fieldset data-role="controlgroup" data-type="horizontal">
											<input type="button" value="戻る" data-theme="d" data-icon="arrow-l"
												 id="fm-return" class="commandButton" onclick="history.back();" />
											<input type="button" value="Homeに戻る" class="commandButton"
												 id="fm-home" onclick="location.href='/'" />
										</fieldset>
									</div>
								</div>
							</form>

送信完了のhtmlソースも全く同じ構成ですが、h3のclassが、caption-errからcaption-msgに変更されますので、このクラスを使用してタイトルバーの背景を色分けできます。


							<form action="formmail.php" method="post" name="mailform" id="mailform" data-ajax="false">
								<div id="messageBox">
									<div data-role="collapsible" data-theme="b" data-content-theme="c" data-inset="true" data-collapsed="false">
										<h3 id="caption-msg">送信完了</h3>
										<div>ありがとうございました。<br />　<br />正常にメールを送信しました。<br />
											追って担当者よりご連絡させていただきますので、今しばらくお待ちください。
										</div>
									</div>
									<div class="ui-body ui-body-b" style="margin-top:10px;text-align:center;">
										<fieldset data-role="controlgroup" data-type="horizontal">
											<input type="button" value="戻る" data-theme="d" data-icon="arrow-l"
											id="fm-return" class="commandButton" onclick="location.href='http://utf.trycms.net/mobile/sample.html'" />
											<input type="button" value="Homeに戻る" data-theme="d" data-icon="home"
											id="fm-home" class="commandButton" onclick="location.href='/'" />
										</fieldset>
									</div>
								</div>
							</form>

※スタイルシートに関するお問い合わせはご遠慮ください。別途サポート費用が発生します。

マルチパラメータ機能を使う
フォームの自動設計機能ではサポートしていませんが、リストボックスや、ラジオボタンで選択された値により複数の情報を送信する一度に送信する「マルチパラメータ」機能もサポートしています。たとえば、件名を選択してメールの送信先も同時に設定する事ができます。
1. 自動設計モードで仮のラジオボタンまたは、リストボックスを作成します。
2. フォームを保存すると、formmail.phpと同じディレクトリにformmail.txtと言うソースが保存されますので、上書きされないよう「formmail2.txt」のようにファイル名を変更しておきます。
3. ファイル名を変更したformmail2.txtをテキストエディタで開き修正を加えます。
  【変更前のソース】
```
									<fieldset data-role="controlgroup">
										<legend>件名 <b style="color:#a00;">※</b></legend>
										<label for="Q1-1"><p class="Q-radio"><input type="radio" name="件名" id="Q1-1"
											class="Q1-radio" value="お問合せ" />お問合せ</p></label>
										<label for="Q1-2"><p class="Q-radio"><input type="radio" name="件名" id="Q1-2"
											class="Q1-radio" value="ご予約" />ご予約</p></label>
										<label for="Q1-3"><p class="Q-radio"><input type="radio" name="件名" id="Q1-3"
											class="Q1-radio" value="ご意見ご希望" />ご意見ご希望</p></label>
									</fieldset>
								
```
  【変更後のソース】
```
									<fieldset data-role="controlgroup">
										<legend>件名 <b style="color:#a00;">※</b></legend>
										<label for="Q1-1"><p class="Q-radio"><input type="radio" name="CGI_multiparameter" id="Q1-1"
											class="Q1-radio" value="Subject=お問合せ,Mailto=abc@company.co.jp" />お問合せ</p></label>
										<label for="Q1-2"><p class="Q-radio"><input type="radio" name="CGI_multiparameter" id="Q1-2"
											class="Q1-radio" value="Subject=ご予約,Mailto=efg@company.co.jp" />ご予約</p></label>
										<label for="Q1-3"><p class="Q-radio"><input type="radio" name="CGI_multiparameter" id="Q1-3"
											class="Q1-radio" value="Subject=ご意見ご希望,Mailto=hij@company.co.jp" />ご意見ご希望</p></label>
									</fieldset>
								
```
  まず違いは、3行目のnameプロパティが「件名」から「CGI_multiparameter」に変更され、 4行目でvalueプロパティに複数の設問と値が半角カンマで区切られて設定されています。同じように、全てのラジオボタンの設定を行ってください。この例では、お客様が2番目の「ご予約」を選択すると、メールのタイトルは「ご予約」、メールは「efg@company.co.jp」に送信されます。
  このサンプルでは、メールのタイトルSubjectと送信先Mailtoを設定していますので、確認画面には表示されません。また、これらは、コマンドですので「必須」を設定する事は出来ません。必須にする場合は、送信するボタン[確認画面へ]に」以下のjavascriptをご利用ください。
  【変更前のソース】
```
									<button type="button" data-theme="b" data-icon="check" onclick="this.form.submit();"
										id="fm-submit" class="commandButton">確認画面へ</button>
								
```
  【変更後のソース】
```
									<button type="button" data-theme="b" data-icon="check" onclick="
										cnt = $('.Q1-radio').length;
										m=false;
										for(i=0;i<cnt;i++) {
											if($('.Q1-radio')[i].checked) {
												m=true;
												break;
											}
										}
										if (!m) {
											alert('件名を選択してください。');
											$('.Q1-radio')[0].focus();
											return;
										}
										this.form.submit();"
										id="fm-submit" class="commandButton">確認画面へ</button>
								
```
  このjavascriptもjQuery用ですのでjqueryがインクルードされていなければなりません。
SubjectやMailtoのようなコマンド以外も作成可能ですが、この場合、マルチで設定された項目はすべて最後に追加される事にご注意ください。確認画面でもフォームの一番最後になっています。
環境設定で「設問を50音順(Ascii)で並び替える」を指定して並び替える事も可能ですが、この場合グループを指定できません。並び替えられた設問は、グループを無視して並び替えられます。また、文字コード順(Ascii)で並び替えられる事にご注意ください。Q2よりQ11のほうが小さいと判断され前になります。この現象を避けるためには「Q02」のように桁を揃えて設定します。

ご覧のように、並び替えたため、確認画面ではグループ設定より上に件名とお問い合わせ内容が移動しています。
サーバのデフォルト文字コードについて(設問文字化け対策)
多くのレンタルサーバでは、デフォルトの文字コードが自動に設定されていますので、フォームの作成者が作成した文字コードでデータが送信されますが、一部のレンタルサーバ会社(CPIなど)ではデフォルトの文字コードをEUCｰJPに設定しているため、どの文字コードのページから送信されたデータもEUC-JPで送信されるため文字化けの原因になってしまいます。
このような場合は、環境設定の[Server Encode]をEUC-JPに設定してください。