お問い合わせフォームを”Googleフォーム”に変えてみた【スプレッドシートとの連携方法】

2023年1月3日

WordPressのプラグインは便利なものばかりです。しかしプラグインを増やしすぎると、ブログの動作が重くなります。

プラグインに頼らない対策として今すぐ実践できるのが「お問い合わせフォーム」です。当ブログのお問い合わせフォームを、プラグインのContact Form7からGoogleフォームへ変更しました。

ういさんとマクリンさんのツイートをみて、ぼくも真似しました。

お問い合わせフォームを、ContactForm7プラグインからGoogleフォームへ全面的に切り替えました😊

プラグインは少ないに越したことないうえ、項目の自由度も高く、操作性も抜群。デザインの邪魔をする心配もありません。あとまあ、G神のお墨付きだしｗ

実装ページはこちら👇🏻https://t.co/cTNWMwf5uW pic.twitter.com/SfiQfpsWLv

— うい (@uiuiuipot108081) January 22, 2020

ちょっとでも軽量化のため、ワイもContact Form 7とおさらばし、Googleフォームに変更😋

(内容はういさんの丸パクリン)

ちなみにお問い合わせフォームの上に「レビュー・広告をご検討のお客様へ(アコーディオン)」を入れてから、仕事の問い合わせが増えたから、これを入れるのはわりとオススメ☺️ pic.twitter.com/6YXHXm7E6c

— マクリン (@Maku_ring) January 27, 2020

この記事では、Googleフォームの設置方法を解説します。不要なプラグインを削除して、ブログの軽量化を目指しましょう！

Googleフォームの設置方法

Googleフォームの設置方法を紹介します。下記手順にしたがって進めていけば誰でも簡単に実装できます。

Googleフォームにアクセス
「空白」を選択
お問い合わせの項目を設定
幅と高さを設定
ブログに実装

STEP1：Googleフォームにアクセス

まずはお持ちのGoogleアカウントでGoogleフォームにアクセスします。下記がGoogleフォームのトップ画面です。

トップ画面右上の「テンプレートギャラリー」を開くと、さまざまなシーンに応じたGoogleフォームのテンプレートが表示されます。

STEP2：「空白」を選択

お問い合わせフォームに使えそうなテンプレートがないので、「空白」を使って作ります。

「空白」を選択すると下図の画面に切り替わります。

STEP3：お問い合わせの項目を設定

まずは「無題のフォーム」から名前を変更します。「お問い合わせフォーム」「お問い合わせはこちらから」などでいいでしょう。

続いて「質問」と「質問の形式」を設定します。

たとえば「メールアドレス」を記載してほしい場合、質問の形式は「記述式」を選択します。

記述式のほかラジオボタンやチェックボックスなどさまざまな形式があるので、質問内容にあわせて選択しましょう。

必ず回答してほしい質問であれば、右下を「必須」にします。

質問事項を追加する場合は、右側のプラスマークを押下してください。

STEP4：幅と高さを設定

右上にある「目」のアイコンをクリックすると、Googleフォームのプレビューを確認できます。問題なければ「送信」をクリックしてください。

下図の画面に切り替わります。

今回は自分のブログにコードを埋め込むので、上記画面では何も入力しなくてOKです。「送信方法」の一番右にある＜＞マークをクリックしてください。

Googleフォームの幅と高さを設定します。デフォルトサイズは幅640px、高さ927pxです。

ロコ

デフォルトサイズだと少し小さく感じたので当ブログは幅750px、高さ1,200pxにしています。

幅と高さを設定したら、右下の「コピー」を押下してください。

STEP5：ブログに実装

WordPressへの実装手順は次の通りです。

クラシックエディタの場合: ①固定ページ → 新規追加
②編集画面の「テキスト」にHTMLコード貼り付け
③パーマリンク設定(〜.com/contactなど)
④公開
ブロックエディタの場合: ①固定ページ → 新規追加
②「カスタムHTML」ブロックを選択
③HTMLコード貼り付け
④パーマリンク設定(〜.com/contactなど)
⑤公開

公開したURLを開いてGoogleフォームが表示されているか確認してみてください！

プラグインは削除

ContactForm7などお問い合わせ用のプラグインは削除しましょう。ブログを軽量化するためです。