【超簡単】お問い合わせフォームを設置する(Googleフォーム)

ツール
スポンサーリンク

著者のタカヒロは「はてなブログ」と「ワードプレス」両方の運営を行っています。
Googleフォームを使うと複数のブログやサイトで同じフォームを使うことができます。
また、お問い合わせの管理がGoogleスプレッドシート(表計算シート)でできるので、非常にべんりです。
※Googleアカウントが必要です。
Android携帯を使っている場合は最初に登録しているはず。。

Googleフォームを使ったお問い合わせフォーム

今回は

  • メールアドレス
  • お名前
  • お問い合わせ内容

のシンプルなフォームを作成します。

Googleフォームにアクセス

シンプルなフォームを作る

1.「メールアドレスの入力フォーム」
作成画面右下の「+」ボタンで新規作成

プルダウンボタンで「記述式」を選択

「質問」の部分に「メールアドレス」と入力

「メールアドレスの収集設定を有効にする」が出てくるのでクリックすると、フォームが

  • 「メールアドレスの入力」以外の入力を防いでくれる
  • 「入力必須」になる

と便利。

2.「お名前の入力」フォーム
画面下や右に出てくる「+」ボタンで項目を追加

プルダウンボタンで「記述式」を選択

「無題の質問」の部分に「お名前」と入力

「必須」ボタンをONにする。

3.「お問い合わせ内容」のフォーム
「+」ボタンで項目を追加

プルダウンボタンで「段落」を選択。
これで長文入力ができます。

「無題の質問」の部分に「お問い合わせ内容」と入力し、「必須」ボタンをONにする。

各項目の「・・・」ボタンをドラッグ&ドロップすると

上下に入れ替えることができます。

フォームをカスタマイズする

フォームの色を変える

右上のパレットボタンを押すと

フォームの色を自分好みに設定できます。

フォームに画像(バナー)を設置する

フォームにヘッダー画像を設定できます。
「画像を追加」から

今回は「+ONE」のバナーを入れてみました。

フォームとスプレッドシートを連携する

フォーム作成画面の「回答」タブをクリックすると
「スプレッドシートの作成」ボタンがあるのでクリック

「新規作成」でスプレッドシートが作成されて、

フォームに質問が届くたびにフォームに入力された内容が自動でスプレッドシートに書き込まれます。

フォームの動作テストをする

最後に動作テストをします。

レスポンシブなので、いろいろな表示のされ方しますが、「プレビュー」を押します

すると、作成したフォームが開くので、実際に「アドレス」「名前」「内容」を入れて送信してみましょう。

フォームをブログに埋め込む

フォーム作成画面の右上「送信」から「リンク」を取得

ワードプレス(Cocoonの場合)

URLをそのまま貼り付ければOKです。

「埋め込めませんでした」と書かれていても「プレビュー」で見てみると。ちゃんと反映されていました。

動作テストのあと、「ラジオボタン」の項目を追加しました。

「応援」よろしくお願いします~♪

コメント

タイトルとURLをコピーしました