メールフォームを簡単にレスポンシブ化する方法、ツールを紹介！

企業サイトに設置されているメールフォームのなかには、まだスマートフォンの画面幅に対応していない、いわゆるレスポンシブ化がされていないフォームがあります。

メールフォームがレスポンシブ化されていないと、ユーザーは入力にストレスを感じ、メールフォームへの入力をやめてしまうかもしれません。

レスポンシブ対応をするには専門知識が必要と思うかもしれませんが、WordPressのプラグインやフォームツールを使えば、誰でも簡単にレスポンシブ対応のメールフォームを設置できます。

この記事では、レスポンシブなメールフォームの作り方と、おすすめのフォームツールを紹介します。

レスポンシブなメールフォームが必須な理由

レスポンシブ対応のメールフォームとは、デバイスの画面サイズに合わせて、自動で文字やボタンサイズ、入力幅などが調整されるフォームのことです。現代において、メールフォームのレスポンシブ化は必須といえます。

なぜレスポンシブ化が必須なのかを説明します。

環境の変化

スマートフォンが普及したことで、インターネットをスマートフォンのみで利用する、というユーザーが増加しています。

リモートワークやモバイルワークの普及により、全社員にモバイル端末を支給する企業も増えました。仕事上の情報収集にスマートフォンやタブレットを使うケースも多く、BtoCに限らず、BtoBでの取引がメインの企業でもレスポンシブ化は重要です。

ユーザーが通勤や移動中、休憩の合間にサイト閲覧、問い合わせをしていると考えれば、メールフォームをレスポンシブ化することで機会損失を防げます。

ユーザーの負担を減らせる

メールフォームをレスポンシブにすることで、スマートフォンやタブレット利用時に、視認性や操作性に対しての負担を減らすことができます。それによって、メールフォームからの問い合わせにおける機会損失を防げるのです。

PCモニターが横幅960〜1080pxなのに対し、スマートフォンは320～750pxです。画面幅が狭くなるので、スマートフォンにPC版のサイトが表示されると以下のような問題が生じます。

• 文字が小さくてよく見えない
• ボタンが小さくて押しにくい
• 拡大や縮小、横画面表示しないと入力できない
• 縦スクロールが長い

レスポンシブ対応をすると、これらの負担を減らすことができます。

• 最適な文字サイズで表示できる
• 押しやすいボタンサイズで表示できる
• 縦スクロールだけでメールフォーム内容を確認できる
• 表示画面内にチェック項目が収まるので選択しやすい
• 入力項目により適切なキーパッドが表示される

このようにユーザーの負担を減らしストレスなく操作できるようになれば、メールフォームの入力完了率やサイトにおける顧客満足度をアップすることができるのです。

フォームの管理が楽

メールフォームをレスポンシブ化すれば、PCとスマートフォンどちらも同じHTMLソースを利用できます。

従来はPCサイト用、スマートフォンサイト用それぞれにメールフォームを制作する必要がありましたが、レスポンシブではひとつのHTMLファイルを用意すればよいです。

レスポンシブ対応であれば、HTMLやCSSファイルが1つで済むので、コンテンツの修正や更新、メンテナンスの管理が簡単なのです。

レスポンシブなメールフォームの作り方

レスポンシブなフォームを作る方法としては、「HTML・CSS・PHP」「WordPressのプラグイン」「フォームツール」の3つがあります。それぞれの作り方を紹介します。

1.HTML・CSS・PHP

メールフォームはHTMLやCSS、PHPなどで作成します。

HTMLでフォームの要素を設置し、CSSで文字サイズや配置、色などのデザインを整えます。そして、入力されたデータをPHPを用いてやり取りするのです。

この方法では、入力項目やデザインを自由に設定できるので、オリジナリティのあるメールフォームを作ることができます。

レスポンシブ対応では、CSSで画面幅のブレークポイントを設定し、特定のpx数以下になったらデバイスに合ったサイズに切り替えます。

この方法はコーディングの知識が必要で、作業のための依頼や費用がかかります。知識のあるスタッフがいない場合やメールフォームを早く運用したい場合には、他の方法をおすすめします。

2.WordPressのプラグイン

フォームを設置するWebサイトがWordPressで作られているなら、プラグインを利用することでレスポンシブなフォームを簡単に作ることができます。WordPressでは、フォームを作るためのプラグイン「Contact Form 7」、「MW WP Form」などがあります。

こういったフォームのプラグインでは、デフォルトの状態でレスポンシブ対応されています。そのため、プラグインをダウンロードすることで簡単な操作でレスポンシブ対応のフォームを作れます。

ただ、初期設定の状態だとデザインやサイズ調整が不十分なため、細かな部分は自分でCSSを記述しなければなりません。

また、WordPressプラグインの仕様を悪用したスパムメールが流行っているため、「Google reCAPTCHA」や「承諾確認チェックボックス」の設定が必要になります。

3.フォームツール

多くの企業がメールフォームを簡単に作るツールを提供しています。これらのツールは直観的な操作でレスポンシブなフォームを作れるだけでなく、あらゆる便利な機能が備わっています。

フォームツールは初めからレスポンシブに対応しているのでHTMLやCSSなどの知識は必要なく、管理画面からドラッグ＆ドロップでフォームを作ることができます。

デザインテンプレートが用意されているので、必要な項目を入力するだけで自社のサイトデザインに合わせたレスポンシブ対応のメールフォームを作成できます。

自作のメールフォームやWordPressプラグインだと設定が難しい「条件分岐」や「ファイル添付」、「データの集計・管理」などもできますし、データの連携なども行えます。WordPress以外のサイトにも導入しやすいので、幅広いサイトで利用できます。

レスポンシブなメールフォームを作れるツール6選

レスポンシブ対応しているフォームツールの中で、操作性・機能性に優れたサービスを6つ紹介します。

1.formrun（フォームラン）

formrunは、レスポンシブ対応のメールフォームを最短30秒で作成できるツールです。

デザインテンプレートが40種類用意されており、お問い合わせ窓口、見積もり依頼、資料ダウンロード、セミナー参加受付など、用途に沿ったフォームを直感的に作成できます。

Googleスプレッドシートや他システムとの連携機能が充実しているので、メールフォーム経由で顧客対応を効率化させたり、データ活用したいときに便利です。管理画面では顧客のステータス管理ができ、対応漏れを防ぐことができます。

返信メールのテンプレートを設定できますし、自動返信メールによって対応効率化ができます。無料で利用できるので、すぐにレスポンシブフォームを作りたい方におすすめです。

こんな会社におすすめ

• 問い合わせフォームを簡単に作成したい
• コストを抑えつつデザイン性の高いメールフォームを作成したい
• 問い合わせ対応を効率よく行いたい
• 営業管理システムやCRMなどと連携したい

料金・機能

初期費用や最低契約期間はありません。プランはいつでも変更できます。

formrun

2.Googleフォーム

Google フォームは、Googleが提供しているフォームツールです。Googleアカウントがあれば、誰でも無料ではじめられます。

レスポンシブ対応されていますが、デフォルトのデザインから大きく変更できないので、自社サイトのデザインに合わせたい場合やGoogleフォームを利用していると知られたくない場合には向いていません。

Googleフォームは無料ですし便利ですが、メールフォームから送信するにはGoogleアカウントへのログインが必要なので、ユーザーが離脱してしまうリスクがあります。

こんな会社におすすめ

• コストをかけたくない
• デザインにこだわりがなく、できるだけ簡単なフォームを運用したい
• 蓄積したデータをGoogleスプレッドシートで管理したい

料金・機能

Google フォーム

3.Tayori（タヨリ）

Tayoriはカスタマーサポートの業務をベースに作られたフォームツールです。

レスポンシブ対応のフォーム作成に加え、リアルタイムチャットの問い合わせ対応など、お問い合わせ対応に求められる機能が豊富に搭載されています。

デザインのカスタマイズ性が高く、自社のロゴ表示やボタン、フォームデザインなど、サイトに合わせて細かく設定できます。

フリープランは、ユーザー数や使用できる機能などに制限が多いので、カスタマー部門のある企業が有料プランで運用したいときにおすすめです。

こんな会社におすすめ

• カスタマーサポート部門の仕事を効率化させたい
• リアルタイムチャットを使って顧客ニーズに応えたい
• 企業イメージを反映させたフォームを作りたい

料金・機能

Tayori

4.Qubo REQUEST（キューボ リクエスト）

Qubo REQUESTは、教育機関や医療機関への導入実績が多いフォームツールです。

ドラッグ＆ドロップの簡単操作でオリジナルのフォームを作成できます。最短1か月から利用可能で、14日間の無料トライアル後は料金が発生します。

言語切り替え機能で英語・中国語・韓国語に対応できるので、多言語フォームを運用したいときに便利です。ただ、入力項目や完了画面の文言、メール文面などの任意の言語テキストは、ユーザーが直接編集する必要があります。

用途別のサンプルはありますが、編集用のテンプレートは用意されていません。

こんな会社におすすめ

• シンプルなレスポンシブフォームを低価格で長期運用したい
• 多言語フォームを作成したい
• 年に数回、短期間フォームを運用したい

料金（月額）・機能

Qubo REQUEST

5.formzu（フォームズ）

formzuは、20年以上続く老舗のフォームツールです。

無料版でも入力、エラーの回数がカウントされますし、入力率の計測ができるので、デザインの改善やCVR改善に役立てられます。

決裁機能のある商品注文フォームや、英語フォームに特化した機能が充実しているので、ECサイトやプレゼントキャンペーンでメールフォームを活用したいときに便利です。

こんな会社におすすめ

• 宿泊予約や注文など小売り・サービス業向けのフォームを作りたい
• 決裁機能付きのフォームを運用したい
• 国外向けのフォームを作成したい

料金・機能

formzu

6.formmailer（フォームメーラー）

Form Mailerは、投票アンケートや商品注文に対応できるフォームツールです。無料版を含むすべてのプランで広告が表示されません。

有料プランは他システムとの連携機能が充実しています。Googleタグマネージャと連携させて広告タグを設置したり、予約管理システム「LTV-Salon」と連携させたり、予約スケジュールを自動で作成したりできます。

スマホでもフォーム編集が可能で、操作に慣れればメールフォームは5分程度で作成できます。

こんな会社におすすめ

• メールフォームと一緒にWebサイトも作成したい
• 低コストなレスポンシブフォームを作成したい
• 決裁機能付きのフォームを運用したい

料金（月額）・機能

formmailer

まとめ：メールフォームはツールでレスポンシブ対応しよう

メールフォームのレスポンシブ化は必須です。メールフォームをレスポンシブ化するためには、自作のフォームやWordPressプラグインでもできますが、HTMLやCSSの知識などが必要ですがある程度の知識が必要になります。

だからこそ、知識がない人にはフォームツールがおすすめです。テンプレートを使って簡単に作成したい方や、入力結果の集計や管理を効率化させたい方はフォームツールを利用しましょう。

そして、ツールのなかでは特にformrunがおすすめです。クリック操作だけでフォームの作成や設定が完了しますし、40種類ものデザインテンプレートが用意されています。無料で利用できるので、ぜひ一度お試しください。

formrun

formLab編集部

formrunやフォーム作成や顧客管理に関する情報を発信しております。

EFO（エントリーフォーム最適化）や問い合わせ対応など、
フォームに関するお悩みを解決します。