プラグイン無しでもできちゃう！
Googleフォームを使ってお問い合わせの固定ページを作ろう！！
こんにちは "osaboo"
です。"@osaboo_Bot"
今回は、WordPressブログサイトの固定ページにGoogleフォームを埋め込んで『お問い合わせフォーム』を設置する方法をご紹介します。
『お問い合わせフォーム』は、プラグインを使って作成するのが一般的？（多い）と思いますが...
WordPressブログサイトのスピードを下げてしまうデメリットがあります。
なので、「プラグイン無し（当サイト実施）で『お問い合わせフォーム』を作ることが簡単に出来る！」をご紹介して、ご覧いただいた方のお役に立てる情報になれば幸いです。
「初めてGoogleフォームを使う」という方にもわかりやすく具体的に画像を入れて説明していきます。
「是非参考にしてください。」
それでは『お問い合わせフォーム』を作っていきましょう！
＼初心者でも安心！コスパ最強の洗練されたWordPressテーマ／
＼＼『すごいもくじLITE』が付いてくる！限定特典キャンペーン実施中！／／
- 少しづつ増え続ける当サイトオリジナル特典付！-
Googleフォームを使ったお問い合わせフォームの作り方
Googleフォームを使って「お問い合わせフォーム」を作っていきましょう。
『Googleフォーム』にアクセスします。
「下の画面」が表示されるので、赤枠の『Googleフォームを使ってみる』をクリックして次へ！
『Googleログイン フォームに移動する』下の画面は既にログイン済みの場合は表示されません。Googleフォームの最初の画面が表示されます。
「Googleにログインしていない」もしくは「アカウントを持っていない」場合は「下の画面」が表示されるのでいずれかの方法でログインしましょう。
Googleにログインが完了するとGoogleフォームの最初の画面「下の画面」になります。
左端の『空白』をクリックして次へ！
『無題のフォーム』下の画面が表示さたら、「お問い合わせのフォーム」を作っていきましょう。
基本パターンは ①〜⑤ の順番に行きます。（詳細手順は画面の下側）
詳細手順
- 題名の変更 『無題のフォーム』→『お問い合わせ』（必要であれば説明を入れる）
- 質問の変更 『無題の質問』→『お名前』（表現はお好みで...）
- 記述の変更 『ラジオボタン』→『記述式』（▼でスクロールして選択）
- 入力の有無 『必須』チェックする（ボタン移動）
- 次項目追加 『＋』をクリックして次へ
こんな感じ!! 下の画面の様になったら『＋』をクリックだよ！
手順のパターンは次も同じだよ！ 超簡単 ^^
下に空ブロックが追加されたら、上と同じ要領で記入と変更をします。（詳細手順は画面の下側）
詳細手順
- 質問の変更 『無題の質問』→『メールアドレス』（表現はお好みで...）
- 記述の変更 『ラジオボタン』→『記述式』（▼でスクロールして選択）
- 記述式テキスト（短文回答）・・・（確認するだけ！）
- 入力の有無 『必須』チェックする（ボタン移動）
- 次項目追加 『＋』をクリックして次へ
下に空ブロックが追加されたら、上と同じ要領で記入と変更をします。（詳細手順は画面の下側）
詳細手順
- 質問の変更 『無題の質問』→『お問い合わせの種類』（表現はお好みで...）
- 記述の変更 『ラジオボタン』→『ラジオボタン』（▼でそのまま）
- ラジオボタン項目を追記 『オプション1... 』→『ご意見・ご相談』『ご要望』『その他』→必要項目ボタン部分に追加（表現とボタンの数はお好みで...）
- 入力の有無 『必須』チェックする（ボタン移動）
- 次項目追加 『＋』をクリックして次へ
下に空ブロックが追加されたら、上と同じ要領で記入と変更をします。（詳細手順は画面の下側）
詳細手順
- 質問の変更 『無題の質問』→『題名』（表現はお好みで...）
- 記述の変更 『ラジオボタン』→『記述式』（▼でスクロールして選択）
- 記述式テキスト（短文回答）・・・（確認するだけ！）
- 入力の有無 『必須』チェックする（ボタン移動）
- 次項目追加 『＋』をクリックして次へ
下に空ブロックが追加されたら、上と同じ要領で記入と変更をします。（詳細手順は画面の下側）
詳細手順
- 質問の変更 『無題の質問』→『お問い合わせ内容』（表現はお好みで...）
- 記述の変更 『ラジオボタン』→『段落』（▼でスクロールして選択）
- 記述式テキスト（長文回答）・・・（確認するだけ！）
- 入力の有無 『必須』チェックする（ボタン移動）
- 次項目追加 『＋』はクリックせずに完了
ここまで作った『Googleフォーム』を確認してみましょう。
上記で作ったGoogleフォームここまではこんな感じ!!
お問い合わせに必要な項目の追記が完了したら、色変更等のデザインを選んでお好みのスタイルに変更してみましょう。
右上の赤枠『テーマオプション』をクリックして次へ！
『テーマオプションタブ』メニューをお好みで選択して、色・テキストなどの設定をしましょう。（詳細手順は画面の下側）
詳細手順
- テーマオプションを開く→『テーマオプションアイコン』（クリック）
- 色・フォントの変更→『ヘッダー』『テーマの色』『背景色』『フォントスタイル』（お好みで設定）
- 送信→『送信』（クリック）
送信をクリックすると下の画面が表示されます。
赤枠の『コードアイコン』をクリックして次へ！
下の画面が表示されるので赤枠のコード『 HTML 』をコピーします。
コピーが完了したら、固定ページに埋め込みます。次のセクションに進みましょう。
WordPressブログサイトにGoogleフォームを埋め込む方法
それでは、WordPressブログサイトの固定ページにコピーした『HTML』を埋め込んでいきましょう。
事前に『 WordPress管理画面＞固定ページ＞新規追加』のメニューを選んで固定ページを用意してください。
タイトルh1は、『お問い合わせ』（お好みで...）準備画面は以下として進めます。
①『クラシック』を選択して②『クラシック』をクリックして次へ！（①→②）
クラシックエディタを使って『 HTML 』をコピーします。
以下の手順で『HTML』を貼り付ける準備画面を呼び出します。（①→②）
Googleフォームでコピーした『HTML』を赤枠の様に貼り付け（ペースト）します。
以上でGooglrフォームの埋め込みは完了です。
固定ページの表示を確認をしてみましょう。画面上方の『プレビュー＞新しいタブでプレビュー』で確認します。
確認画面が下の画面の様になっていれば『OK』です。
次にスクロールバーが邪魔なので表示させないように設定していきます。
Googleフォームの幅と高さ調整（スクロールバーを隠す！）
スクロールバーが出てしまって画面が微妙に上下するのはカッコ悪い（私感）ので隠します。
そのままでも問題ないですが...
コピーした『HTML』の末尾に以下を挿入します。（追加部のダブルコーテーションの後に半角スペースがあります！）
scrolling="no" frameborder="no"
スクロールバーの表示をOFFにした形の『HTML』は下記の様になります。（黄色マーカー赤字部が追加した部分です。）
<p><iframe src="https://docs.google.com/forms/d/e/1FAIpQLSd4KjjiIn6cvdPCIsR7Bidmc12oelJzLol-DyERiJRQlX8bMw/viewform?embedded=true" width="640" height="1054" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="no">読み込んでいます…</iframe></p>
上記のように『HTML』に追加すると以下の様にスクロールが隠れた表示になります。
以上で、Googleフォームを使った、お問い合わせフォームの固定ページが完成しました。
実際にお問い合わせフォームにテスト入力して、mailとコメントが届くか確認しましょう。
ちゃんとMail届いた！？ ^^"
お疲れ様でした！ ^^
まとめ！お問い合わせフォーム【WordPressにGoogleフォームで設置！】
お問い合わせフォームをプラグイン無しで簡単に作成する方法をご紹介しました。当サイトでも、もちろん採用しています。
自分のサイトにログインする事なく、「Googleフォーム」を変更するだけで、複数のサイトに埋め込まれたフォームデザインがまとめて変更できるのも魅力だと思います。
是非！導入してみてください。
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／
