はじめに

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

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

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

カスタマイズする上での問題点

以下のように、大きく３点の問題点が挙げられます。

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

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

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

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

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

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

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

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

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

最後に

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

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

[参考]

（Xserver公式）メールフォーム設置手順

クライアント様による申告です。 ↩ ↩²
value="確認"をvalue="送信"にした状態でボタンクリックすると、確認画面を経由せずフォームデータが送信されました。 ↩
予算とクライアント様スキル、開発工期の関係上、実案件では標準のものを使用しました。 ↩