Googleフォームを利用してフォームを設置している方の中には、「スマートフォンで見た時にフォームの幅が合わない」といった悩みを抱えている方も多いかと思います。現代はスマートフォンからフォームを訪れるユーザーも多いため、不便な状態のまま放置した場合、ページを離脱される危険性が向上します。
そんな時は、Googleフォームをレスポンシブ対応させましょう。本記事では、簡単にGoogleフォームをレスポンシブ対応する方法を解説します。
また、Googleフォームをカスタマイズする方法についても紹介します。理想のデザインを実現するために必要な工程となりますので、参考にしてみてください。
目次
レスポンシブ対応とは
レスポンシブ対応とは、ユーザーが使用する端末の画面サイズに合わせて、デザインを変更することです。PCの利用者にはPC向けの、スマートフォン利用者にはスマートフォン向けのデザインを表示します。
例えば、レスポンシブ対応したサイトは、画面の大きさに合った表示がされることはもちろん、スマートフォン対応としてボタンやリンクをタップしやすくなっていたりと様々な工夫が施されています。
このように、顧客体験に大きな影響を及ぼすレスポンシブ対応は、最近のWebサイト運営における重要項目のひとつに数えられます。
フォームにおけるレスポンシブ対応の重要性
昨今は、スマートフォンを利用してサイトを訪れるユーザーの数が急増しています。しかし、PCからのアクセスも根強く、PC・スマートフォンどちらのデザインにも対応したデザイン表示をしなくてはなりません。
フォームにおいても同様で、すべての画面から見やすく、利用しやすいデザインを表示できなければ、「見にくい」「分かりにくい」「使いにくい」といった理由で、ユーザーがフォームを離脱する機会損失を招くかもしれません。そのため、フォーム運用において、レスポンシブデザインに対応していることは必須の条件といえるでしょう。
Googleフォームをレスポンシブ対応させて埋め込む3ステップ
レスポンシブ対応したGoogleフォームの埋め込みは、3ステップで完了します。
ステップ①：フォームを作成する
今回は、サンプルとして以下のお問い合わせフォームを作成しました。
フォーム作成について、詳しくは以下の記事で解説しているため、参考にしてみてください。
ステップ②：埋め込みコードを取得する
作成したフォームを埋め込むためのHTMLコードを取得します。
画面右上の「送信」ボタンをクリックしてください。
次に、「＜＞」のアイコンを選択してHTMLコードを表示し、「コピー」ボタンをクリックしましょう。
これで、HTMLコードの取得は完了です。
ステップ③：HTMLコードの書き換え＆埋め込みをする
この工程で、Googleフォームをレスポンシブ対応させます。今回はWordPressを例に解説します。
WordPress投稿画面で「カスタムHTML」をクリックしてください。
すると、ボックスが表示されますので、先ほどコピーしたHTMLコードを貼り付けましょう。
ここで、貼り付けたコードに注目してください。コード内に「width=”640”」と記載されていることが分かるかと思います。（下記参照）
これは、フォームの横幅を指定するコードとなるため、このままではレスポンシブ対応されません。そのため、このコードの書き換えを行います。
「width=”640”」→「width=”100%”」へ書き換えてください。これによって、フォームの横幅が固定されず、画面のサイズに合わせて変動する仕様になります。
その後、画面右上の「公開」ボタンをクリックすると、フォームが公開されます。
以上がGoogleフォームをレスポンシブ対応させて埋め込む方法です。実際にPCやスマートフォンから確認して、レスポンシブ対応しているかチェックしましょう。
他のCMS（コンテンツ管理システム）に埋め込む際も同様のやり方で対応できるため、参考にしてみてください。
Googleフォームをカスタマイズする方法
Googleフォームは、フォーム作成画面にて以下のカスタマイズをすることができます。
- フォントの変更
- テーマ画像の変更
- フォーム全体のカラー変更
- 質問・回答への画像や動画挿入
- フォームの進捗状況表示
- 質問内容の条件分岐
- Googleスプレッドシートとの連携
- フォーム回答の際のメール通知
詳しいカスタマイズ方法については、以下の記事を参考にしてみてください。
Googleフォーム埋め込みではできないこと
ここまで、Googleフォームをレスポンシブ対応させて埋め込む方法や、カスタマイズする方法を紹介しました。しかし、この方法で作成したフォームは、カスタマイズの幅が狭く、一目見ればGoogleフォームと分かってしまう特徴的なデザインにしかなりません。
特に企業サイトの場合、信頼は何よりも重要です。無料のフォームを利用していることが企業の信頼を損ねる恐れもあることから、Googleフォームを利用していることは極力分からないデザインを構築する必要があります。
そのためには、自社サイトに馴染む、違和感のないデザインにすることが必須条件でしょう。ここからはGoogleフォームを使って、自社サイトに合った理想的なデザインを実現する方法を解説します。
Googleフォームで理想のデザインを実現する方法
Googleフォームで理想的なデザインを実現する方法は2つあります。
自社内でHTMLやCSSを編集する
HTMLやCSSを編集することで、自作フォームとGoogleフォームを連携させることができます。これによって、自社サイトに合ったデザインのフォーム作成が可能となります。
やり方は大きく分けて5ステップです。
- HTMLを編集してフォームを自作する
- Googleフォームで同じ項目のフォームを作成する
- 送信先URLを取得する
- 自作フォームにactionタグやinputタグを貼り付ける
- CSSで形やデザインを整える
上記の方法で、Googleフォームを理想のデザインにすることができます。もちろんレスポンシブ対応させることも可能です。しかし、HTMLやCSSの知識が不可欠であるため、社内にスキルを持った人材がいない場合は難しいかもしれません。
自作フォームとGoogleフォームを連携させる方法は以下の記事で詳しく解説しているため、まずは自社内で完結できるようチャレンジしてみてください。
プログラミングスキルを持つ人へ外注する
社内にプログラミングスキルを持つ人材が存在せず、自社内で理想的なデザインのGoogleフォームを実現できない場合は、外注するのも選択肢の1つです。
クラウドワークスやランサーズ、ココナラなど、スキルを売りたい人と買いたい人がマッチングできるサービスを利用することで、約5,000円からフォーム編集を依頼することができます。
しかし、外注するためにはコストがかかります。もし、外注する予算の余裕があるのなら、他のフォーム作成ツールを検討するのも1つの手です。
「formrun（フォームラン）」なら理想的なフォームデザインを作成できる
formrunは、弊社が提供するフォーム作成ツールです。40種以上の豊富なテンプレートからデザインの選択が可能であるため、簡単に自社サイトに合ったフォームを作成できます。フォーム作成から顧客管理・分析までできるため、1つのツールで業務を完結させることも可能です。
また、formrunには数多くの機能が搭載されています。レスポンシブ対応はもちろんのこと、住所の自動入力などのユーザー補助機能が充実しており、サイトを訪れた人にストレスを与えることなく入力を促すことができます。
さらに、無料でも多くの機能を利用できるformrunですが、有料プランに加入することによって、より多くの機能を活用することが可能です。その1つに、チームによるフォーム管理が挙げられます。これによって、送信忘れなどのヒューマンエラーを防ぎ、より顧客から信頼されるフォーム運用ができます。
Googleフォームとの違いについて、詳しくは以下の記事を参考にしてみてください。
まとめ：フォーム作成の際はデザインにこだわろう
本記事ではGoogleフォームを埋め込んでレスポンシブ対応させる方法や、Googleフォームで理想のデザインを実現する方法についてご紹介しました。
昨今はPCやスマートフォンなど、顧客がさまざまな媒体でフォームに訪れる時代です。そのため、レスポンシブ対応されていないフォームや、自社サイトに合わないデザインのフォームは顧客にストレスを与え、機会損失を招く可能性があります。
だからこそ、フォームデザインには徹底的にこだわることが大切です。Googleフォームは確かに簡単にフォームを作成できる便利なツールですが、本気でフォーム運用に力を入れるのであれば、他のフォーム作成ツールも検討してみましょう。
formrunやフォーム作成や顧客管理に関する情報を発信しております。
EFO（エントリーフォーム最適化）や問い合わせ対応など、
フォームに関するお悩みを解決します。
