Googleフォームをウェブサイトに埋め込む方法|初心者向け完全ガイド

自社サイトにフォームを設置したいけれど、うまくいかずに悩んでいませんか?プラグインを追加すれば基本的な機能は実現できますが、すでに多くのプラグインを導入しているサイトでは、表示速度の低下につながる恐れがあります。

そこでおすすめなのが「Googleフォーム」です。Googleフォームなら、素早くフォームをサイトに追加できるだけでなく、メディアファイルの挿入、他のフォームからの質問のインポート、WordPressやメールとの連携、SNSなど複数プラットフォームでの共有、Googleドライブのストレージ活用など、多彩な機能を無料で利用できます。

さらに、チームメンバーとの共同編集にも対応しており、サイトだけでなくさまざまなチャネルから集めた回答結果を一元管理することも可能です。

この記事では、Googleフォームをほんの数ステップでウェブサイトに埋め込む方法を詳しく解説します。

Googleフォームをウェブサイトに埋め込む手順

まずはGoogleフォームを作成し、埋め込みコードを取得する必要があります。このコードを、フォームを表示したいページや投稿に追加していきます。

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

1. Googleフォームを作成するには、まずGoogleアカウントにログインし、Googleアプリメニューから「フォーム」アイコンを選択します。または、forms.google.com に直接アクセスしてもOKです。
2. ツールバーの「空白」を選択してゼロからフォームを作成するか、用意されたテンプレートから選びましょう。
3. フォームにタイトルと説明文を追加します。
4. 次に、右側のツールバーを使って、質問の追加、別フォームからの質問のインポート、動画や画像のアップロード、セクションの追加などを行います。
5. 回答形式を選択したい場合は、回答形式セクションの横にある矢印をクリックします。
6. 選択肢から、記述式(短文)や段落(長文)、ラジオボタン(単一選択)、チェックボックス(複数選択)、プルダウンなど、目的に合った回答形式を選べます。
7. フォームのテーマをカスタマイズ・変更するには、画面右上のパレットアイコンを使用します。
8. 保存してウェブサイトに埋め込む前に、目のアイコンで最終デザインをプレビュー確認しておきましょう。
9. メールアドレスの収集、回答を1人1回に制限、送信後の回答編集を許可したい場合は、「設定」(歯車アイコン)を選択します。
10. 三点リーダーアイコンを選択すると、共同編集者の追加、操作の取り消し、環境設定、Google Workspace Marketplaceのアドオン追加などのオプションが利用できます。

ポイント:「共同編集者を追加」を選ぶと、チームメンバーをフォームの編集に招待できます。リンク共有オプションで招待状を送るか、メールアドレスを直接入力すれば、相手に招待メールが届きます。

ステップ2:Googleフォームの埋め込みコードを取得する

フォームが完成したら、次はいよいよウェブサイトへの埋め込みです。そのために必要となるのが、フォーム固有の埋め込みコード(HTMLスニペット)です。

1. 埋め込みコードを取得するには、フォームエディター画面の右上にある「送信」ボタンを選択します。
2. 「フォームを送信」ダイアログには、リンク、メール、SNS、HTMLなど、さまざまな共有方法が表示されます。FacebookやTwitterでの共有、メールリストへの送信なども選択可能です。
3. ウェブサイトにフォームを埋め込むには「HTML」オプションを使用します。「<>」タブを選択してください。
4. 「HTMLを埋め込む」フィールドにコードスニペットが表示されます。あわせて「幅」と「高さ」のボックスもあるので、埋め込むフォームのサイズを自由に調整できます。
5. 「コピー」をクリックして埋め込みコードをコピーし、ウェブサイトの管理画面へ移動します。

ステップ3:埋め込みコードをウェブサイトに追加する

埋め込みコードを入手したら、サイトの管理画面にログインし、フォームを埋め込みたいページまたは投稿を開きましょう。

注意:本ガイドの手順は、Gutenberg(ブロックエディター)を使用したWordPressを前提としています。

1. まず「カスタムHTMLブロック」を追加します。管理画面の「固定ページ」または「投稿」からブロックエディターを開き、編集したいページや投稿を選択してください。
2. ブロックエディター左上、WordPressロゴの横にある「ブロックを追加(+)」アイコンを選択します。
3. 「フォーマット」セクションまでスクロールし、「カスタムHTML」を見つけて選択します。
4. 先ほどコピーしたHTMLコードスニペットを入力欄に貼り付けます。
5. カスタムHTMLブロックのツールバーにある「プレビュー」タブを選択すると、フォームがサイト上でどのように表示されるかを事前に確認できます。
6. これでGoogleフォームがページや投稿に表示されます。
7. 最後に、編集内容を保存するため、必ず投稿または固定ページを「更新」してください。

サイトに最適なフォームを作ろう

サイトへのアンケート調査、オンラインストアの注文フォーム、イベント登録フォーム、お問い合わせフォームなど、Googleフォームを活用すれば、ウェブサイトにぴったりのフォームを無料で作成できます。

さらに機能性とユーザー体験を向上させたい方は、「Googleカレンダーをウェブサイトに埋め込む方法」や「WordPressでクーポンポップアップを作成する方法」のガイドもぜひ参考にしてみてください。

このガイドを参考に、Googleフォームの作成と埋め込みはうまくいきましたか?ぜひコメント欄で体験談をシェアしてください。