![](https://starting-marketing.com/wp-content/uploads/2021/12/firmbee-com-31OdWLEQ-78-unsplash.jpg)
この記事では、Googleフォームを作ってWordPressと連携させる方法について解説していきます。
Googleへログイン
まずはGoogleのトップ画面にアクセスしてログインをします。
![](https://starting-marketing.com/wp-content/uploads/2021/12/b346f178b8284d94bafe6a4223a1c17f-1024x353.jpg)
お客様の「Googleアカウントを使用」と書かれていますので、ご自身の持っているGoogleアカウントのメールアドレスもしくは電話番号を入力して「次へ」をクリックします。
![](https://starting-marketing.com/wp-content/uploads/2021/12/884da5dbdead71e6cf9aaf8eafdde022-996x1024.jpg)
すると次にパスワードを求められます。
ご自身で決めたパスワードを入力したら「次へ」をクリックします。
![](https://starting-marketing.com/wp-content/uploads/2021/12/54959d4ce3deb92dceb32993b3bf0679.jpg)
Formへアクセス
ログインしたら、右上にある四角いマスが並んでいるアイコンをクリックすると、いろいろなツールが表示されます。
その中を下にスクロールしていくと「Forms」というものがありますのでクリックします。
![](https://starting-marketing.com/wp-content/uploads/2021/12/27953957215918f2254ecbdc04f96398-1.jpg)
クリックすると、GoogleFormsの画面に移行して「新しいフォームを作成」という画面が開きます。
![](https://starting-marketing.com/wp-content/uploads/2021/12/51051dd9edd72362823a352ab61e8d3a.jpg)
【空白】【連絡先情報】【イベント出欠確認】【パーティー招待所】【Tシャツ申込書】など様々なテンプレートがありますので、テンプレートを選んで編集するということもできます。
今回は【空白】というものから作っていきます。
![](https://starting-marketing.com/wp-content/uploads/2021/12/5ac6068be548c3d4792fa0828769d2dd.jpg)
フォームの作成
空白をクリックすると「無題のフォーム」という画面が出てきます。
ガイドが出てきますので、必要であれば確認しながら進んでください。
![](https://starting-marketing.com/wp-content/uploads/2021/12/0aa45b135603bdea38f9cd2cdd3b909a-1024x490.jpg)
フォームのタイトル
まずは、フォームのタイトルを変更します。
ここでは「お問い合わせフォーム」と入力しておきます。
![](https://starting-marketing.com/wp-content/uploads/2021/12/1b05e81a1dde11e0b3086d1aec43d80b-1.jpg)
その下に「無題の質問」というものがあります。
ここをクリックすると、質問項目の編集ができる状態になります。
![](https://starting-marketing.com/wp-content/uploads/2021/12/5a7b3427d0bd9b4946e9ffe98e379a45.jpg)
お問い合わせフォームで必要な項目は、《お問い合わせする方のお名前》《メールアドレス》《お問い合わせ内容》です。これらを入力してもらう欄を作っていきます。
まず右側の「ラジオボタン」と書かれている場所をクリックします。
ここで質問の形式を選択することができます。
![](https://starting-marketing.com/wp-content/uploads/2021/12/8d680b9a054bcb4d269b4f25824d94a9-1.jpg)
アンケートを作る場合は《ラジオボタン》「チェックボックス」「プルダウンメニュー」を使いますが、お問い合わせフォームを作る場合は基本的には一番上の「記述式」や「段落」を使います。
「記述式」は短文形式で「段落」は長文形式になります。
名前入力欄
まず一番最初の項目には、名前を入力してもらう欄を作りましょう。
【無題の質問】をクリックするとタイトルを記入できるので、「お名前」と入力します。
![](https://starting-marketing.com/wp-content/uploads/2021/12/a186351735c91349512907fc3b2e694a.jpg)
そして「入力必須項目」にしたいので、右下にある【必須】というところをクリックして《オン》の状態にします。
![](https://starting-marketing.com/wp-content/uploads/2021/12/7546cc7761b67a553fe9bf99ed9b430d.jpg)
これで、1つ目の項目ができました。
メールアドレス入力欄
それでは、次の項目を作成します。
右側にあるバーの一番上の+マークアイコンにカーソルを合わせると、「質問を追加」と出ますのでここをクリックします。
![](https://starting-marketing.com/wp-content/uploads/2021/12/adb0ce029299289f64251ed5ebf3771a.jpg)
すると、新しく項目を入力できるような欄が現れますので同じように作成していきます。
![](https://starting-marketing.com/wp-content/uploads/2021/12/ab82a7ecd0d0da5cb627a03479c0e511.jpg)
今度はメールアドレスを入力してもらう欄を作りますので、タイトルに「メールアドレス」と入力します。
そして「お名前」と同様に、右下の【必須】をクリックして《オン》にします。
![](https://starting-marketing.com/wp-content/uploads/2021/12/295881225754d283e214c691bd0cf183-1.jpg)
これで2つ目の項目が完成しました。
お問い合わせ入力欄
さらに質問を追加していきます。
今度は「お問い合わせ内容」を入力する欄を作成します。
![](https://starting-marketing.com/wp-content/uploads/2021/12/cd5eaa00e70cababb7e3595ad8a71e8f.jpg)
タイトルには「お問い合わせ内容を入力してください」と記載します。
また、この項目の形式は段落を選択しましょう。まれに長文のご相談やお問い合わせをいただくことがありますので、形式を《段落》にしておくことをオススメします。
![](https://starting-marketing.com/wp-content/uploads/2021/12/a17256cf91fcfeec64bbbd93c3ff0837.jpg)
そして、この項目も《必須》にします。
![](https://starting-marketing.com/wp-content/uploads/2021/12/76d65bb4f0faf5b53bb958771fe70860.jpg)
今回は「お名前」「メールアドレス」「お問い合わせ内容」全て必須項目とします。
これで最低限必要な項目は作成しました。
お問い合わせフォームのデザイン
最後にデザインを調整しましょう。
上部にカラーパレットのアイコンがあります。
カーソルを合わせると「テーマをカスタマイズ」と出てきますので、ここをクリックしてみます。
![](https://starting-marketing.com/wp-content/uploads/2021/12/8ed1701fc10e0cb22c4042d0dbef49f6-1.jpg)
すると、右側に【テーマオプション】というメニューが表示され、背景の色を変えることができます。
![](https://starting-marketing.com/wp-content/uploads/2021/12/500122bfe8fffb507023e66b6a5b6ba0-1024x665.jpg)
例えば、今回はサンプルとしてピンクっぽい色にしてみたいと思います。
![](https://starting-marketing.com/wp-content/uploads/2021/12/6f2d7732a5a043427d3e9c5623f92536-1024x690.jpg)
また、+マークは「カスタム色を追加」ということで、新しい色を作成することも可能です。
![](https://starting-marketing.com/wp-content/uploads/2021/12/9f4e28860d15d93f20a87fc1c44d839c.jpg)
さらに、ヘッダーへ画像を入れることもできます。
【画像を選択】をクリックすると、「ヘッダーの選択」というポップアップが表示され、さまざまなテーマに合わせられる画像が無料で提供されています。もちろん画像をアップロードして表示することもできます。
![](https://starting-marketing.com/wp-content/uploads/2021/12/5a9a8d64b4bce5bdd0b69a9c3fad48e2.jpg)
テーマの種類には、
- 仕事・学校
- イラスト
- 誕生日
- 食べ物・食事
- パーティ
- 子供向け
- ウェディング
- ないとタイム
- スポーツ・試合
- 旅行
このようなテーマが用意されています。
また、画像を選択することによって、テーマに合った背景色に自動で変更されます。
例えば、今回例として『仕事・学校』のテーマからビーンズの画像を選択してみましょう。お好きな画像を選んだら、右下の《挿入》のボタンをクリックします。
![](https://starting-marketing.com/wp-content/uploads/2021/12/d721de7c8db38fb0776d871b864e7d3e.jpg)
すると、ヘッダー部分に画像が表示され、全体が黄色に変更されました。
![](https://starting-marketing.com/wp-content/uploads/2021/12/0353616073a0c4f6daa5fb10f4e03fd2.jpg)
さらに、フォントのスタイルも4種類の中から変更することもできます。
![](https://starting-marketing.com/wp-content/uploads/2021/12/0b8494e2331921cb247ebecdb79b9222.jpg)
このようにデザインを変更したら、×マークをクリックして右側のメニューを閉じます。
![](https://starting-marketing.com/wp-content/uploads/2021/12/09aaf0c066d2ef3a14e4ebb130356f7e.jpg)
これでフォームが出来上がりです。
タイトルの【お問い合わせフォーム】から、入力内容の《お名前》《メールアドレス》《お問い合わせ内容を入力してください》という項目までを作りました。
ここまで作成したら、右上にある「送信」という紫色のボタンをクリックします。
![](https://starting-marketing.com/wp-content/uploads/2021/12/b9888d1087b7247dce63413a68455717.jpg)
すると、【フォームを送信】というポップアップが表示されます。
![](https://starting-marketing.com/wp-content/uploads/2021/12/8870f3d3cf0c014576412bb23b2d1c2f.jpg)
まず、《メールアドレスを収集する》という項目にチェックを入れると、お問い合わせしてきた方のメールアドレスを登録していくことができます。
メルマガなどを送る必要があればチェックを入れますが、今回はチェックを入れずに進めます。
続いて、その下の《送信方法》では、一番右側の「<>マーク」を選択します。
すると【HTMLで埋め込む】と出てきてコードが表示されます。
右下にある「コピー」と書いてあるボタンをクリックしてコードを全てコピーします。
![](https://starting-marketing.com/wp-content/uploads/2021/12/0d4756c5819f852f901cc81584f93a04.jpg)
コピーしたら、このコードをWordPressの固定ページに貼り付けていきます。
WordPressで表示させる
WordPressのダッシュボードから、「固定ページ」の「新規追加」をクリックします。
![](https://starting-marketing.com/wp-content/uploads/2021/12/d5d0ef896745cfd1033fb7c59f70baa1.jpg)
新規固定ページが開いたら、まずタイトルに「お問い合わせフォーム」と入力します。
![](https://starting-marketing.com/wp-content/uploads/2021/12/3ba26c70bd08a65b09bea4158d321919.jpg)
次に、クラシックエディターの場合は《ビジュアルエディター》から《テキストエディター》に切り替え、ブロックエディターの場合は《ビジュアルエディター》から《コードエディター》に切り替えます。
・クラシックエディターの場合
![](https://starting-marketing.com/wp-content/uploads/2021/12/d2793a0fe1bbabad78f2c4c9fbffa5c4.jpg)
・ブロックエディターの場合
![](https://starting-marketing.com/wp-content/uploads/2021/12/8a4d1c66d30cae99888b99f45fac8e5d-1-1024x383.jpg)
つづいて、先ほどコピーしたコードを本文内に貼り付けます。
![](https://starting-marketing.com/wp-content/uploads/2021/12/fac21eb60cfb36316c24c610f846c0e3.jpg)
そして、日本語になっているパーマリンクを英語表記に変更します。
今回は例として『contactform』にしてみます。
![](https://starting-marketing.com/wp-content/uploads/2021/12/8a17a1a5b8b7e14841438383212622dc.jpg)
ここまでできたら、右側のプレビューをクリックして確認してみます。
すると、お問い合わせフォームということで、GoogleのフォームがWordPressに埋め込まれた形になります。
下記が実際に作成して埋め込んだGoogleフォームです。
全ての項目に赤い星印がついて、必須項目となっていますね。
また、高さや横幅が合わずにスライドが表示されてしまうようであれば、Googleフォーム編集画面の【フォームを送信】の段階で幅もしくは高さの数値を増やします。
(WordPressにコードを貼り付けた後で数値を修正すると表示がおかしくなりますので、必ずGoogleフォーム作成時に調整してから貼り付けるようにしましょう。)
![](https://starting-marketing.com/wp-content/uploads/2021/12/image-5.png)
![](https://starting-marketing.com/wp-content/uploads/2021/12/2c67f82bb54c08b9134664900855a06a.jpg)
ここまで確認ができで問題なければ、戻って公開ボタンをクリックして『お問い合わせフォーム』を公開します。
これで、Googleのお問い合わせフォームをWordPressに連携することができました。
WordPressを使いこなそう
本ブログでは、WordPressを立ち上げる方法から運用の手引きまで解説しています。
Googleフォーム以外にも最低限必要な固定ページの作成方法も解説していますので、ぜひ参考にしてみてください。当ブログが少しでもお役に立てたら幸いです。
最後までお読みいただきありがとうございました。
WordPress固定ページの概要
![](https://starting-marketing.com/wp-content/uploads/2021/12/ewan-robertson-fDsCIIGdw9g-unsplash-320x198.jpg)
1、運営者情報ページを作る方法
![](https://starting-marketing.com/wp-content/uploads/2021/12/vitaly-sacred-RMBEjU99A1I-unsplash-320x198.jpg)
2、プライバシーポリシーのページを作る方法(文章例あり)
![](https://starting-marketing.com/wp-content/uploads/2021/12/privacy-policy-g34c01a3be_1920-320x198.jpg)
3、お問い合わせページを作る
・お問い合わせフォームの作り方
![](https://starting-marketing.com/wp-content/uploads/2021/12/firmbee-com-SpVHcbuKi6E-unsplash-320x198.jpg)
・GOOGLEフォームでお問い合わせフォームを作る方法
![](https://starting-marketing.com/wp-content/uploads/2021/12/firmbee-com-31OdWLEQ-78-unsplash-320x198.jpg)
4、サイトマップを作る
![](https://starting-marketing.com/wp-content/uploads/2021/12/signpost-g6ba2bf472_1920-320x198.jpg)