2016.08.08
2017.09.07
コーディング
TransmitMailでページ下部へのフォーム設置を実現する方法
TransmitMailはPHPで動作するシンプルな汎用メールフォームシステムです。
導入が簡単で細かい調整も融通がきくので重宝しているのですが、先日1点だけ実現方法に迷った点があり、幸い解決に至れたので方法をご紹介します。
Transmitmailをページの一番下に配したときの挙動
LPサイトなどを制作すると、コンテンツがずーっとあってスクロールしていくとページの最下部にお問い合わせフォームが現れる、というサイトによく直面するかと思います。
Transmitmailはテンプレートとなるhtmlにコードやタグを書き、確認画面や終了画面は各画面用のテンプレートを呼び出す形で遷移していく形式です。なので確認画面用のテンプレートにコンテンツ部分を記述しないことによって、フォームの遷移が自然になるようにコントロールすることができます。
ですが、1ページだけテンプレートによって区別されていないページがあります。それが必須項目の未記入やその他バリデーションエラーを返すページです。
Transmitmailではバリデーションエラーがある場合、if文でエラー文言を表示した入力用テンプレートが再読み込みされます。再読み込みの際、表示はページの最上部になります。フォームの状態が見えない位置にページ遷移をしてしまうので、これではユーザーにフォームが正常に動作したのかどうか、エラーだったとして何がエラーだったのか、混乱させてしまいますし、確認のためには余計なスクロールも強いることになります。これではユーザビリティが損なわれていると言わざるを得ません。
アンカーを設定してフォーム箇所に遷移させる
解決方法は意外とシンプルでした。Transmitmailのsubmitボタンは独自タグから生成される、かつaタグではないのでアンカーリンクは指定できないかと最初は考えたのですが、formタグのactionで指定することができました。
記述は以下のようになります。
<form method="post" action="index.php#form" id="form">
formタグに上記の記述のようにIDを設定することで、アンカーリンクによって任意の場所に画面遷移するようになります。
これでTransmitmailの導入障壁がまた一つなくなりました。