WordPressにGoogle Formsを埋め込むには？

"WordPressでGoogle Formsのフォームの埋め込みがうまくいかない"- Google Docs Editors Community

Google FormsのフォームをWordPressに貼り付けても、いつもうまくいくとは限りません。Googleのフォーラムでは73人が、なぜきちんと埋め込めないのかを尋ねています。Custom HTMLブロックにGoogleの埋め込みコードを入れると、Googleの見た目と専用のスクロールバーを持つ箱になり、テーマも反映されません。WordPress用Formfacadeプラグインなら、セットアップウィザードでGoogle Formsのフォームとページを選ぶだけで、フォームがiframeなしでそのページに追加されます。WordPressのダッシュボードからフォームとその回答を開くこともできます。

以下は、Google FormsのフォームをWordPressのページに載せる2つの方法と、それぞれの不十分な点です。

Google FormsのEmbed HTML

  • Google Formsのフォームを開き、右上の⋮ Moreアイコンをクリックします
  • Embed HTMLを選び、HTMLコードをコピーします
  • WordPressでページを編集し、Custom HTMLブロックを追加してコードを貼り付けます
  • ページを更新します
不十分な点：フォームはGoogleの見た目と専用のスクロールバーを持つ固定の箱に収まり、変えられるのは幅と高さだけです。

WordPress用Formfacadeプラグイン

  • 開いたページでフォームに名前を付け、Embed formをクリックし、Proceedをクリックします。
  • Shareタブの「Where do you want to embed this form?」で「Embed in my WordPress site」を選び、Nextをクリックします。
  • 表示される3つの手順に従います。手順は以下のとおりです
ShareのEmbedタブで「Where do you want to embed this form?」と尋ねている画面。Embed、Embed in my WordPress site、Nextに印が付いています
ステップ1：管理者としてWordPressサイトにログイン > Pluginsをクリック > Add New Pluginをクリックします
Pluginsメニューを開いてAdd New Pluginを表示したWordPressのダッシュボード
ステップ2：「Formfacade」を検索し、WordPress用FormfacadeプラグインのInstall Nowをクリックします
WordPressのAdd Pluginsの画面。Formfacadeを検索し、プラグインにInstall Nowがあります
ステップ3：Activateをクリックして、WordPressサイトでプラグインを有効にします
WordPressのAdd Pluginsの画面。FormfacadeプラグインにActivateがあります
ステップ4：Embedのセットアップウィザードで、Googleアカウントでログインし、Nextをクリックします
WordPressのEmbed Google FormsウィザードのLoginステップ。Sign in with Googleがあります
ステップ5：新しいフォームを作成するか、既存のフォームから選ぶか、埋め込みたいGoogle FormsのフォームのURLをコピー＆ペーストして、Nextをクリックします。
Embed Google FormsウィザードのFormステップ。Create new form、Copy & Paste the Google Form URL、Select form to embedがあります
ステップ6：WordPressサイトのページ一覧のドロップダウンから使いたいページを選ぶか、create a new pageを選んでページタイトルを入力し、Proceedをクリックします
EmbedステップのEmbed Google Formsウィザード。Create a new page、Select an existing page、Proceedがあります
ステップ7：Formfacadeが選択したページの一番下にフォームを追加します。Previewをクリックして確認します。
「Form embedded successfully」と表示されたウィザード。Previewボタンがあります
ステップ8：フォームにはウェブサイトのテーマのスタイルが使われます。必要であれば、さらにフォームをカスタマイズできます。
ウェブサイトのテーマで表示された埋め込みフォームがあるWordPressのContact Usページ
ステップ9：WordPress内でフォームを管理するには、WordPressのメニューでFormfacadeをクリックし、Dashboardをクリックします。フォームをクリックするとEditページが開き、フィールドの追加、フォームの見た目の変更、サンクスメッセージのカスタマイズなどができます。フォームのカスタマイズは有料プランでのみ利用できます。
FormfacadeのEditページにあるContactフォーム。NameとEmail、右側のツールバーがあり、Editに印が付いています

まとめ

Googleの埋め込みコードをWordPressに貼り付けると、フォームはGoogleの見た目のままで、ウェブサイトに合いません。Formfacadeなら、プラグインをインストールしてセットアップウィザードに従うだけで、選んだページにフォームがiframeなしで追加されます。フォームを作成して、上の手順を進めてください。ご不明な点があれば、サポートにご連絡ください。

最終更新：