お問い合わせフォーム【WordPressにGoogleフォームで設置！】

2024年9月6日 ※ 当ページのリンクには広告が含まれています。

プラグイン無しでもできちゃう！

Googleフォームを使ってお問い合わせの固定ページを作ろう！！

こんにちは "osaboo"です。"@osaboo_Bot"

【2024年2月20日】記事が読みやすくなるように調整しました。

今回は、WordPressブログサイトの固定ページにGoogleフォームを埋め込んで『お問い合わせフォーム』を設置する方法をご紹介します。

『お問い合わせフォーム』は、プラグインを使って作成するのが一般的？（多い）と思いますが...

WordPressブログサイトのスピードを下げてしまうデメリットがあります。

なので、「プラグイン無し（当サイト実施）で『お問い合わせフォーム』を作ることが簡単に出来る！」をご紹介して、ご覧いただいた方のお役に立てる情報になれば幸いです。

「初めてGoogleフォームを使う」という方にもわかりやすく具体的に画像を入れて説明していきます。

管理人も初心者です！初心者目線で説明していきます。 ^^")

「是非参考にしてください。」

それでは『お問い合わせフォーム』を作っていきましょう！

こんな方におすすめ！

「お問い合わせ」のページ（サイトに必要な固定ページ）を簡単に作りたい。
プラグインを使って「お問い合わせ」のページを作りたくない！プラグインを減らしたい！
1 から「お問い合わせ」のページを作るのは面倒だ！

この記事でわかること！

Googleフォームを使ったお問い合わせフォームの作り方
WordPressブログサイトにGoogleフォームを埋め込む方法
Googleフォームの幅と高さ調整（スクロールバーを隠す！）

＼初心者でも安心！コスパ最強の洗練されたWordPressテーマ／

AFFINGER6 購入 ▶︎ 詳しくはこちら

＼＼『すごいもくじLITE』が付いてくる！限定特典キャンペーン実施中！／／

- 少しづつ増え続ける当サイトオリジナル特典付！-

購入方法で迷ったら…こちらで確認【特典付きを購入しよう！】

Googleフォームを使ったお問い合わせフォームの作り方

Googleフォームを使って「お問い合わせフォーム」を作っていきましょう。

『Googleフォーム』にアクセスします。

以下の画面が表示されます。

『Googleフォームに移動』をクリックします。

『Googleログインフォームに移動する』以下の画面が表示された場合は、ログインまたはアカウントを作成してください。
Googleフォームの最初の画面が表示されます。

Googleにログインが完了するとGoogleフォームの最初の画面「下の画面」が表示されます。

『フォームに移動』をクリックします。（トップ画面です）

「新しいフォームを作成」画面が表示されます。

左端の『空白のフォーム』をクリックします。

『無題のフォーム』が表示されます。

「お問い合わせのフォーム」を作っていきましょう。

手順は以下の通りです。

題名の変更　『無題のフォーム』→『お問い合わせ』（必要であれば説明を入れる）
質問の変更　『無題の質問』→『お名前』（表現はお好みで...）
記述の変更　『ラジオボタン』→『記述式』（▼でスクロールして選択）
入力の有無　『必須』チェックする（ボタン移動）
次項目追加　『＋』をクリックして次へ

基本パターンは ①〜⑤ を処理します。

『❸と❺』の補足

osaboo

❸『▼』をクリックするとドロップダウンメニューが表示されるよ！

GoogleForme：無題のフォーム-1-1｜ラジオボタンのドロップダウンメニュー

osaboo

こんな感じ!!　下の画面の様になったら❺『＋』をクリックだよ！

osaboo

手順のパターンは以後同じ要領だよ！　超簡単 ^^

手順は以下の通りです。

質問の変更　『無題の質問』→『メールアドレス』（表現はお好みで...）
記述の変更　『ラジオボタン』→『記述式』（▼でスクロールして選択）
記述式テキスト（短文回答）・・・（確認するだけ！）
入力の有無　『必須』チェックする（ボタン移動）
次項目追加　『＋』をクリックして次へ

下に空ブロックが追加されたら、同じ要領で記入と変更をします。

手順は以下の通りです。

質問の変更　『無題の質問』→『お問い合わせの種類』（表現はお好みで...）
記述の変更　『ラジオボタン』→『ラジオボタン』（▼でそのまま）
ラジオボタン項目を追記　『オプション1... 』→『ご意見・ご相談』『ご要望』『その他』→必要項目ボタン部分に追加（表現とボタンの数はお好みで...）
入力の有無　『必須』チェックする（ボタン移動）
次項目追加　『＋』をクリックして次へ

下に空ブロックが追加されたら、同じ要領で記入と変更をします。

手順は以下の通りです。

質問の変更　『無題の質問』→『題名』（表現はお好みで...）
記述の変更　『ラジオボタン』→『記述式』（▼でスクロールして選択）
記述式テキスト（短文回答）・・・（確認するだけ！）
入力の有無　『必須』チェックする（ボタン移動）
次項目追加　『＋』をクリックして次へ

下に空ブロックが追加されたら、同じ要領で記入と変更をします。

手順は以下の通りです。

質問の変更　『無題の質問』→『お問い合わせ内容』（表現はお好みで...）
記述の変更　『ラジオボタン』→『段落』（▼でスクロールして選択）
記述式テキスト（長文回答）・・・（確認するだけ！）
入力の有無　『必須』チェックする（ボタン移動）
次項目追加　『＋』はクリックせずに完了

下に空ブロックが追加されたら、同じ要領で記入と変更をします。

ここまで作った『Googleフォーム』を確認してみましょう。

osaboo

上記で作った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』に追加すると以下の様にスクロールが隠れた表示になります。

補足

HTMLの表示幅と高さは → width="640" height="1054"

上記の数値を変更する事で「表示幅と高さ」の調整ができます。サイトの表示幅に合わせて調整してみてください。

以上で、Googleフォームを使った、お問い合わせフォームの固定ページが完成しました。

実際にお問い合わせフォームにテスト入力して、mailとコメントが届くか確認しましょう。

osaboo

ちゃんとMail届いた！？　^^"

お疲れ様でした！ ^^

当サイトのお問い合わせはコチラ！

2024/02/19現在お問い合わせフォームは『Google Forms → Contact Form7』に変更しました。

まとめ！お問い合わせフォーム【WordPressにGoogleフォームで設置！】

お問い合わせフォームをプラグイン無しで簡単に作成する方法をご紹介しました。~~当サイトでも、もちろん採用しています。~~
自分のサイトにログインする事なく、「Googleフォーム」を変更するだけで、複数のサイトに埋め込まれたフォームデザインがまとめて変更できるのも魅力だと思います。
是非！導入してみてください。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／

「WordPressテーマで失敗しない！」＆「アフィリエイトで収益化する！」＼【当サイトで愛用している：AFFINGER6 】【姉妹サイトで愛用している：SWELL 】どちらか選べば間違いない！／

WordPressテーマ

ACTION / AFFINGER6
コスパ最強のWordPressテーマ

価格：14,800円（税込）
＼当サイトで使用中！／

AFFINGER

WordPressテーマ

シンプル美と機能性両立を両立させた、圧巻のWordPressテーマ

価格：17,600円（税込）
＼姉妹サイトで使用中！／

SWELL

AFFINGER6_おすすめ記事！

1: 【2024年版 WordPressテーマ】AFFINGER6とSWELL徹底比較「どっちにする？」両方使ってみた！

WordPressテーマ「AFFINGER6とSWELL」を徹底比較。現役で両方使っている筆者が「こんな人におすすめ」を解説。テーマ選びで重要視するポイントやブロックエディターとクラシックエディターに関する注意点等、中立の立ち位置でご紹介。

2: 【特典付き】AFFINGER6 本音レビュー！メリット・デメリットを徹底解説

AFFINGER6とAFFINGER6EXの両方を使って3年目の本音レビューをご紹介。初心者が使った場合のメリットとデメリットを徹底解説。有料テーマをはじめて使う初心者の不安を解決！ブログ収益を加速させるオリジナル特典をご用意しました。

3: AFFINGER6 初心者がオススメする購入方法【特典付きを購入しよう！】

WordPressテーマACTION（AFFINGER6）のおすすめ購入方法を初心者目線でご紹介。また購入後のダウンロードからインストールまでの手順を全画像付きで丁寧に解説。初心者が迷子にならない為の公式サイトの検索手順と注意事項もご紹介します。

4: AFFINGER6【AFFINGERタグ管理マネージャー4 ver.4.1.1】の使い方！

AFFINGERタグ管理マネージャー4 ver4.1.1が2022/9/21にアップデートされ大幅に使いやすくなりました！表示機能も強化されグッと見やすなったリンク計測の表示など、アップデートの手順から広告用タグの作り方まで一気にご紹介します。