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

関連記事

  1. Web

    Excelの代わりに無料で使えるオンラインアプリケーション!

    PCにExcelが入っていないけど買いたくない…たまに、「…

  2. Web

    Webデザイナーにオススメの業務効率化PCソフト8選

    これからデザインやコーディングをしていくつもりの人に、私オススメの業務…

  3. Web

    ダウンロードとインストールってなにがどう違うの?徹底解説してみた

    パソコンに詳しくなくてもダウンロードとインストールって聞いたことありま…

  4. Web

    コピペするだけ!Web初心者でも簡単に作成できるフォーム作成ツール

    今回はformrunというツールの紹介をしたいと思います。fo…

  5. Web

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

    ブラウザ内でコードを書くならそれ用のエディタを使うわけなんですが、…

  6. Web

    ブログサービス「Blogger」の使い方紹介

    友人が2名「自分もブログやりたい!」と言っていたので、自分がや…

コメント

    • まっきー
    • 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. ぼやき

    画面が勝手に動く…スマホの不具合【ゴーストタッチ】
  2. Web

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

    USBにデータ保存は危険?データが消えるので注意!
  4. Game

    【マイクラ日記】マイクラ日記始めました
  5. Diary

    Switchソフトで悩んだらゼノブレ2を買え!ゼルダBOWよりオススメXenob…
PAGE TOP