パソコンで使用しているお問い合わせフォームをそのままスマホで使っていては、ユーザーはフォームへの入力にストレスを感じ、離脱してしまいかねません。
しかし、「お問い合わせフォームのレスポンシブ化って難しそう」と悩んでいませんか？
方法さえわかれば、お問い合わせフォームは簡単にレスポンシブ化できます。この記事では、お問い合わせフォームをレスポンシブ化する方法を3つ紹介します。
すぐにでもレスポンシブなお問い合わせフォームを作りたい場合は、「formrun」がおすすめです。
formrunで作成するフォームはレスポンシブデザインに対応しています。フォームも直感的な操作で簡単に作成できるため、初心者の方にもおすすめです。サイトへの埋め込みもHTML要素をコピー&ペーストして貼り付けるだけで完了します。
また、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-1simple by irodori (@irodori-the-typescripter)
on CodePen.
おしゃれなお問い合わせフォームの例
淡い色と細い線をベースに、おしゃれに仕上げたお問い合わせフォームです。
See the Pen
20241219-2 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を利用してみてください。
formrunやフォーム作成や顧客管理に関する情報を発信しております。
EFO（エントリーフォーム最適化）や問い合わせ対応など、
フォームに関するお悩みを解決します。
