入力フォームのデザイン変更

「すぐ使えるメールフォーム」の入力フォームのデザインは、HTML形式のテンプレートで変更できます。管理画面からの項目設定が終わった後に、導入するWebサイトのデザインに合わせて templates/ ディレクトリ内のテンプレートを編集して下さい。Dreamweaver などのホームページ編集ツールが使えます。

テンプレート（HTMLファイル）も スタイルシート（CSSファイル）も通常のホームページと同じように編集できます。また、ドキュメントタイプの変更（HTML5、HTML4.01、XHTML など）や文字コードの変更も可能です。デザイン変更は設置をされる方が普段行っているHTML編集の方法で自由に行えます。

このページでは、「すぐ使えるメールフォーム」で使える便利なCSSクラスや、入力フォームの時によく使う表示コントロールの方法等をご紹介します。なお、このページでは入力フォームの見た目の調整方法のみをご説明しますので、メールの設定など、問い合せフォームの動作設定については「運用前の設定」のページをご参照下さい。

目次

• デザイン編集のタイミング
• デザイン編集対象ファイル
• 追加のメッセージ（入力指示）を表示する
• PC/タブレット/スマートフォンで表示を変える
• テキスト入力欄の幅と高さの変更
  • テキスト入力欄の幅の設定
  • テキスト入力欄の高さの設定
• 選択肢の並べ方を変える（横並べ/縦並べ）
• 選択肢によって入力欄の表示をON/OFFする

デザイン編集のタイミング

入力フォームのデザイン変更は、理想的には管理画面からの項目設定が終わった後に行って下さい。管理画面での項目設定の前にもデザイン変更は行えますし、テンプレートでのデザイン変更を行った後に管理画面から項目設定を変更しても差し支えありませんが、細かい位置調整などは項目名の長さや選択肢の長さが決まった後に行った方が分かりやすいですので、この順番をお勧めしています。

また、使わない項目は自動的に非表示なる設定がしてありデザイン調整作業が不要になりますので、この点からも、使用する項目が決定してからの編集をお勧めします。

使わない項目が削除される仕組みについて詳しくは、テンプレートファイル内の HTML コメントを参照して下さい。

デザイン編集対象ファイル

入力フォームのデザインに関わるテンプレートファイルは以下の通りです。

入力画面

templates/input.html

確認画面

templates/confirm.html

完了画面（お礼画面）

templates/thanks.html

スタイルシート
（CSSファイル）

(Ver. 1.6 以上) css/sugu.css
(Ver. 1.5 以下) css/site.css

追加のメッセージ（入力指示）を表示する

<!-- inputfield_zip begin -->
<!-- 郵便番号 -->
<div class="pure-g sugu-control-group %_zip_if_error_% %_zip_if_required_%">
<label class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xl-1-5 sugu-label sugu-label-right" for="zip">%_zip_local_name_% <abbr id="zip_required" class="required" title="必須項目">※</abbr></label>
	<div class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-2-3 pure-u-lg-3-4 pure-u-xl-3-5">
	<div class="pure-form-message">ハイフン区切りで入力して下さい。</div>
	<div class="pure-form-message message">%_zip_msg_%</div>
	<input class="pure-input-1-3" type="text" name="zip" id="zip" value="%_zip_%" placeholder="例：123-4567" maxlength="%_zip_maxlength_%">
	</div>
</div>
<!-- inputfield_zip end -->

<!-- inputfield_zip begin -->
<!-- 郵便番号 -->
<div class="pure-g sugu-control-group %_zip_if_error_% %_zip_if_required_%">
<label class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xl-1-5 sugu-label sugu-label-right" for="zip">%_zip_local_name_% <abbr id="zip_required" class="required" title="必須項目">※</abbr></label>
	<div class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-2-3 pure-u-lg-3-4 pure-u-xl-3-5">
	<div class="pure-form-message message">%_zip_msg_%</div>
	<input class="pure-input-1-3" type="text" name="zip" id="zip" value="%_zip_%" placeholder="例：123-4567" maxlength="%_zip_maxlength_%">
	<div class="pure-form-message-inline">ハイフン区切りで入力して下さい。</div><!-- 改行しない追加のメッセージ -->
	</div>
</div>
<!-- inputfield_zip end -->

<!-- inputfield_zip begin -->
<!-- 郵便番号 -->
<div class="control-group %_zip_if_error_% %_zip_if_required_%">
	<label class="control-label" for="zip">%_zip_local_name_% <abbr id="zip_required" class="required" title="必須項目">※</abbr></label>
	<div class="controls">
		<span class="help-block">ハイフン区切りで入力して下さい。</span>
		<span class="help-block">%_zip_msg_%</span>
		<input class="input-small" type="text" name="zip" id="zip" value="%_zip_%" placeholder="例：123-4567" maxlength="%_zip_maxlength_%">
	</div>
</div>
<!-- inputfield_zip end -->

<!-- inputfield_zip begin -->
<!-- 郵便番号 -->
<div class="control-group %_zip_if_error_% %_zip_if_required_%">
	<label class="control-label" for="zip">%_zip_local_name_% <abbr id="zip_required" class="required" title="必須項目">※</abbr></label>
	<div class="controls">
		<span class="help-block">%_zip_msg_%</span>
		<input class="input-small" type="text" name="zip" id="zip" value="%_zip_%" placeholder="例：123-4567" maxlength="%_zip_maxlength_%">
		<span class="help-text">ハイフン区切りで入力して下さい。</span><!-- 改行しない追加のメッセージ -->
	</div>
</div>
<!-- inputfield_zip end -->

PC/タブレット/スマートフォンで表示を変える

PC、タブレット、スマートフォンで一部の内容を変更したい場合は、CSSの設定で表示を切り替える事ができます。用途としては例えば、PCのみでしか閲覧できないサイトへのリンクは、スマートフォンでは表示しない、などのコントロールです。

<!-- PCに表示 -->
<p class="visible-desktop"><a href="http://www.example.com/">関連情報はこちら</a></p>

<!-- スマホのみに表示 -->
<p class="visible-phone"><a href="http://www.example.com/i/">関連情報はこちら</a></p>

// 何もメディアクエリーを指定しない場合、まずスマホに適用される
.visible-desktop {
	display: none;
}
.visible-phone {
	display: block;
}
@media screen and (min-width: 35.5em) {
	// その後、サイズの大きい端末でどうするかを指定する
	.visible-phone { // タブレットサイズ以上では表示しないという指定
		display: none;
	}
}
@media screen and (min-width: 48em) {
	.visible-desktop { // PCサイズ以上で表示するという指定
		display: block;
	}
}

// ここにスマホでの指定

@media screen and (min-width: 35.5em) { //およそ 568px 以上
	// ここにタブレット縦置きの指定
}
@media screen and (min-width: 48em) { //およそ 768px 以上
	// ここにタブレット横置きの指定
}
@media screen and (min-width: 64em) { //およそ 1024px 以上
	// ここにPCの指定
}
@media screen and (min-width: 80em) { //およそ 1280px 以上
	// ここに大きいディスプレイの指定
}

<!-- PCのみに表示 -->
<p class="hidden-phone"><a href="http://www.example.com/">関連情報はこちら</a></p>

<!-- スマホのみに表示 -->
<p class="visible-phone"><a href="http://www.example.com/i/">関連情報はこちら</a></p>

テキスト入力欄の幅と高さの変更

テキスト入力欄は幅と高さの変更が可能です。なお、フォームの設定上、テキスト入力欄の幅は入力される内容より少し幅広に設定しておくのがコツです。例えば郵便番号なら、きっちり7文字分にせずある程度幅の余裕があると入力しやすくなります。

テキスト入力欄の幅の設定

<!-- 全体幅の 4分の1: 初期設定の 1行テキスト01 の幅 -->
<input class="pure-input-1-4" type="text" name="text_01" id="text_01" value="%_text_01_%" placeholder="1行テキスト01の入力案内" maxlength="%_text_01_maxlength_%">

<!-- 全体幅の 3分の1: 初期設定の 郵便番号 の幅 -->
<input class="pure-input-1-3" type="text" name="zip" id="zip" value="%_zip_%" placeholder="例：123-4567" maxlength="%_zip_maxlength_%">

<!-- 全体幅の 2分の1: 初期設定の 電話番号 の幅 -->
<input class="pure-input-1-2" type="text" name="tel" id="tel" value="%_tel_%" placeholder="例：03-1234-5678" maxlength="%_tel_maxlength_%">

<!-- 全体幅の 3分の2: 初期設定の メールアドレス の幅 -->
<input class="pure-input-2-3" type="text" name="mail" id="mail" value="%_mail_%" placeholder="半角で入力して下さい" maxlength="%_mail_maxlength_%">

<!-- 全体幅に対して100%幅: 初期設定の 町名・番地 の幅 -->
<input class="pure-input-1" type="text" name="street" id="street" value="%_street_%" placeholder="町名・番地" maxlength="%_street_maxlength_%">

<!-- 全角4文字分位（かなり小さい）: 1行テキスト01 の初期設定 -->
<input class="input-mini" type="text" name="text_01" id="text_01" value="%_text_01_%" placeholder="1行テキスト01の入力案内" maxlength="%_text_01_maxlength_%">

<!-- 全角6文字分位: 「姓」「名」「郵便番号」の初期設定 -->
<input class="input-small" type="text" name="text_01" id="text_01" value="%_text_01_%" placeholder="1行テキスト01の入力案内" maxlength="%_text_01_maxlength_%">

<!-- 全角11文字分位: 「市区町村」の初期設定 -->
<input class="input-medium" type="text" name="text_01" id="text_01" value="%_text_01_%" placeholder="1行テキスト01の入力案内" maxlength="%_text_01_maxlength_%">

<!-- 全角15文字分位: 「メールアドレス」の初期設定 -->
<input class="input-large" type="text" name="text_01" id="text_01" value="%_text_01_%" placeholder="1行テキスト01の入力案内" maxlength="%_text_01_maxlength_%">

<!-- 上下2つの中間: 「1行テキスト05」「テキストエリア02」の初期設定 -->
<input class="input-xlarge" type="text" name="text_01" id="text_01" value="%_text_01_%" placeholder="1行テキスト01の入力案内" maxlength="%_text_01_maxlength_%">

<!-- 最大幅: 「町名・番地」「ビル名等」の初期設定 -->
<input class="input-xxlarge" type="text" name="text_01" id="text_01" value="%_text_01_%" placeholder="1行テキスト01の入力案内" maxlength="%_text_01_maxlength_%">

テキスト入力欄の高さの設定

テキストエリアの高さを変更するには、rows 属性の値を変更して下さい（下記赤字部分）。

※ Ver. 1.6 以上のバージョンは初期設定のタグが下記のサンプルとは異なります。赤字の部分だけを変更して下さい。

<!-- inputfield_message begin -->
<!-- お問合せ内容 -->
<div class="control-group %_message_if_error_% %_message_if_required_%">
	<label class="control-label" for="message">%_message_local_name_% <abbr id="message_required" class="required" title="必須項目">※</abbr></label>
	<div class="controls">
		<span class="help-block">%_message_msg_%</span>
		<textarea class="input-xxlarge" rows="5" name="message" id="message" placeholder="ご自由にご記入下さい">%_message_%</textarea>
	</div>
</div>
<!-- inputfield_message end -->

選択肢の並べ方を変える（横並べ/縦並べ）

チェックボックスやラジオボタン項目の選択肢の並べ方を、横並びにするか、改行して縦に並べるかを変更できます。長めの選択肢を設定した場合は縦に並べ、短いものが多い場合は横並べにするとフォームが見やすくなります。

なお、選択肢を横並べにした時に、特定の好きな位置だけに改行を入れる事はできません。

<!-- inputfield_radio_01 begin -->
<!-- ラジオボタン01 -->
<div class="pure-g sugu-control-group %_radio_01_if_error_% %_radio_01_if_required_%">
<label class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xl-1-5 sugu-label sugu-label-right">%_radio_01_local_name_% <abbr id="radio_01_required" class="required" title="必須項目">※</abbr></label>
	<div class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-2-3 pure-u-lg-3-4 pure-u-xl-3-5">
	<div class="pure-form-message message">%_radio_01_msg_%</div>
	<!-- inputfield_radio_01_item begin -->
	<label class="pure-radio sugu-inline"><!-- 「sugu-inline」クラスを指定 -->
	<input type="radio" name="radio_01" id="radio_01_%_no_%" value="%_value_%"> %_value_%
	</label>
	<!-- inputfield_radio_01_item end -->
	</div>
</div>
<!-- inputfield_radio_01 end -->

<!-- inputfield_radio_01 begin -->
<!-- ラジオボタン01 -->
<div class="pure-g sugu-control-group %_radio_01_if_error_% %_radio_01_if_required_%">
<label class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xl-1-5 sugu-label sugu-label-right">%_radio_01_local_name_% <abbr id="radio_01_required" class="required" title="必須項目">※</abbr></label>
	<div class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-2-3 pure-u-lg-3-4 pure-u-xl-3-5">
	<div class="pure-form-message message">%_radio_01_msg_%</div>
	<!-- inputfield_radio_01_item begin -->
	<label class="pure-radio"><!-- 「sugu-inline」と指定しなければ縦に並ぶ -->
	<input type="radio" name="radio_01" id="radio_01_%_no_%" value="%_value_%"> %_value_%
	</label>
	<!-- inputfield_radio_01_item end -->
	</div>
</div>
<!-- inputfield_radio_01 end -->

<!-- inputfield_radio_01 begin -->
<!-- ラジオボタン01 -->
<div class="control-group %_radio_01_if_error_% %_radio_01_if_required_%">
	<label class="control-label">%_radio_01_local_name_% <abbr id="radio_01_required" class="required" title="必須項目">※</abbr></label>
	<div class="controls">
		<span class="help-block">%_radio_01_msg_%</span>
		<!-- inputfield_radio_01_item begin -->
		<label class="radio inline"><!-- 「inline」クラスを指定 -->
		<input type="radio" name="radio_01" id="radio_01_%_no_%" value="%_value_%">%_value_%
		</label>
		<!-- inputfield_radio_01_item end -->
	</div>
</div>
<!-- inputfield_radio_01 end -->

<!-- inputfield_radio_01 begin -->
<!-- ラジオボタン01 -->
<div class="control-group %_radio_01_if_error_% %_radio_01_if_required_%">
	<label class="control-label">%_radio_01_local_name_% <abbr id="radio_01_required" class="required" title="必須項目">※</abbr></label>
	<div class="controls">
		<span class="help-block">%_radio_01_msg_%</span>
		<!-- inputfield_radio_01_item begin -->
		<label class="radio"><!-- 「inline」と指定しなければ縦に並ぶ -->
		<input type="radio" name="radio_01" id="radio_01_%_no_%" value="%_value_%">%_value_%
		</label>
		<!-- inputfield_radio_01_item end -->
	</div>
</div>
<!-- inputfield_radio_01 end -->

選択肢によって入力欄の表示をON/OFFする

ラジオボタンを選択した時に他の入力欄を表示する設定も可能です。例えば、「その他」というラジオボタンを選んだ時に詳細入力用のテキスト入力欄を表示するなどです。

後から表示する入力欄は1行テキスト、フリー入力（テキストエリア）、チェックボックス、ラジオボタン、選択リストから複数設定可能です。また、このような設定を行うラジオボタンが複数あっても構いません。

できない事

ラジオボタンが選択された後に表示したい項目に「初期値」が設定されているとこの表示コントロールはできません

入力欄の表示ON/OFFのための変更点 1/3

初期設定では使用していませんが、js/site.js という JavaScript ファイルがありますのでこのファイルを編集して下さい。文字コードは UTF-8 で保存して下さい。赤字が追加、グレーの取り消し線は削除です。元々あったコードは使っていませんので削除してもOKです。将来に備えて取っておく場合は、Ver. 1.2 までは元のままだとミスでエラーになるので、「メールアドレスの入力が一致しません。」の両脇にある青字のダブルクオートも追加して下さい。

/* 未使用 */

function mail_match(Input, Conf, Id){
	if (Input == Conf){
		return true;
	} else {
		
		alert("メールアドレスの入力が一致しません。"); /* この行にダブルクオートを追加 */
		return false;
	}
}

function set_desc_field_control(TargetRadio, TargetValue, DescArea){
	var AttachedItem;
	$("input[id^='"+TargetRadio+"']").each( function(){
		if ($(this).val() == TargetValue){
			AttachedItem = $(this);
			$(this).on( "click", function( event ) { 
				if ($(this).is(":checked")){
					$("#"+DescArea).show();
				}
			});
		} else {
			$(this).on( "click", function( event ) {
				if ($(this).is(":checked") && has_input(DescArea)==false){
					$("#"+DescArea).hide();
				}
			});
		}
	});

	if (AttachedItem.is(":checked") == false && has_input(DescArea)==false) {
		$("#"+DescArea).hide();
	};
}

function has_input(WrapperId){
	var Result = false;
	$("#"+WrapperId+" input[type='text'], #"+WrapperId+" textarea").each( function(){
		if ($(this).val().length>0){Result = true;}
	});
	$("#"+WrapperId+" input[type='checkbox'], #"+WrapperId+" input[type='radio']").each( function(){
		if ($(this).val().length>0 && $(this).is(":checked")){Result = true;}
	});
	$("#"+WrapperId+" option").each( function(){
		if ($(this).val().length>0 && $(this).is(":selected")){Result = true;}
	});
	return Result;
}

入力欄の表示ON/OFFのための変更点 2/3

templates/input.html を編集して、表示のON/OFFを行いたいラジオボタンとテキスト欄が近くに表示されるように配置して下さい。この時、テキスト入力欄の周りを<span>タグか <div>タグで囲ってid属性を付けて下さい（下記例の赤字部分）。該当するラジオボタンがクリックされた時に一緒に項目名なども表示する場合は、このタグの中に入れて下さい。

以下の例は、「ラジオボタン01」を使って「最初に知ったきっかけ」を尋ね、ラジオボタンの選択が「その他」だったら追加のテキスト欄「1行テキスト02」にその内容を入力してもらう、という想定の設定です。

後から表示する入力欄は1行テキストだけでなく、フリー入力（テキストエリア）、チェックボックス、ラジオボタン、選択リストから複数同時に使えます。これらの項目には初期値を設定しないで下さい。

<!-- inputfield_radio_01 begin -->
<!-- ラジオボタン01 -->
<div class="control-group %_radio_01_if_error_% %_radio_01_if_required_%">
	<label class="control-label">%_radio_01_local_name_% <abbr id="radio_01_required" class="required" title="必須項目">※</abbr></label>
	<div class="controls">
		<span class="help-block"><span class="text-info">最初に知ったきっかけは何でしたか？</span></span>
		<span class="help-block">%_radio_01_msg_%</span>
		<!-- inputfield_radio_01_item begin -->
		<label class="radio">
		<input type="radio" name="radio_01" id="radio_01_%_no_%" value="%_value_%">%_value_%
		</label>
		<!-- inputfield_radio_01_item end -->

		<!-- inputfield_text_02 begin -->
		<span id="additional-field">
		こちらにも入力をお願いします：<input class="input-xlarge" type="text" name="text_02" id="text_02" value="%_text_02_%" placeholder="「その他」は具体的に何でしたか？" maxlength="%_text_02_maxlength_%">
		</span>
		<!-- inputfield_text_02 end -->

	</div>
</div>
<!-- inputfield_radio_01 end -->

入力欄の表示ON/OFFのための変更点 3/3

引き続き templates/input.html を編集して、ページ末尾に以下のようにスクリプトタグを追加して下さい（赤字部分）。その際、青字部分は左から順番に以下の値を設定して下さい（カッコ内は、コードサンプル中の具体値）。

1. 表示ON/OFFを設定するラジオボタンのname属性（"radio_01"）
2. 追加の入力欄を開くきっかけとする選択肢の値（"その他"）
3. 上の「変更点 2/3」で追加の入力欄を囲ったタグのid属性（"additional-field"）

<script src="../js/jquery-1_8_2_min.js" type="text/javascript"></script>
<script src="../js/bootstrap_min.js" type="text/javascript"></script>
<script src="../js/site.js" charset="UTF-8" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	set_desc_field_control("radio_01", "その他", "additional-field");
});
</script>
</body>

このような設定のラジオボタンを複数作るときは、「set_desc_field_control("radio_01", "その他", "additional-field");」の行をコピーして同様に設定して下さい。