サイトをスマホでも見れる様にレスポンシブ対応したんだけど、

SOY Inquiryでお問い合わせフォームを設置してみると、



PCでは希望通りの表示になるんだけど、



スマホでは端が切れてしまう。


そこで、スマホ対応のフォームを作成してみた。





始めにスマホ対応用のフォームを作るために新しいテンプレートを追加

/cmsインストールディレクトリ/app/webapp/inquiry/src/template/以下にフォーム部分のコードを格納できる箇所があり、

そのディレクトリにresponsiveというディレクトリを用意し、_sampleにあるform.php、confirm.phpとcomplete.phpの3ファイルをコピーした。


次にform.phpを開き、


<section id="cart_detail">

<form method="post" enctype="multipart/form-data">

<div class="pconly">
	<?php $message = $config->getMessage(); echo $message["information"]; ?>
</div>

<div class="cart_detail_dl">
	<dl>
<?php $counter = 0; ?>
<?php $columnCount = count($columns); ?>
<?php foreach($columns as $column){
	
	/**
	 * @プライバシーポリシーは必ず一行目で別テーブルで表示する
	 */
	
	$id = $column->getId();
	$obj = $column->getColumn();
	$label = $obj->getLabel();
	$annotation = $obj->getAnnotation();
	
	echo "<dt class=\"c_item\">";
	echo $label;
	if($column->getRequire()){
		echo "<span style=\"color:red;\">(必須)</span>";
	}
	echo "</dt>\n";
	echo "<dd>\n";
	 if(isset($errors[$id])){
    	echo "<p class=\"error_message\">";
    	echo $errors[$id];
    	echo "</p>";
    } 
    echo "\t".$obj->getForm();
    if(isset($annotation) && strlen($annotation)){
    	echo " ".$annotation;
    }
    echo "\n</dd>\n";
  	
	$counter++;
}
?>
	</dl>
</div>

<div style="margin-top:10px;text-align:center;">
	<input name="data[hash]" type="hidden" value="<?php echo $random_hash; ?>" />
	<p class="textcenter"><input name="confirm" type="submit" value="入力内容の確認" /></p>
</div>
</form>

</section>

フォームの出力を<table>から<dl>のコードに変更した。



コードの修正後に、お問い合わせページに設置しているフォームの設定画面を開き、デザインをdefaultからresponsiveに変更して、お問い合わせフォームを再度開いてみると、




PCでも、スマホでもデザインが崩れないお問い合わせフォームに変更された。


他にお問い合わせ内容確認画面や完了画面のテンプレートも変更しておく必要があるので、下記の様にした。


confirm.php

<section id="cart_detail">

<form method="post">

<div class="pconly">
	<?php $message = $config->getMessage(); echo $message["confirm"]; ?>
</div>

<div class="cart_detail_dl">
	<dl>
<?php foreach($columns as $column){ 
	
	$id = $column->getId();
	$obj = $column->getColumn();
	$label = $obj->getLabel();
	$view = $obj->getView();
	
	if(strlen($view)<1)continue;
		
	if(strlen($label)>0 && strlen($view)>0){
		echo "<dt class=\"c_item\">";
		echo $label;
		echo "</dt>";
		echo "<dd>";
	    echo $view;
	    echo "</dd>";
	}
}    
?>

<?php
echo $hidden_forms;
?>
	</dl>
</div>

<div style="margin-top:10px;text-align:center;">
	<input name="send" type="submit" value="送信" >
	<input name="form" type="submit" value="戻る" >
</div>

</form>

</section>

complete.php

<section id="cart_detail">

<div class="pconly">
	<?php $message = $config->getMessage(); echo $message["complete"]; ?>
</div>

<div class="cart_detail_dl">
	<dl>
	<dt class="c_item">お問い合わせ番号:</dt>
	<dd><?php echo $inquiry->getTrackingNumber(); ?></dd>
	<dt class="c_item">お問い合わせ内容:</dt>
	<dd><pre><?php echo $inquiry->getContent(); ?></pre></dd>
	<dt class="c_item">お問い合わせ日時:</dt>
	<dd><?php echo date("Y-m-d H:i:s",$inquiry->getCreateDate()); ?></dd>
	</dl>
</div>
<p class="btn">
<a href="/">戻る</a>
</p>

</section>

今回の記事は下記の記事を参考にした。

SOY Inquiryで生成されたフォームのCSSを変更する | SOY CMS開発ブログ

SOY Inquiry1.1.4でフォームのカスタマイズ用のファイルを同梱しました | SOY CMS開発ブログ