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

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


inquiry_responsive


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


inquiry_responsive2


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


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




inquiry_responsive3


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

/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>のコードに変更した。


inquiry_responsive4


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


inquiry_responsive5


inquiry_responsive6


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開発ブログ