記事内にプロモーションを含む場合があります。

当サイトの記事内では「アフィリエイト広告」などの広告を掲載している場合があります。消費者庁「ステマ規制」にあわせ、読者の誤認とならないよう、コンテンツ制作を心がけていますので、ご安心ください。

また、問題のある表現がありましたら、お問い合わせやコメントにて該当の箇所と併せてご一報いただけますと幸いです。

【Cocoon】Google Formsで「お問合せ」を作ってみた 【作業時間10分】

【Cocoon】お問い合わせフォームをGoogle Formsで作成! ブログについて

こんにちは、ちばはるです!
最近はWordPressのプラグインを減らそうと奮闘しております。

お問合せフォームをどうにかプラグインなしで作れないかなと思い、Google Formsで作成してみたのでご紹介です!

このページがオススメな人
  • プラグインを減らしたい方
  • お問合せフォームを作りたい方

におすすめです。

こだわらなければ10分でできちゃいますので、ぜひやってみてくださいね

スポンサーリンク

お問合せフォームを作るながれ・完成形見本も

作ったGoogle Formを自分のブログに設置するためには、

【Cocoon】お問い合わせフォームをGoogle Formsで作成する流れ
  1. お問合せフォーム用の固定ページを作成
  2. Google Formでお問合せを作成
  3. 埋め込みコードを固定ページに貼り付け

という流れになります。

作ったお問い合わせページはこんな感じ

はる
はる

うまく画像をとりこめていないので画像は後日追加します(;゚ロ゚)

固定ページを作ろう!

まず、固定ページを作成しておきましょう。
すでにお問い合わせフォーム用の固定ページがある人はこの手順を飛ばします。

1. 固定ページをつくろう:【固定ページから新規作成】

固定ページの作り方

2. タイトルをつける: 分かりやすく「お問い合わせフォーム」などにしておくと良いです。

タイトルはお問い合わせフォームなど分かりやすく

この状態で下書き保存して、Google Formの作成に移りましょう!

Google Formsで実際にお問い合わせを作ってみよう

Google Formsにはここから飛べます。

Google Forms: オンライン フォーム作成ツール | Google Workspace
Google Forms を使用して、さまざまな質問形式でオンライン フォームやアンケートを作成しましょう。どのデバイスでもリアルタイムで結果を分析できます。

お手持ちのGoogleアカウントでログインしたら、まずは空白のお問合せページを作りましょう。

空白のお問い合わせページ|Google Formsで作るお問い合わせ

クリックするだけで新しいフォームが作成できます。

タイトルの入力|お問合せ・コンタクトフォームなど

まずはタイトルを入力します。

タイトルを入力しりょう|Google Formsで作るお問い合わせ

タイトルになる部分は、

「お問合せ」
「コンタクトフォーム」

など、わかりやすい名前が⚪︎

「フォームの説明」はあってもなくても OKです。わたしは2・3日中に返事をする旨を記載しています。

入力項目を作成する

ここからは、お問合せをする人に入力してほしい項目を作成します。

入力項目の例
  • 名前
  • メールアドレス
  • 件名・題名
  • お問い合わせ内容

といったことが最低限あれば問題ないです。
すでにある「無題の質問」の項目をクリックすると、その項目の設定画面に変わります。

上記の項目はすべて記入してもらうタイプの質問なので、「記述式」を選びます。

入力項目を作成しよう|Google Formsで作るお問い合わせ

基本は短文形式で作成し、お問合せ内容だけ長文形式にしましょう

項目を増やすときは、+印を押すと増えます。

確認項目の作成

わたしは、最後に「確認項目」として、「プライバシーポリシーと免責事項を読んだかどうか」のチェックをお願いしています。

チェック項目の作成|Google Formsで作るお問い合わせ

記述式ではなく「チェックボックス」を選ぶだけで簡単に作れるので便利。

必須項目にする方法

これらの項目を作っても、必須項目にしていなければ不都合が出てきます。

さくら
さくら

名前なし、メアドなしで暴言とか送られてきそう・・・

はる
はる

わたしみたいな弱小ブログにはそんなことないと思うけど、一応必須にしていた方が安心だよね!

必須項目にする方法は簡単で、各項目の必須ボタンをONにするだけ。

項目名の横に赤い*がつけば必須になっています。

Google FormsをWordPressに設置してみよう

Google Formの埋め込みコードを、最初に作った固定ページに貼り付けします。

埋め込みコードを発行しよう

埋め込みコードを出すために、画面右上の「送信」ボタンを押します。

<>のマークを選び、好きなサイズに変更して埋め込みコードをコピーします。

埋め込みコードの取得|Google Formsで作るお問い合わせ

コードの例)

<iframe src="https://docs.google.com/forms/ここのURLは各々違う" width="幅" height="高さ" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>

サイズは後からでも変えられるので、そのままコピーしてもOK!

固定ページに埋め込みコードを貼り付けよう

先ほどWordPressで作った固定ページに貼り付けます。

Cocoonのブロックエディターを使用している場合は、+マークから、「カスタムHTML」を選び、そこに貼り付け。

カスタムHTMLを選択しよう|Google Formsで作るお問い合わせ
カスタムHTMLを選択して貼り付け用|Google Formsで作るお問い合わせ

カスタムHTMLを選ばずに貼り付けると、作ったお問合せフォームは表示されません。
読み込み中…とかかれていて不安になるかもしれませんが、その表記で問題ないです

プレビューや、自分のサイトを見ながらサイズを調整します。

サイズの調整は、貼り付けた埋め込みコード内の

・width (幅)
・height(高さ)

をコードの中から探し、調整すればOK

【参考までに】わたしの設定幅・高さはそれぞれ

・width = “800”
・height = “1200”

にしています。

終わりに

終わりに|あと書き的なこと

今回はGoogle Formsを使ったお問合せページの作成を紹介しました。

プラグインもひとつへって、個人的には満足です。

見た目はちょっと不満な部分もありますが、背景色などの変更もGoogle Formsで簡単にできるのでおすすめです。

もしよかったら作成してみてくださいねー!

この記事を書いた人
ちばはるのアイコン

ちばはる

料理|読書|ゲーム|猫が好き
運動不足解消のためにホットヨガに通い始めました。
わたしの日常が、誰かの役に立つと嬉しいです。

プロフィールへ

ブログについて
スポンサーリンク

ブログランキング・にほんブログ村へ にほんブログ村 ブログブログ 雑記ブログへ にほんブログ村 ブログブログへ

はるのとなり

コメント