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の導入障壁がまた一つなくなりました。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

WEBSITE DESIGN REQUEST

ホームページ制作・リニューアルの
ご相談はお気軽に

TEL 06-6537-9941 平日 9:00〜19:00

〒550-0012 大阪府大阪市西区立売堀2-5−41

ホームページ制作を相談する