Xserver標準のメールフォームはUI・UXにこだわるなら使わないほうがいい

はじめに

レンタルサーバはXserverを利用している方は多いと思います。標準機能として提供されているメールフォームがあるのですが、そのカスタマイズ案件で遭遇したトラブルの備忘録です。

HTMLテンプレートやスタイルシートを直接編集し、自由自在にデザインを変更することが出来ます。
こだわったデザインにしたい方などにおすすめです。
公式マニュアルより

この一文を見る限り、ＣＳＳでの見た目のデザインはもとより、入力項目のレイアウトや表示の順番なども、テンプレートを自作し、適用することで自由にカスタマイズできるように思えます。しかしながら、少なくとも自由自在ではありませんし、こだわった（特にＵＩ・ＵＸ）デザインにしたい方にはおすすめできません。

問題点

テーブル構造での構築が前提

いわゆるテンプレートエンジンなので、サーバー側でテンプレート中のマーカーである{$form_data}部分を整形データで差し替える仕様となっています。問題点は、その整形データが<tr><th>項目名</th><td>入力フィールド</td></tr>といったガチガチのテーブルの子要素となっていることです。つまり、テーブル構造による構築を前提にしているわけです。せめて<div>や<ul>要素で出力されるのであれば、もう少し自由度があったのにと思います。

※もともとテーブル構造である、もしくはテーブル構造に準ずるデザインなら、ＣＳＳ次第でかなり柔軟にカスタマイズできると思います。

ちなみに、デフォルトの状態で出力したものから当該入力フィールドのname属性値を確認し、カスタムデザインを適用したところ、{$form_data}がない、ということでエラーになったようです¹。多少気持ち悪い感じは残りますが、<!-- {$form_data} -->として、コメントアウト部分に出力するようにしました。

テンプレート中のJavascriptは基本的に無効にされる

セキュリティ面からでしょう、<script>タグ中の'や"がエンコードされます。そのため、Invalid Syntax エラーが発生します。パスが通っていれば外部読み込みで問題ないと思いますが、実案件では都合上試していません。

※ちなみに、簡単で短いコードならば対策も可能ですが、攻撃の引き金になる可能性もあるため非公開とします。

送信ボタンのvalue値を変更できない

どうやら内部で<input type="submit">の値を元に、固定値で処理の分岐判定をしているものと思われます²。そのため、初期値を変更してしまうとフォームデータが送信されず、リロードしてしまうようです¹。送信ボタンの表示文字列を変更できない仕様というのは、地味にいやらしい落とし穴かと思います。

最後に

フリーのメールフォームプログラムを探せば色々ありますので、目的にあったものを設置したほうが早かったかもしれません。³

ＵＩ・ＵＸにこだわったフォームを使いたいのであれば、Xserver標準機能として提供されているメールフォームは使わないほうがいいと言えます。

[参考]

• メールフォーム設置手順