レスポンシブ対応されたフォームへのエフトラEFOの導入

スマートフォンによるインターネットアクセスが増え、PCと同じくらいスマートフォンでのサイトやフォームの使いやすさへの配慮が重要になっています。端末種別の違いを吸収する方法の1つとして、ブラウザのウィンドウ幅に合わせてコンテンツの見た目を切り替える方法「レスポンシブ対応」があります。

エフトラEFOのご利用をご検討のお客様からも、レスポンシブ対応したエントリーフォームでエフトラEFOが問題なく動作するかという点についてお問い合わせが増えています。

今回は、レスポンシブ対応されたエントリーフォームにエフトラEFOをご利用いただく場合のポイントについてご説明いたします。

結論から申しますと、レスポンシブ対応したエントリーフォームは、PC、スマートフォンなど、端末種別によらず同一フォームとして登録して利用可能です。入力ページ、確認ページ、完了ページなど、ページごとにEFOタグを貼り分ける必要はありますが、端末種別ごとに貼り分ける必要はありません。

レスポンシブとは?

以前は、PC、フィーチャーフォン、スマートフォンとで別々のHTMLを用意してサーバー側で端末を判定してふり分けるのが一般的でしたが(いまでも有効な方法です)、ブラウザの進化によって、メディアクエリと呼ばれる、ブラウザのウィンドウサイズごとに適用するスタイルシートの内容を分ける技術が一般的になりました。その結果、HTMLソースは端末種別ごとにではなく1種類のみ用意し、スタイルシートでウィンドウサイズに合わせた見た目を用意するという対応が増えてきました。これはレスポンシブ対応と呼ばれています。

なぜ同じEFOタグで動作するか?

エフトラEFOは、入力ページの各入力項目に入力支援機能を動作させるための前処理として、想定していた入力項目がEFOタグが貼られたページ内に存在するかを確かめるのですが、その判定として、

  • 想定していた<form>タグか(<form>タグのname属性や、HTML内の順番などで判定)
  • 想定していたタグか(input、select、textarea)
  • 想定していたtype属性か
  • 想定していたname属性か

などで、1つ1つの入力項目の存在を確かめます。
想定していた入力項目が見つかれば入力支援機能のための処理を実行し、見つからなかった入力項目については何もしません。

レスポンシブ対応されたHTMLは、ウィンドウサイズを変更しても、有効なスタイルシートの内容が変わるだけで、HTMLのDOM構造は変わりません。そのためウィンドウサイズの変更によって、EFOタグが入力項目を見つけられなくなる、ということはありません。以上から、レスポンシブ対応されたエントリーフォームについては、1フォーム分のEFOタグで問題ありません。

レスポンシブ対応に近いものとして、ページ表示時に、JavaScriptでユーザーエージェントを判定して、スマートフォンならスマートフォン用のスタイルシートを追加して読み込む、というものがあります。この場合も、DOM構造が変わらない限り、問題なく1フォーム分のEFOタグでご利用可能です。

まとめ

まとめると、以下のように整理できます。
※「別フォーム」という場合は、複数のフォームとして登録し、ページごとに別々のタグを貼る必要があります。「同一フォーム」という場合は、1フォームとして登録、端末種別ごとにタグを貼り分ける必要はありません。

フォームのURLがアクセスする端末種別ごとに別の場合

=別フォームとして登録し、タグを貼り分ける必要があります

フォームのURLがアクセスする端末種別によらず同じで、見た目も同じ場合

=同じフォームのタグで動作可能です

フォームのURLがアクセスする端末種別によらず同じだが、違う見た目が用意されている場合

・そもそも違うHTMLソースが返されている場合(※1)
=別フォームとして登録し、タグを貼り分ける必要があります

・返されているHTMLソースは同じで、ブラウザが評価した後のソース(※2)も同じ場合
=レスポンシブor類似のケース
=同じフォームのタグで動作可能です

・返されているHTMLソースは同じだが、ブラウザが評価した後のソースが違う場合
※特に<form>…</form>の内容が異なる場合
※スマートフォン用変換ツールを利用しているケースなどが該当します
=別フォームとして登録し、タグを貼り分ける必要があります

(※1)ブラウザの「ソースを確認」で表示できるHTMLソースです
(※2)ブラウザの開発者ツールで表示できるHTMLソースです

なお、エフトラEFOのレポート機能は、ユーザーが使用したブラウザ情報を元に、PC(タブレット含む)のみの数値、スマートフォンのみの数値、及びその合算を表示できますのでご安心ください。

最後に

いかがだったでしょうか。レスポンシブ対応されたエントリーフォームへのエフトラEFO導入のお問い合わせ、お待ちしております。

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です