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

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

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

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

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

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

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

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

無料でお問い合わせフォームを作成する

お問い合わせフォームをレスポンシブ化する3つの方法
お問い合わせフォームをレスポンシブ化するメリットとは？
お問い合わせフォームをレスポンシブ化する6つのポイント
手軽にレスポンシブ対応のお問い合わせフォームを設置するなら「formrun」

お問い合わせフォームをレスポンシブ化する3つの方法

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

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

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

CSSを使う

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

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

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

シンプルなお問い合わせフォームの例

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

See the Pen
20241219-1simple by irodori (@irodori-the-typescripter)
on CodePen.

おしゃれなお問い合わせフォームの例

淡い色と細い線をベースに、おしゃれに仕上げたお問い合わせフォームです。

See the Pen
20241219-2 by irodori (@irodori-the-typescripter)
on CodePen.

WordPressのプラグインを使う

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

主なプラグインは次の通りです。

・Contact Form7
・Contact Form by WPForms
・Jetpack by WordPress.com　など

Contact Form7は、簡単にお問い合わせフォームを作成できる、人気の高いプラグインです。HTMLのタグを使うため、コードの知識があまりない方でも手軽に利用できます。
Contact Form7についてもっと詳しく知りたい方は下記をご覧ください。
>>【完全版】Contact Form 7の基本と使い方まとめ｜WordPressに問い合わせフォームを設置しよう

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

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

以上のプラグインは、いずれもレスポンシブデザインに対応しています。そのため、とくに意識することなくお問い合わせフォームのレスポンシブ化が可能です。

ただし、初期設定の状態に細かな調整を加えたい場合は、CSSでコードを記述する必要があります。

WordPressでサイトを作成している方向けに、お問い合わせフォーム作成に便利なツール・プラグインを他にも紹介しています。
>>WordPressの問い合わせフォームに最適なツール3選＋プラグイン6選

フォーム作成ツールを使う

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

主なフォーム作成ツールは次の通りです。

・formrun
・Googleフォーム
・Tayori　など

formrunは、フォームに入れたい項目を選んで直感的に追加していくことで、迅速にお問い合わせフォームを作成できるツールです。問い合わせに対する自動返信に加えて、顧客への一斉メール配信や個別のやり取りもできます。とにかく早くレスポンシブ対応のお問い合わせフォームを設置したい、細やかな顧客対応をしたいという場合におすすめです。

formrunについて詳しく知りたい方はこちら
>>formrun公式サイト

Googleフォームでは、フォームの豊富なテンプレートを無料で使えます。お問い合わせフォームはもちろん、アンケートや注文書などさまざまな用途に利用できるため、幅広く使いたい場合に便利です。

Googleフォームをレスポンシブ対応させる方法については下記をご覧ください。
>>【簡単】Googleフォームをレスポンシブ対応させて埋め込む方法は？

Tayoriは、カスタマーサポートを目的としたツールです。メールフォームに加えて、FAQやアンケート、チャットの機能を備えています。顧客と双方向的なコミュニケーションを積極的に取りたい場合におすすめです。利用には費用がかかるものの、本格導入の前に無料でお試しができます。

Tayoriについては下記記事で特徴や使い方を紹介しています。
>>Tayori（タヨリ）の機能と使い方を解説！フォーム作成もできるクラウド情報整理ツール

お問い合わせフォームに使えるフォーム作成ツールを下記記事で他にも紹介しています。自社にぴったりなフォーム作成ツールを探してみましょう。
>>【無料で使える】お問い合わせフォーム作成ツール11選！注意点も詳しく解説

お問い合わせフォームをレスポンシブ化するメリットとは？

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

ユーザーにとって使いやすい

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

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

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

管理の手間が少ない

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

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

SEOの効果が期待できる

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

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

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

お問い合わせフォームをレスポンシブ化する6つのポイント

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

横スクロールの必要がない

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

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

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

必要最低限の項目にとどめている

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

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

読みやすいフォントサイズである

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

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

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

タップしやすいフィールドサイズである

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

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

適切なキーパッドが表示される

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

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

項目名と入力フィールドを縦に並べて表示している

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

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

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

プルダウンを活用する

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

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

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

手軽にレスポンシブ対応のお問い合わせフォームを設置するなら「formrun」

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

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

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