お問い合わせフォームをレスポンシブ化する方法とは？

パソコンで使用しているお問い合わせフォームをそのままスマホで使っていては、ユーザーはフォームへの入力にストレスを感じ、離脱してしまいかねません。

しかし、「お問い合わせフォームのレスポンシブ化って難しそう」と悩んでいませんか？

方法さえわかれば、お問い合わせフォームは簡単にレスポンシブ化できます。この記事では、お問い合わせフォームをレスポンシブ化する方法を3つ紹介します。

すぐにでもレスポンシブなお問い合わせフォームを作りたい場合は、「formrun」がおすすめです。

formrunで作成するフォームはレスポンシブデザインに対応しています。フォームも直感的な操作で簡単に作成できるため、初心者の方にもおすすめです。サイトへの埋め込みもHTML要素をコピー&ペーストして貼り付けるだけで完了します。

また、formrunはセキュリティ対策も万全です。個人情報を多く扱うお問い合わせフォームでも安心してご利用いただけます。

無料での利用も可能！まずはお問い合わせフォームを作成してみましょう。

レスポンシブ対応のお問い合わせフォームを作る主な方法は、次の3つです。

・CSSを使う
・WordPressのプラグインを使う
・フォーム作成ツールを使う

それぞれの具体的な方法と、適している場合について以下で解説します。

CSSのコードを変えることで、お問い合わせフォームをレスポンシブ化できます。CSSとは、文字の色やサイズ、背景色や余白などを変えられるホームページを装飾する言語です。

CSSを使う方法ではCSSに加えてHTMLの要素も絡むため、コードに関する知識のある方におすすめの方法です。

コードを使用してフォームを作成したい方に向けて、コピー&ペーストしてそのまま利用できるコードを紹介します。すべてCodepenより引用しています。

基本的なお問い合わせフォームです。簡素な仕上がりとなっています。

WordPressを使って作成したホームページであれば、プラグインによってレスポンシブなお問い合わせフォームを簡単に作成できます。

主なプラグインは次の通りです。
・Contact Form7
・Contact Form by WPForms
・Jetpack by WordPress.com　など

Contact Form7は、簡単にお問い合わせフォームを作成できる、人気の高いプラグインです。HTMLのタグを使うため、コードの知識があまりない方でも手軽に利用できます。

Contact Form by WPFormsでは、お問い合わせフォームの完成イメージを見ながら、変更したい箇所をクリックして設定を進められます。コードを使うことなく、より直感的にお問い合わせフォームを作成したい方におすすめです。

Jetpack by WordPress.comは、お問い合わせフォームをはじめとする便利な機能が1つになったプラグインです。SNSの共有ボタンの設置や、投稿一覧の自動読み込み設定などができます。お問い合わせフォーム以外の機能も取り入れたい、ホームページを作り直したいという場合に適しています。

以上のプラグインは、いずれもレスポンシブデザインに対応しています。そのため、とくに意識することなくお問い合わせフォームのレスポンシブ化が可能です。
ただし、初期設定の状態に細かな調整を加えたい場合は、CSSでコードを記述する必要があります。

フォーム作成ツールを使うと、より簡単にレスポンシブ対応のお問い合わせフォームを作れます。コードの知識がなくても、直感的な操作でお問い合わせフォームを作れる点が特徴です。

また、多くのフォーム作成ツールでは、入力項目の追加やデザインの調整、確認画面の有無などを簡単に設定でき、スマートフォンやタブレットでも見やすいレイアウトが自動的に反映されます。さらに、入力データを自動で集計・通知したり、外部ツールと連携して管理を効率化する機能が備わっている場合もあります。

そのため、社内にエンジニアがいない場合や、短期間でフォームを公開したいケースでも、迅速かつ柔軟に対応できるのが大きな魅力です。

お問い合わせフォームのレスポンシブ化は、ユーザーだけでなく自社にも有益です。以下で具体的なメリットを解説します。

レスポンシブに対応した、使いやすいお問い合わせフォームであれば、入力に手間がかかりません。ユーザーの入力ミスを減らす効果も期待できます。

パソコン用のホームページをスマートフォンで見ると、文字の小ささや横スクロールの必要性から、ユーザーは操作のしにくさを感じます。送信ボタンや入力フィールドも小さいため、うまくタップできなければユーザーにとって負担です。その結果、入力をやめ、ホームページから離脱してしまう可能性があります。

お問い合わせフォームのレスポンシブ化によって、離脱のリスク軽減が期待できます。購入・契約やお問い合わせの機会損失を防止しましょう。

レスポンシブに対応したお問い合わせフォームであれば、パソコン用とスマートフォン・タブレット用の2つを作る必要はありません。1つのファイルでお問い合わせフォームの作成や更新ができるため、ホームページの管理が楽になります。

お問い合わせフォームのカスタマイズを外部に依頼する場合でも、2つのフォームに対応してもらう必要がなく、経費を抑えられます。

お問い合わせフォームのレスポンシブ化によって、SEOへの間接的な効果も期待できます。Googleは、ユーザーがどのデバイスからもホームページを快適に閲覧できることを重視し、レスポンシブデザインを推奨しているためです。

また、お問い合わせページがデバイスを問わず共通であることにより、Googleのクローラーも一度で効率的に情報を取得できます。

レスポンシブデザインにしたからといって、ただちにSEOへの効果があるわけではありません。しかし、お問い合わせフォームのレスポンシブ化がSEOによい影響を与える可能性はあります。　

以下では、理想的なレスポンシブ対応のお問い合わせフォームを作成するための、6つのポイントを紹介します。

お問い合わせフォーム画面のスクロールは、縦のみで済むように仕上げましょう。

スマートフォンでコンテンツを読み進める際は、縦スクロールが一般的です。横スクロールが必要だと、縦と横の2パターンでスクロールする必要があるため、ユーザーは操作のしにくさを感じます。

視線の動きや操作のパターンを少なくすれば、ユーザーは快適な閲覧や入力が可能です。

スマートフォンからでも入力しやすいよう、お問い合わせフォームの入力情報はできる限り少なくしましょう。

スマートフォンはPCに比べて画面が小さく、一度に表示できる情報が少ないため、ページの情報が多いとユーザーに負担がかかります。何度もスクロールが必要だと、ユーザーは問い合わせをやめてしまうかもしれません。お問い合わせフォームの項目は必要最低限にすることをおすすめします。

フォントサイズはスマートフォンで読みやすい16ポイントを目安にしましょう。このサイズは、アップル社のブラウザであるSafariにおいて、自動的に拡大されない一番小さな文字です。

スマートフォンに表示される文字が小さすぎると、読みにくくなります。一方、読みやすさを優先して文字を大きくすると、表示できる情報が少なくなります。

見やすさと情報量を考えると、フォントサイズは16ポイント程度がおすすめです。

お問い合わせフォームの入力フィールドやボタンは、48ピクセル以上がおすすめです。スマートフォンの操作は、指によるタップで行います。そのため、フィールドサイズを決める際は指の大きさを考慮しなければなりません。

大人の指の平均的な大きさは約9ミリであり、ピクセル単位であれば約48ピクセルに該当します。フィールドサイズを48ピクセル以上にすることで、ユーザーは正確にタップしやすくなります。

お問い合わせフォームの入力内容にあわせて、適切なキーパッドが表示されるよう設定しましょう。スマートフォンではキーボードではなく、入力の際に表示されるキーパッドで操作します。入力内容に合ったキーパッドが即時に表示されれば、スムーズに入力可能です。

たとえば、電話番号を入力する際にかな入力のキーパッドが表示されたら、ユーザーは数字のキーパッドに変更しなければならず、ストレスを感じます。適切なキーパッドを表示して余計な手間を省き、ユーザーの使いやすさを向上させましょう。

お問い合わせフォームの項目名と入力フィールドは、縦に並べた表示にしましょう。

たとえばスマートフォンにおいて、項目名の「メッセージ本文」と入力フィールドが左右横並びで表示されると、入力フィールドは小さくなってしまいます。入力フィールドの設定サイズが大きければ、横スクロールが必要になることもあり、ユーザーにとって不便です。

こうした使いにくさをなくすためには、入力フィールドを項目の横ではなく下に配置すると効果的です。スマートフォンでは一般的に縦スクロールでコンテンツを読み進めるため、目線が上から下に移動します。項目と入力フィールドを上下に配置することで、ユーザーは自然な目の動きで入力フィールドにたどり着けます。

ユーザーの回答内容がある程度限定されている場合は、プルダウンの活用によって効率的な表示ができます。

プルダウンとは、入力フィールドをタップすることで選択肢が連なって表示され、その中から入力内容を選ぶ仕組みです。選択していないときや選択後には、他の選択肢は表示されません。

お問い合わせフォームにプルダウンを活用することで、画面に余計な情報が表示されずスッキリとした印象になります。選択肢の中から選ぶ形式のため、ユーザーの誤入力防止にも役立ちます。

お問い合わせフォームをレスポンシブ化したいなら、レスポンシブデザインのフォームを作成できるツール「formrun」がおすすめです。直感的なクリック操作で最短30秒でレスポンシブ対応のお問い合わせフォームを作成できます。

ホームページへの埋め込みが可能であり、WordPressで制作したサイトにも対応しています。送受信内容の暗号化、24時間のサーバ監視体制など、セキュリティ対策も万全です。個人情報を取り扱うお問い合わせフォームでも安心して利用できます。

「使ってみたい」と思ったら、まずは無料で試してみましょう。ユーザー・自社ともにメリットのあるレスポンシブなお問い合わせフォーム作成に、ぜひformrunを利用してみてください。