–つかぽんのボヤキ部屋menuホームWebGoogleform埋め込みでラジオボタンのデータを送信する方法Web2018.08.20Googleform埋め込みでラジオボタンのデータを送信する方法Web制作している人間なら誰しもフォームでつまづくと思います。(つまづきますよね!?俺だけ...!?)そして以前、フォームを簡単に使えるformrunというものを紹介しましたが、コチラもなかなかに便利なのでオススメです。コピペするだけ!Web初心者でも簡単に作成できるフォーム作成ツール今回はformrunというツールの紹介をしたいと思います。formrunとは、一言で言うと「無料で誰でも簡単にフォームを好きなところに設置ができるサービス」です。正しくは設置もできるサービスですね。コーディングができる人は自分でフォームを作っちゃうと思...しかし、自分でフォームのデザインをしたいって場合はformrunだとテンプレが決まっているので細かい調整はできません。自分でデザインは決めたい。PHPやデータベースを使ってやるまではちょっとな...。場合はGoogleformを使いましょう。ちなみにGoogleformの埋め込みには2パターンあり、1つ目はデザインをそのままに1行のコードを貼り付けるだけと2つ目はフォームのコード部分だけを自分でつくり、データの送信先をGoogleformにするという2パターンあります。・デメリット:デザインを変更できない2つ目は・メリット:デザインを自分で好きにカスタマイズできる・デメリット:まぁまぁめんどいっで、めんどくてもとりあえずやってみたいってことで色々調べながらやってたんですが、どのサイトを見てもラジオボタンやチェックボックスのデータをGoogleformに送信するやり方を書いてなかったんですよね...なので今回そこのとこも書いていこうと思います。ちなみにテキストエリアのフォーム送信だけであれば簡単にできますが、ラジオボタンやチェックボックスになるとAjaxを使用することになるのでその辺だけ覚えておいてください。Googleフォームを自分のサイトに埋め込むまずフォームのHTMLを書きます。形はどんなんでもいいです。先にデザインを固めてしまって問題ありません。サンプルコードを貼っておくのでコピペしてもいいですよ。value="送信"></button></form>HTMLを書いたら、「name=”中身“」の中身は空にしておきましょう。次はGoogleフォームの作成です。以下リンクにアクセスし作成します。https://www.google.com/intl/ja_jp/forms/about/とりあえずこんなのを作成しました。作ったら右上にある目玉ボタンを押してプレビューを見ましょう。↓先ほど作成したフォームのプレビュー画面です。次は2つのフォームをつなげます。「右クリック」→「検証」を押してください。(キーボードのF12キーでも可。)すると以下のような画面になるので、キーボードの「Ctrlキー」と「Fキー」を同時に押してください。その後、以下画像の赤枠内に「entry.」と記入しエンターキーを押す。「entry.」の後ろにある数字を控えておいてください。以下画像で言えば「entry.1634969710」の部分です。これが「name」です。ちなみに今取得した数字は質問1のテキストボックスのnameです。こんな感じでフォームの数だけどんどんnameを取っていきましょう。ラジオボタンのname取得方法やっとここまできました。ここまでのやり方であれば他のサイトにも載っています。ここから私がつまずいたところです。ラジオボタンとチェックボックスのnameの探し方です。画像の通りの手順で進めてください。これでラジオボタンのname取得は終わりです。ラジオボタンは複数の選択肢があってもnameは同一のため1つ取得してしまえば問題ありません。上記と同様にチェックボックスもnameを取得してください。選択肢ごとにはnameは設置されないからです。先ほど取得したnameを記載していきます。さっき控えたname・テキストボックス:entry.1634969710・ラジオボタン:entry.1598380182・チェックボックス:entry.590634895これを自分でコーディングしたコードのname部分にうつしていきます。value="送信"></button></form>これでも一応コードの1行目にあるformタグの「action=””」にGoogleformの中にあるURLを記入するだけで動きます。今度は「formResponse」と入力してエンターキーで以下のソースコードがヒットします。id="mG61Hd">↑これを追加したらフォームが動きます。※このコードのhogehogeの部分は内容は人によって異なります。結果もきちんと表示されました。この状態でも動くことには動きますが、ボタンを押すとGoogleformの送信完了画面に移動してしまいます。これだと送信後に自分のページを離れてしまい離脱されてしまいます。次はAjaxによる操作でページ遷移をせずにGoogleformにデータを送信する方法を紹介します。4資格・免許は話のネタになる。新しいことへのあと一歩の勇気が出ない人へ「勇気はあとからついてくる。目標がない人はやりたいことリスト100をやってみよう関連記事WebExcelの代わりに無料で使えるオンラインアプリケーション!PCにExcelが入っていないけど買いたくない...たまに、「...WebWebデザイナーにオススメの業務効率化PCソフト8選これからデザインやコーディングをしていくつもりの人に、私オススメの業務...Webダウンロードとインストールってなにがどう違うの?徹底解説してみたパソコンに詳しくなくてもダウンロードとインストールって聞いたことありま...Webコピペするだけ!Web初心者でも簡単に作成できるフォーム作成ツール今回はformrunというツールの紹介をしたいと思います。無事送信することができました!しかし...またつまづいております。バリュー属性と、文字を同じにしなければならないという記事をどこかで見つけて、早速やってみたのですが、それでもサブミットは押せて、完了通知も出るのに、ラジオボタンだけ入力情報がないと出ます><なぜでしょうか...なんとかしたい思いで3時間、PCと向き合っておりますが、なかなか前に進めないので、質問させていただきました。「完了通知も出るのに、ラジオボタンだけ入力情報がない」というのは実際にコードを見てみないことには何とも言えないですね...。よろしければコードをお見せいただくことはできますか?このコメントフォームに直接コードを書いてしまうとうまく表示されないためメールなどでお問い合わせいただければ回答いたします。引用ありがとうございます...感激です!先ほど余談とともに、コード送らせていただきました。助言いただけたら嬉しいです!よろしくお願いします。昨日夜中に諸々確認したメールを返信しておりますのでご確認ください。URL返信をキャンセルする。-URL最近の記事2019.12.19ランサーズで稼げるの?副業初めての会社員が1ヶ月試...こんちゃす。Webサイト運用の会社に勤めて3年目。副業は今までやったこ...2019.12.1【PC自作】PCケース「QUADSTELLAR」買...ちょっと今回は技術系の記事ではないんですけど、とんでもない化け物PCを自作した...2019.05.26非同期(Ajax)でPHPの関数を実行させサーバー...最近PHPを勉強し始めたので備忘録がてら書きます。今回は、HTMLファ...2019.05.1Switchソフトで悩んだらゼノブレ2を買え!ゼル...このブログでゲームソフトを紹介したことは一度もないですが、今回はどうしても人に...2019.04.20ポートフォリオサイト作成しました。大々的に言う必要もないんですが、PORTFOLIO(ポートフォリオ)サ...カテゴリーDiary16Game2Other4Web28カメラ/写真4ぼやき9アーカイブ2019年12月2019年5月2019年4月2019年3月2019年2月2019年1月2018年12月2018年11月2018年10月2018年9月2018年8月2018年7月2018年5月Profiletukapon調理師を目指していたらいつの間にかWebデザイナーになってました。