SOY Inquiryをちょっとvalidなフォームにする方法

  • 投稿日:
  • by
  • カテゴリ:

SOY CMSの良い点のひとつが、SOY Appだと思います。

そこで僕が利用しているのが、SOY CMSと連動し、簡単にお問合せフォーム(メールフォーム)を作成・設置できるSOY Inquiryです。

SOY Appの良いところは、簡単に設置できることです。ダウンロードしたファイルを以下のディレクトリに置くだけで導入できます。

/SOY CMSのインストールディレクトリ/app/webapp/

また、SOY CMSで新規でページを作成し、以下のようなコードを記述するだけで、フォームが表示されます。

<!-- app:id="soyinquiry" app:formid="(フォームの ID)" -->
ここにフォームが表示されます。
<!-- /app:id="soyinquiry" -->

SOY Inquiryは、簡単にフォームを作成できるのですが、欠点は、デフォルトのテンプレートのHTMLのソースが汚いことです。(個人主観ですけどね・・・・)

デフォルトのテンプレートのままいくと、デフォルトのテンプレートのデザインを定義しているCSSが書かれている style.phpが適用されます。

ちなみに、style.phpは以下のように書かれています。

<style type="text/css">
table#inquiry_form{
    border-collapse:collapse;
    font-size:90%;
    border:solid 1px #999;
}
#inquiry_form table{
    border-collapse:collapse;
    margin:10px 0;
    border:solid 1px #999;
}
#inquiry_form th, #inquiry_form td{
    border:dashed 1px #bbb;
    border-style:dashed solid;
    padding:8px 10px;
    text-align:left;
    background-color:white;
}
#inquiry_form th{
    background-color:#F4F9FE;
    color:#678197;;
    font-weight:normal;
}
#inquiry_form input[type="text"]{
    border:solid 1px #bbb;
}
#inquiry_form input[type="text"]:focus{
    border:solid 1px black;
}
#inquiry_form textarea{
    border:solid 1px #bbb;
}
#inquiry_form textarea:focus{
    border:solid 1px black;
}
#inquiry_form .require th{
    font-weight:bold;
}
#inquiry_form .error_message{
    color:red;
    margin-left:10px;
    font-weight:bold;
}
#inquiry_form_captcha{
    margin-top:10px;
    margin-bottom:10px;
}
#inquiry_form_captcha img{
    margin-bottom:5px;
}
</style>

読み込むのは、別に良いのですが、style要素を用いています。HTMLの仕様上、style 属性はhead要素に記述しなければなりません。style.phpが適用される箇所がbody要素の中に適用されるので、valid なHTMLにならないということです。

最も、簡単なソリューションとして、このstyle.php を適用させない方法ですが、 /SOY CMSのインストールディレクトリ/app/webapp/inquiry にあるpage.phpの279行目あたり(秀丸エディタの場合)の以下のソースをコメントアウトするとstyle.php は適用されなくなります。

変更前

if($config->isOutputDesign())include_once($templateDir . "style.php");

変更後

//if($config->isOutputDesign())include_once($templateDir . "style.php");

また、 /SOY CMSのインストールディレクトリ/app/webapp/inquiry/src/template/default にあるform.phpに必要な要素や属性を追加するとvalidなWebページになります。

ただし、エラーメッセージのスタイルまで適用されなくなるので、自分でCSSを設定しなければなりません。

課題としては(誰の?)、デフォルトのstyle.phpをhead要素に適用するかですね。