かんたん作成!Google Formsでフォームを設置する メイン画像

かんたん作成!Google Formsでフォームを設置する

  • 公開日アイコン

Ad Area

ブログ運営者の連絡先としてメールアドレスを出していたが、アドレスを収集されてスパムメールが来る原因になり得るので、フォームに変更することにした(メールアドレスのエンティティ化でスパムメール防止という方法もあるが、説明されている記事が10年近く前のものが多く、効果がどれほどあるのか不明である)。

メールフォームの作成方法

  1. Vue.js製フォーム
  2. Netlify form
  3. その他外部サービス

1 は、エンジニアではない自分には敷居が高いので却下。
2 は良さそうだと思ったが、Netlifyのフォームは削除しても消えないという記事を見かけたので避けることにする。

消去法で、3 のその他外部サービスとしてGoogle Formsを利用することに決めた。

Google Forms(パーソナル)の作成

Google Formsサインイン画面
Tomって誰だい

個人利用なので、「パーソナル」を選択。

テンプレート選択

今回は自由に項目を設定したいので、「空白」から新規作成する。

項目修正

デフォルトのフォーム(無題のフォーム、フォームの説明、無題の質問)

初期状態で、フォームタイトル(無題のフォーム)、フォームの説明、無題の質問(ラジオボタン形式)が表示されるので、エリアをクリックして各項目を修正していく。

プルダウンからフォームパーツの形式が選択できる

「ラジオボタン」のプルダウンを押下すると他の選択が出てくるので、質問形式に相応しいものを選ぶ。記述式、段落(それぞれテキストエリア、テキストボックスに相当)はもちろん、ファイルのアップロードや日付・時刻なども選択できる。

必須項目にはチェック

お名前・メールアドレスは「記述式」、内容は「段落」を選択した。必須にしたい項目にはチェックを入れる。

項目追加

フォームの項目追加

フォーム右メニューの+アイコンをクリックするとフォーム項目が追加される。

テーマオプション

ナビゲーションバーの3つのアイコン
左から、テーマ・プレビュー・設定

ナビゲーションバーにある3つのアイコンの中から、一番左のパレットマークを選択する。

フォームのテーマオプション画面

フォームのテーマオプションが表示される。

ヘッダー画像の選択画面

ヘッダー画像は任意で設定する。テーマ・アップロード・写真(Googleフォト内)から選択できる。

テーマカラーは既存の12色以外に+アイコンからカスタムカラーを登録できる。

背景色は4色からの選択となる。カスタム登録はできないようだ。

フォントスタイルはベーシック・デコラティブ・フォーマル・プレイフルから選択できるが、フォーマル(明朝体)以外はすべてゴシックで表示される(デバイスにインストールされているフォントによるのだろうか?)。

送信後メッセージ設定

設定アイコン

ナビゲーションバーの設定(歯車アイコン)>「プレゼンテーション」のタブからフォーム送信後の確認メッセージが設定できる。

確認メッセージ等設定画面

デフォルトで「別の回答を送信するためのリンクを表示」にチェックが入っていたが、必要ないと思い外した。

フォームを送信

ナビゲーションバーの「送信」をクリック

作成が終わったら、ナビゲーションバーの「送信」をクリックすると「フォームを送信」モーダルが表示される。送信方法はメール、リンク、HTML(iframe)埋め込みの3つから選べる。

送信方法が「リンク」の場合

リンクの場合は、真ん中のタブを選択してリンクURLをコピーする。

送信方法が「HTML埋め込み」の場合

HTML埋め込みの場合は、3つ目のタブをクリックしてiframeのコードをコピーし、フォームを表示させるページに張り付ける。iframeの幅・高さの調整は可能。

フォームの回答を見る

送信されたデータ

フォームから送信データが「回答」に入る

出来上がったフォームからテスト送信すると、「回答」タブに送信した内容が入る。

csvをダウンロード

メニューアイコンをクリック

回答のところにある3点メニューアイコンをクリックして、

「回答をダウンロード」をクリック

「回答をダウンロード」を選択するとcsvファイルがzip形式でダウンロードされる。

フォルダーを解凍してcsvを開くと、

文字化けのcsvデータ

文字化け…。

csvの文字化けを解消する

csvを右クリックからメモ帳で開く

右クリック→メモ帳(などのテキストエディタ形式)でcsvを開く。

文字コードをANSIにして保存する

別名保存する。その際に文字コードをANSIにする。

文字化けが直ったcsv

文字化けが直った。

Google Formsを無効にする

Google Formsの無効化

「回答を受付中」のチェックをクリックすると、「回答を受け付けていません」に変更される。

参考ページ

Ad Area