はじめに
レンタルサーバはXserverを利用している方は多いと思います。標準機能として提供されているメールフォームがあるのですが、そのカスタマイズ案件で遭遇したトラブルの備忘録です。
HTMLテンプレートやスタイルシートを直接編集し、自由自在にデザインを変更することが出来ます。
こだわったデザインにしたい方などにおすすめです。
公式マニュアルより
この一文を見る限り、ＣＳＳでの見た目のデザインはもとより、入力項目のレイアウトや表示の順番なども、テンプレートを自作し、適用することで自由にカスタマイズできるように思えます。しかしながら、少なくとも自由自在ではありませんし、こだわった（特にＵＩ・ＵＸ）デザインにしたい方にはおすすめできません。
カスタマイズする上での問題点
以下のように、大きく３点の問題点が挙げられます。
1. テーブル構造での構築が前提
いわゆるテンプレートエンジンなので、サーバー側でテンプレート中のマーカーである{$form_data}部分を整形データで差し替える仕様となっています。問題点は、その整形データが<tr><th>項目名</th><td>入力フィールド</td></tr>といったガチガチのテーブルの子要素となっていることです。つまり、テーブル構造による構築を前提にしているわけです。せめて<div>や<ul>要素で出力されるのであれば、もう少し自由度があったのにと思います。
※もともとテーブル構造である、もしくはテーブル構造に準ずるデザインなら、ＣＳＳ次第でかなり柔軟にカスタマイズできると思います。
ちなみに、デフォルトの状態で出力したものから当該入力フィールドのname属性値を確認し、カスタムデザインを適用したところ、{$form_data}がない、ということでエラーになったようです1。多少気持ち悪い感じは残りますが、<!-- {$form_data} -->として、コメントアウト部分に出力するようにしました。
2. テンプレート中のJavascriptは基本的に無効にされる
セキュリティ面からでしょう、<script>タグ中の'や"がエンコードされます。そのため、Invalid Syntax エラーが発生します。パスが通っていれば外部読み込みで問題ないと思いますが、実案件では都合上試していません。
※ちなみに、簡単で短いコードならば対策も可能ですが、攻撃の引き金になる可能性もあるため非公開とします。
3. 送信ボタンのvalue値を変更できない
どうやら内部で<input type="submit">の値を元に、固定値で処理の分岐判定をしているものと思われます2。そのため、初期値を変更してしまうとフォームデータが送信されず、リロードしてしまうようです1。送信ボタンの表示文字列を変更できない仕様というのは、地味にいやらしい落とし穴かと思います。
最後に
フリーのメールフォームプログラムを探せば色々ありますので、目的にあったものを設置したほうが早かったかもしれません。3
ＵＩ・ＵＸにこだわったフォームを使いたいのであれば、Xserver標準機能として提供されているメールフォームは使わないほうがいいと言えます。