【簡単】GoogleフォームをWordPressに埋め込む方法は?3ステップで詳しく解説!

カスタマーサクセス

WordPressを利用してサイトを運営している方の中には、「GoogleフォームをWordPressに埋め込みたい」と考えている方も多いと思います。

そこで、本記事ではGoogleフォームを簡単に埋め込める方法を3ステップで解説します。Googleフォームのメリット・デメリットやフォーム作成時の注意点についてもご紹介しますので、ぜひ参考にしてみてください。

Googleフォームとは?

Googleフォームは、Googleが提供するフォーム作成ツールです。

問い合わせフォームや申し込みフォーム、アンケートフォームなどを作成することが可能で、様々な用途で利用されています。その他にも、顧客から届いたメッセージの集計や分析をサポートする機能が搭載されているため、初心者の方でも扱いやすいツールといえます。

また、GoogleフォームはWordPressに埋め込むことも可能です。ここからはWordPressに埋め込むメリット・デメリットを紹介します。

Googleフォームを使い始めるという方はもちろん、Googleフォームを利用中で使い方が分からないという方は、こちらの記事でGoogleフォームの使い方について徹底解説しています。

【2022年完全版】Googleフォームの使い方を徹底解説|作り方から作成例まで詳しく紹介

WordPressにGoogleフォームを埋め込むメリット4つ

WordPressにGoogleフォームを埋め込むメリットは以下の4つです。

プラグインを用いずにフォームを設置できる

たとえば、WordPressにお問い合わせフォームを設置する場合、「Contact Form 7」などのプラグインを利用する方が多いかと思います。しかし、プラグインにはサイトの表示速度が遅くなる、セキュリティ対策が万全でないものがあるなどのデメリットも存在します。

Googleフォームを利用することで、上記のリスクを冒すことなくフォームを設置することが可能です。サイトの表示速度やセキュリティ対策は、Webサイト全体に影響を与える重要事項であるため、大きなメリットといえるでしょう。

簡単にフォーム作成&設置できる

Googleフォームはフォームの作成〜設置まで簡単に完了することができます。

作成方法は、あなたが知りたいユーザー情報に合わせて回答項目を用意し、記述式やボタン式などの回答方法を選択するだけです。クリックやドラッグ&ドロップなどの直感的な操作のみで作業が完了するため、初めてGoogleフォームに触った方でも簡単にフォームを作成することができます。

また、設置方法はフォーム作成後に取得できるコードをWordPressに貼り付けるだけで完了するため、コーディングなどの専門知識は不要です。詳しくは後ほど解説しますので、一緒に実践してみましょう。

レスポンシブデザインである

今の時代、スマートフォンからWebサイトを閲覧する人は数多く存在します。しかし、職場やインターネットカフェなどからPCを用いてWebサイトにアクセスする人も少なくありません。そのため、設置するフォームはスマートフォンとPCの両方から閲覧しやすいデザインであることが必須条件となります。

Googleフォームは、フォームの埋め込みコードを少し書き換えるだけで簡単にレスポンシブデザインを導入することができます。詳しいやり方は後ほどご紹介しますので、参考にしてみてください。

共同でフォームを編集できる

Googleフォームは共同でフォームを編集することが可能です。編集メンバーの追加方法は該当のフォームにユーザー名、もしくはメールアドレスを追加するだけなので、簡単に共有することができます。

この機能は、「上司に作成したフォームをチェックして欲しい」「担当者が休みをとっているため、代わりにフォームを編集した」といった場面で利用することができます。アクセスできるユーザーを制限することもできるため、セキュリティ対策も万全です。

WordPressにGoogleフォームを埋め込むデメリット3つ

WordPressにGoogleフォームを埋め込むデメリットは以下の3つです。

デザインがシンプルすぎる

Googleフォームはシンプルなデザインが特徴のフォーム作成ツールです。ヘッダーと質問項目で構成されており、ヘッダー部分に写真やイラストを挿入することはできますが、それ以上のカスタマイズをすることはできません。

そのため、Webサイト内でフォーム画面だけが浮いてしまったり、閲覧したユーザーが一見しただけでGoolgeフォームと分かってしまうことも多く、「もっとサイトデザインに合ったフォームを設置したい」と悩む方も数多く存在します。

問い合わせ対応・管理ができない

Googleフォームは、問い合わせを受信することはできますが、それに対する返信や顧客ステータスを管理することはできません。そのため、カスタマーサポートなど、メッセージの送信者とコミュニケーションをとる利用方法には不向きなツールであるといえます。

Googleドライブの容量に制限がある

Googleフォームは、Googleドライブ上に届いたメッセージを蓄積します。基本的に文章のみの回答であれば容量を圧迫することがありませんが、ファイルをアップロードする回答形式を採用した場合、容量が足りず回答を受け取ることができない可能性があります。

Googleドライブの容量は、無料プランは15GBです。容量を増やすためには追加料金が発生するため、もしファイルのアップロードによる回答を集めようとしている場合は、他のフォーム作成ツールを検討してみましょう。

GoogleフォームをWordPressに埋め込む3ステップ

それでは、実際にGoogleフォームをWordPressに埋め込む方法を解説します。3ステップで簡単に埋め込むことができるため、一緒に実践してみましょう。

ステップ1:Googleフォームでフォームを作成する

まず、Googleのトップページから「Forms」をクリックしてください。

Googleフォーム_wp埋込1

Googleフォームの管理画面に移動します。

画面右下の「+」をクリックすると、新しいフォームを作成することができます。

Googleフォーム_wp埋込2

お好みのフォームを作成しましょう。詳しいフォーム作成方法は以下の記事で詳しく解説しています。

【2022年完全版】Googleフォームの使い方を徹底解説|作り方から作成例まで詳しく紹介

今回は以下のようなお問合せフォームを作成してみました。

Googleフォーム_wp埋込3

このフォームをWordPressに設置します。

ステップ2:埋め込みコードを取得する

画面右上の「送信」をクリックしてください。

Googleフォーム_wp埋込4

以下の画面から共有方法を選びます。メール、リンク、HTML、Facebook、Twitterの5つのオプションから選択することが可能です。

今回はWordPressに埋め込むため、HTMLを選択します。以下のように「< >」を選択するとコードが表示されるため、そのコードをコピーしましょう。

Googleフォーム_wp埋込5

最後に、このコードをWordPressに埋め込みます。

ステップ3:入手したコードをWordPressに埋め込む

WordPressの記事投稿画面に移動してください。今回はブロックエディタを例に解説します。

使用機能を選択する画面から、「カスタムHTML」を選択してください。

Googleフォーム_wp埋込6

すると、コードを入力するボックスが表示されますので、先ほどコピーした埋め込みコードを貼り付けましょう。

ここで先ほどお話ししたレスポンシブデザインにGoogleフォームを対応させます。この操作がなくてはスマートフォン・PCそれぞれに対応したサイズにフォームが表示されません。

コードを貼り付けると、以下の赤枠部分のように「width=”640”」と記載されています。このコード部分を「width=”100%”」へ書き換えましょう。これにより、フォームの横幅が固定ではなく、画面のサイズによって変動する仕様になります。

コードの書き換え後、画面右上の「公開」をクリックしてください。

Googleフォーム_wp埋込7

これで、サイトにGoogleフォームが公開されました。

公開したページにアクセスして、作成したフォームが表示されているか、実際にお問合せメッセージを送付してフォームが機能しているかの2つをチェックしてみください。

Googleフォーム_wp埋込8

以上がGoogleフォームをWordPressに埋め込む方法となります。

フォームを作成する際の注意点

フォームを設置する際は、ユーザーにとって視認性・操作性の高いフォームを作成することが重要です。多くのユーザーがフォームにアクセスしてくれたとしても、すぐに離脱してしまうようなフォームでは成果をあげることはできません。

そのため、Googleフォーム作成時には以下3つを重点的にカスタマイズしてみてください。プログラミング等の知識がなくても、Googleフォーム作成画面から簡単にカスタマイズすることができます。

  • テーマ画像の変更
  • Googleフォーム全体のカラー変更
  • 設問への動画・画像挿入

上記をカスタマイズすることで、ユーザーにとって見やすく、使いやすいフォームを作成することができます。詳しいカスタマイズ方法については以下の記事でご紹介していますので、参考にしてみてください。

コーディング不要!Googleフォームをカスタマイズする方法を徹底解説

また、この他にもユーザビリティを向上させるフォームの機能としては以下の2つが挙げられます。

  • フォーム全体をサイトデザインに合わせる
  • 住所の自動入力などのユーザー補助機能を導入する

これによって、ユーザーは更にストレスを感じることなくフォームに回答することが可能です。残念ながら、上記の機能はGoogleフォームには搭載されていないため、「もっとユーザビリティを向上させてフォームへの回答率を上げたい」と考えている方は、別のツールを検討してもいいかもしれません。

今回はその一例として、弊社の提供する「formrun」をご紹介します。

formrun(フォームラン)とは?

formrun TOP

formrunは、弊社の提供するフォーム作成ツールです。40種以上のテンプレートからデザインの選択が可能で、プログラミングの知識がなくても簡単に、幅広くフォームをカスタマイズすることができます。

さらに、formrunには住所の自動入力などユーザー補助機能も搭載されています。フォーム運用はいかにユーザーのストレスを軽減して離脱率を低下させるかが重要となるため、ユーザー補助機能を利用することでより多くの回答を集めることができます。

Googleフォームとの違いは以下の記事で詳しく解説しています。

formrun(フォームラン)とは?その特徴や機能、使い方を徹底解説

まとめ:WordPressにフォームを設置しよう

本記事ではWordPressにGoogleフォームを設置する方法を3ステップでご紹介しました。

  1. Googleフォームでフォームを作成する
  2. 埋め込みコードを取得する
  3. 入手したコードをWordPressに埋め込む

フォーム設置は、顧客との接点を持つことができる効果的な施策です。あなたのWebサイトに合ったフォームを設置することに成功すれば、より大きな成果が期待できるため、最適なフォーム作成ツールを選択しましょう。

formrunは無料から利用を始めることができます。ぜひ試しに導入して、使用感やデザイン性をチェックしてみてください。