Web

Googleform埋め込みでラジオボタンのデータを送信する方法

Web制作している人間なら誰しもフォームでつまづくと思います。(つまづきますよね!?俺だけ…!?)

そして以前、フォームを簡単に使えるformrunというものを紹介しましたが、コチラもなかなかに便利なのでオススメです。

しかし、自分でフォームのデザインをしたいって場合はformrunだとテンプレが決まっているので細かい調整はできません。

自分でデザインは決めたい。けどPHPやデータベースを使ってやるまではちょっとな…。
って場合はGoogleformを使いましょう。

ちなみにGoogleformの埋め込みには2パターンあり、
1つ目はデザインをそのままに1行のコードを貼り付けるだけと
2つ目はフォームのコード部分だけを自分でつくり、データの送信先をGoogleformにする
という2パターンあります。

どちらもメリットデメリットがありますが、
1つ目は
・メリット:どちゃくそ簡単
・デメリット:デザインを変更できない

2つ目は
・メリット:デザインを自分で好きにカスタマイズできる
・デメリット:まぁまぁめんどい

っで、めんどくてもとりあえずやってみたいってことで色々調べながらやってたんですが、

どのサイトを見てもラジオボタンやチェックボックスのデータをGoogleformに送信するやり方を書いてなかったんですよね…

 

なので今回そこのとこも書いていこうと思います。

ちなみにテキストエリアのフォーム送信だけであれば簡単にできますが、

ラジオボタンやチェックボックスになるとAjaxを使用することになるのでその辺だけ覚えておいてください。

Googleフォームを自分のサイトに埋め込む

まずフォームのHTMLを書きます。形はどんなんでもいいです。

先にデザインを固めてしまって問題ありません。

サンプルコードを貼っておくのでコピペしてもいいですよ。

HTMLを書いたら、「name=”中身“」の中身は空にしておきましょう。

Googleフォームの作成

次はGoogleフォームの作成です。
以下リンクにアクセスし作成します。

https://www.google.com/intl/ja_jp/forms/about/

とりあえずこんなのを作成しました。

んで、作ったら右上にある目玉ボタンを押してプレビューを見ましょう。

↓先ほど作成したフォームのプレビュー画面です。

GoogleformからIDを取得する

自分のサイトで使うフォームと、Googleformが完成したら、

次は2つのフォームをつなげます。

まず、以下画像の通りに、作成したGoogleformの入力エリアにマウスカーソルを持っていき、

「右クリック」→「検証」を押してください。(キーボードのF12キーでも可。)

すると以下のような画面になるので、

キーボードの「Ctrlキー」と「Fキー」を同時に押してください。

その後、以下画像の赤枠内に「entry.」と記入しエンターキーを押す。

そうすると以下画像のように色がつくところがあるので、

entry.」の後ろにある数字を控えておいてください。

例えば以下画像で言えば「entry.1634969710」の部分です。

これが「name」です。

ちなみに今取得した数字は

質問1のテキストボックスのnameです。

こんな感じでフォームの数だけどんどんnameを取っていきましょう。

 

ラジオボタンのname取得方法

やっとここまできました。。。

ここまでのやり方であれば他のサイトにも載っています。

 

が、ここから私がつまずいたところです。

ラジオボタンとチェックボックスのnameの探し方です。

画像の通りの手順で進めてください。

これでラジオボタンのname取得は終わりです。

ラジオボタンは複数の選択肢があってもnameは同一のため1つ取得してしまえば問題ありません。

上記と同様にチェックボックスもnameを取得してください。

 

なぜラジオボタンやチェックボックスが1つのnameかというと、

以下の図のように質問ごとにnameが設置されはしますが、

選択肢ごとにはnameは設置されないからです。

nameの記入

先ほど取得したnameを記載していきます。

さっき控えたname
・テキストボックス:entry.1634969710
・ラジオボタン:entry.1598380182
・チェックボックス:entry.590634895

これを自分でコーディングしたコードのname部分にうつしていきます。

 

これでも一応コードの1行目にあるformタグの「action=””」にGoogleformの中にあるURLを記入するだけで動きます。

探し方は先ほどnameを取得するときと同じで「右クリック」→「検証」で、

今度は「formResponse」と入力してエンターキーで以下のソースコードがヒットします。

↑これを追加したらフォームが動きます。
※このコードのhogehogeの部分は内容は人によって異なります。

結果もきちんと表示されました。

 

しかしこの状態でも動くことには動きますが、ボタンを押すとGoogleformの送信完了画面に移動してしまいます。

これだと送信後に自分のページを離れてしまい離脱されてしまいます。

せっかくなので送信後にページを遷移しない設定にしておきたいので、

次はAjaxによる操作でページ遷移をせずにGoogleformにデータを送信する方法を紹介します。

 

長くなってしまったので今日はここまで(´゚ω゚`)

▼次の記事
Googleform埋め込みで回答完了画面に遷移させない方法

ピックアップ記事

  1. Googleフォーム埋め込みでチェックボックス複数選択させデータを送信する方法
  2. 目標がない人はやりたいことリスト100をやってみよう
  3. 新しいことへのあと一歩の勇気が出ない人へ「勇気はあとからついてくる。」

関連記事

  1. Web

    Googleフォーム埋め込みでチェックボックス複数選択させデータを送信する方法

    今回はGoogleform埋め込みで回答完了画面に遷移させない方法…

  2. Web

    レンタルサーバー探してるならCORESERVER使ってみて!

    ブログを始めるならCORESERVERを使おう!もともと私はデータ…

  3. Web

    非同期(Ajax)でPHPの関数を実行させサーバーにフォルダとファイルを作成する

    最近PHPを勉強し始めたので備忘録がてら書きます。今回は、H…

  4. Web

    無料でWebサイトを作成するならOnePageがおすすめ!

    OnePageとはOne Pageは端的に言えばWebサイトを簡単…

  5. Web

    【jQuery】ナビの範囲外をクリックしてナビを閉じる方法

    Webサイトのナビやメニュー用のプラグインが多く出回ってますが、…

  6. Web

    メルマガテスターつくりました。|HTMLメールのテスト配信ツール使い方解説。

    みなさんどうも。久々の投稿です。今回メルマガ等で配信するHT…

コメント

    • まっきー
    • 2019年 8月 19日

    とても参考になる記事ありがとうございます!
    ずっとラジオボタンの情報送信でつまづいてて、サブミット押しても情報送信できなかったことで止まってたので、
    無事送信することができました!
    しかし…またつまづいております。
    バリュー属性と、文字を同じにしなければならないという記事をどこかで見つけて、早速やってみたのですが、
    それでもサブミットは押せて、完了通知も出るのに、ラジオボタンだけ入力情報がないと出ます><
    なぜでしょうか…
    なんとかしたい思いで3時間、PCと向き合っておりますが、なかなか前に進めないので、質問させていただきました。

    もしお時間あれば、回答いただけると嬉しいです
    よろしくお願いします!!

    • まっきー様

      コメントありがとうございます!
      そうですね、「バリュー属性と、文字を同じにしなければならない」というのは確かにその通りだと思いますが、
      「完了通知も出るのに、ラジオボタンだけ入力情報がない」というのは実際にコードを見てみないことには何とも言えないですね…。

      もしよろしければコードをお見せいただくことはできますか?
      このコメントフォームに直接コードを書いてしまうとうまく表示されないためメールなどでお問い合わせいただければ回答いたします。
      ↓当ブログお問い合わせフォーム
      https://tukapon-k.jp/%e3%81%a4%e3%81%8b%e3%81%bd%e3%82%93%e5%85%ac%e5%bc%8f%e3%82%b5%e3%82%a4%e3%83%88/contact

        • まっきー
        • 2019年 8月 20日

        ありがとうございます…
        感激です!
        先ほど余談とともに、コード送らせていただきました。
        助言いただけたら嬉しいです!
        よろしくお願いします。

        • まっきー様

          昨日夜中に諸々確認したメールを返信しておりますのでご確認ください。

  1. 2019年 9月 02日

最近の記事

  1. Web

    メモ帳ソフト”CatMemoNote”の設定から使い方まで解説!
  2. Diary

    【Surface Lapotop】をサブ機に!
  3. Web

    【ace.js】エディタを複数表示させる方法
  4. Diary

    仙台は生活しやすい?実際に住んでみた感想をレビュー
  5. カメラ/写真

    【スタビライザー】Flycam(フライカム) C6買ってみた
PAGE TOP