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