2022年02月09日更新

Googleフォームを自作のHTML/CSSに取り込む方法

どうも、クラゲジュニアです。
少し裏技的な方法ですが、Googleフォームで用意されているデザインを使うのではなく、オリジナルのデザインにする方法です。

[TOC]

Googleフォームを作る

通常通りの方法でGoogleフォームを作成します。
このときの構成に対して、後に作るHTMLを合わせる必要があります。

今回は以下３つで構成しました。

お名前：記述式（短文回答）
満足度：ラジオボタン
ご意見：段落（長文回答）

ラジオボタンは３つとし、選択肢は以下の通りです。

満足
普通
不満

タイトルなどは無くても良いです。
必須のトグルはオフにします。

form actionを探してメモる

目のアイコンをクリックしてプレビューを開きます。

プレビュー画面で右クリックからページのソースを表示を選択します。

Ctrl + Fキーを押し、form actionで検索して、以下のような箇所を見つけメモします。

form action="https://docs.google.com/forms/u/0/d/e/.../formResponse"

...の部分は実際には長いです。

各質問の番号を探してメモる

今度は各質問で検索し、その横にある番号をメモします。
例えばお名前で検索したときに、右側に出てくる番号がそれに当たります。

満足度、ご意見も同様に探してメモします。

クラゲジュニアの場合は以下の３つでした。

1654055161
389089207
948431332

オリジナルhtmlファイルで送信

index.htmlで新規作成し、以下の内容をコピペしてください。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Form</title>
  </head>
<body>
<h1>フォーム</h1>
<form action="https://docs.google.com/forms/u/0/d/e/.../formResponse" method="post">

お名前を教えてください<br>
<input type="text" name="entry.1654055161"><br>
<br>
満足度はいかがでしょうか？<br>
<input type="radio" name="entry.389089207" value="満足">満足です！<br>
<input type="radio" name="entry.389089207" value="普通">普通でした。<br>
<input type="radio" name="entry.389089207" value="不満">不満です。。。<br>
<br>
ご意見があれば記述お願いします。<br>
<textarea name="entry.948431332" rows="3" cols="50"></textarea>
<br>
<button type="submit">送信</button>

</form>
</body>
</html>

以下４つを皆さんがメモした内容に変更してください。
番号の場合は、前にentry.を付ける必要があります。

form action= のURLの１か所
entry.1654055161の１か所
entry.389089207の３か所
entry.948431332の１か所

index.htmlを起動して、内容を適当に記述して送信します。

このページが表示されれば成功です。

表示されない場合はform action=のURLを見直してみてください。Googleフォーム側の回答にも入力されていると思います。回答がない場合は番号を見直してみてください。

送信後のページもオリジナルにしたい

送信後に表示したいページthanks.htmlを新規作成します。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Thanks</title>
  </head>
<body>
<h1>送信しました！</h1>
ご回答ありがとうございました
</script>
</body>
</html>

index.htmlを以下のように変更します。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Form</title>
  </head>  
<body>
<h1>フォーム</h1>
<form action="https://docs.google.com/forms/u/0/d/e/.../formResponse" method="post" target="hidden_iframe" onsubmit="submitted=true;">

お名前を教えてください<br>
<input type="text" name="entry.1654055161"><br>
<br>
満足度はいかがでしょうか？<br>
<input type="radio" name="entry.389089207" value="満足">満足です！<br>
<input type="radio" name="entry.389089207" value="普通">普通でした。<br>
<input type="radio" name="entry.389089207" value="不満">不満です。。。<br>
<br>
ご意見があれば記述お願いします。<br>
<textarea name="entry.948431332" rows="3" cols="50"></textarea>
<br>
<button type="submit">送信</button>

</form>
<script>
    let submitted = false;

    const page_transition = function () {
        if(submitted){
            window.location = 'thanks.html';
        }
    }
</script>    
<iframe name="hidden_iframe" style="display:none;" onload="page_transition()"></iframe>
</body>
</html>

先ほどと同様に、以下４つを皆さんがメモした内容に変更してください。

form action= のURLの１か所
entry.1654055161の１か所
entry.389089207の３か所
entry.948431332の１か所

これで送信後はオリジナルページに飛ぶようになります。

注意点

今回の方法は、Google公式のやり方ではないため、Google側で仕様が変更になった際はエラーになる可能性がありますのでご注意ください。

以上です。