サイトをスマホでも見れる様にレスポンシブ対応したんだけど、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開発ブログ
