WordPress

WordPressのサイトにGoogleフォームを設置する方法【お問い合わせフォーム】

2020年7月6日

プラグインを使用しないでWordPressのサイトに「お問い合わせフォーム」を設置できないかな?

 

こんな悩みを解決したいと思います。

 

こんにちは、ユキトモです。

 

プラグインの「Contact Form7」を使うとお問い合わせフォームはできるのですが、プラグインを使っている理由で、サイトの表示スピードが遅くなるなどのデメリットがあります。

 

ポイント

Googleフォームをつかうとプラグインを入れずにお問い合わせフォームを作ることができます。

ぜひ、導入することをオススメします。

 

では「Googleフォーム」の設定方法をご紹介します。

 

設定の方法

 

step
1
Googleフォームに移動します。

 

 

step
2
「新しいフォームを作成」をクリックします。

 

 

step
3
タイトルを変更します。

 

「無題のフォーム」→「お問い合わせフォーム」に変更します。

 

 

step
4
「お名前」の項目を設定します。

  1. 「お名前」と入力する。
  2. 「記述式」を選択する。
  3. 「必須」をオンにする。
  4. 「+」をクリックする。

 

 

step
5
「メールアドレス」の項目を設定します。

  1. 「メールアドレス」と入力する。
  2. 「記述式」を選択する。
  3. 「必須」をオンにする。
  4. 「+」をクリックする。

 

step
6
「お問い合わせの種類」の項目を設定します。

 

  1. 「お問い合わせの種類」と入力する。
  2. 「ラジオボタン」を選択する。
  3. 「ご意見・ご相談」を追加する。
  4. 「その他」を追加する。
  5. 「必須」をオンにする。
  6. 「+」をクリックする。

 

 

step
7
「件名」の項目を設定します。

 

  1. 「件名」と入力する。
  2. 「記述式」を選択する。
  3. 「必須」をオンにする。
  4. 「+」をクリックする。

 

step
8
「お問い合わせの内容」の項目を設定します。

 

  1. 「お問い合わせの内容」と入力する。
  2. 「段落」を選択する。
  3. 「必須」をオンにする。
  4. 「+」をクリックする。

 

step
9
「お問い合わせのフォーム」のデザインを設定します。

 

 

  1. 右上のアイコンをクリックする。
  2. お好みのテーマの色、背景色、フォントスタイルを選択する。
  3. 「送信」をクリックする。

 

step
10
「HTML」をコピーします。

  1. 「<>」のアイコンをクリックする。
  2. HTMLをコピーする。
  3. 「コピー」ボタンををクリックしても同様にコピーされます。

 

 

step
11
「固定ページ」にHTMLを設定します。

 

  1. 「固定ページ」→「新規追加」をクリックする。

 

 

step
12
「お問い合わせ」ページを作成します。

  1. タイトルを「お問い合わせ」にする。
  2. 「テキスト」に変更します。
  3. コピーしたHTMLを張り付ける。

※コピーしたHTMLの前に「当サイト~」の文言を追加しています。お好みで文言を追加してください。

 

step
13
「パーマリンク」を設定します。

下記は例です。

 

設定が出来たら、公開ボタンをクリックします。

 

 

Googleフォームのメール通知がされるか確認

 

設定が完了したら、お問い合わせフォームからメールを送信して届いているか確認してみましょう。

注意

メールが届くまで数分かかることがあります。

 

補足:スクロールバーの削除

 

下記の手順は、使ってみて必要だと感じた方だけ実施して下さい。

スクロールバーが表示されていて、少々使いにくいので削除します。

step
1
以下の「HTML」を追加します。

 追加するHTML
frameborder="no" scrolling="no"

 

step
2
以下の赤文字の位置に追加します。

スクロールバーはこれで表示されなくなります。

 赤文字の位置に追加します。
<iframe src="https://docs.google.com/forms/d/e/1FA~/viewform?embedded=true" width="640" height="1018" frameborder="0" marginheight="0" marginwidth="0" frameborder="no" scrolling="no">読み込んでいます…</iframe>

 

step
3
文字表示を微調整します。

画面一番下の文言が見切れるので、高さを調整します。

 

 赤文字の位置に追加します。
<iframe src="https://docs.google.com/forms/d/e/1FA~/viewform?embedded=true" width="640" height="1250" frameborder="0" marginheight="0" marginwidth="0" frameborder="no" scrolling="no">読み込んでいます…</iframe>

 

自分の環境では、height="1018" → ”1250” に変更したら、見切れることなく表示しました。

 

まとめ

 

Googleフォームを使用すると、簡単にプラグインなしでお問い合わせフォームを作成できます。

ぜひ、試してみて下さい。

以上です。

最後まで読んでいただきありがとうございました。

スポンサーリンク

-WordPress
-, , ,

© 2020 Yukitomo Blog