だって楽したいじゃんか!

大学院(機械工学科)を首席で卒業した男がこれまでの経験を生かさず殺さず発信していく

【デザイン】Google Formをカスタマイズしてみる【Google Form】

f:id:makimakimakino:20190113012620p:plain
Google Formをカスタマイズする方法について書いてみます。

以前お問い合わせフォームをGoogle Formで作成し、はてなブログに埋め込みました。
【デザイン】はてなブログの体裁を整えるためにしたこと【ちょっとおしゃれっぽく】 - だって楽したいじゃんか!


こんな感じです。

。。。。。


ふと思いました。

スクロールしないと見切れるし、場所とるし、デザイン的にも個性がない。。。

自分でカスタマイズできないかな。

と、思い、作ってみたところこんな感じになりました。

f:id:makimakimakino:20190420220950p:plain

Google Formを上書きするイメージなので、問い合わせを送信すると、Google Formのデータとして登録されます。

もちろん集計や、登録後のメールもGoogle Formの設定でそのまま使えます。

f:id:makimakimakino:20190420224513p:plain

やり方は結構簡単で、ある程度HTMLとJavaScriptの知識があれば作れちゃいます。


カスタマイズ手順

  1. Google Formをオーバーラップする形でHTMLを書く
  2. FormとHTMLの項目を紐づける
  3. 画面遷移をカスタマイズする
  4. 自作フォームの見た目を整える

を順番にやっていきます。

Google Formをオーバーラップする形でHTMLを書く

まずHTMLを作ります。

この時注意するのはGoogle Formで入力すべき項目はHTML上にも設置させるというところです。

お名前、連絡先、質問の項目をHTMLに追加します。


カスタマイズフォーム

<h4>お問い合わせフォーム</h4>
<p>だって楽したいじゃんか!のお問い合わせフォームになります。<br>記事についての質問、訂正、ご意見、ご要望お食事のお誘いなんでもOKです。</p>
<form>
  <div>
    <label>お名前</label>
    <input type="text" placeholder="山田 太郎"/>
  </div>
  <div>
     <label>ご連絡先(メールアドレス)</label>
     <input type="mail" placeholder="mail@example.com"/>
   </div>
   <div>
     <label>質問・ご要望</label>
     <textarea placeholder="質問やご要望について"></textarea>
    </div>
    <button type="submit">送信</button>
</form>


こんな感じになります。

f:id:makimakimakino:20190420223734p:plain

FormとHTMLの項目を紐づける

続いて、作成したHTMLの入力項目の値をGoogle Formと紐づけるようにHTMLを書き換えます。

書き換える場所は、formタグの属性と、各入力項目のname属性です。

これらの値を書き換える値は元のGoogle FormのHTMLからとってきます。

元となるGoogle Formを表示させます。

Formの編集画面で送信>🔗>コピーを順に押します。

f:id:makimakimakino:20190420225737p:plain

ブラウザでコピーしたURLにアクセスします。

F12を押して、ブラウザの開発者ツールを立ち上げます。

actionの値は<form action="https://xxxxx" target="_self" method="POST" id="mG61Hd">となっているところを探して、自作HTMLのactionにコピーします。

f:id:makimakimakino:20190420230208p:plain

自作HTMLの各項目のnameについても元のGoogle FormのHTMLからとってきます。

紐づけたい項目のname="entry.xxxxx"となっているところをコピーします。

f:id:makimakimakino:20190420230934p:plain

コードに書くと下記のようになります。


カスタマイズフォーム

<h4>お問い合わせフォーム</h4>
<p>だって楽したいじゃんか!のお問い合わせフォームになります。<br>記事についての質問、訂正、ご意見、ご要望お食事のお誘いなんでもOKです。</p>
<form action="https//xxxxxxxxxxxxxxxxxx" method="post">
  <div>
    <label>お名前</label>
    <input type="text" name="entry.xxxxx" placeholder="山田 太郎" required/>
  </div>
  <div>
     <label>ご連絡先(メールアドレス)</label>
     <input type="mail" name="entry.xxxxx" placeholder="mail@example.com" required/>
   </div>
   <div>
     <label>質問・ご要望</label>
     <textarea name="entry.xxxxx" placeholder="質問やご要望について" required></textarea>
    </div>
    <button type="submit">送信</button>
</form>


xxxxxxxxのところを置き換えます。

また、必須や文字数制限、書式などの入力規則も元のGoogle Formと揃えておきましょう。

画面遷移をカスタマイズする

次に、このままだと、送信後にGoogle Formの回答完了画面が強制的に表示されます。

f:id:makimakimakino:20190420231751p:plain

こちらは見た目的に統一感がなくなるのと、はてなブログと相性が良くないので、回答後の画面遷移をコントロールします。


カスタマイズフォーム

<h4>お問い合わせフォーム</h4>
<p>だって楽したいじゃんか!のお問い合わせフォームになります。<br>記事についての質問、訂正、ご意見、ご要望お食事のお誘いなんでもOKです。</p>
<div id="formWrapper">
  <form action="https://docs.google.com/forms/d/e/xxxxxxxxxxxxxxxx/formResponse" method="post" name="myForm" target="dummyIframe">
    <div>
      <label>お名前</label>
      <input type="text" name="entry.1830423923" placeholder="山田 太郎" required/>
    </div>
    <div>
      <label>ご連絡先(メールアドレス)</label>
      <input type="mail" name="entry.1595257947" placeholder="mail@example.com" required/>
    </div>
    <div>
      <label>質問・ご要望</label>
      <textarea name="entry.1990308657" placeholder="質問やご要望について" required></textarea>
    </div>
    <input class="btn btn-success" type="button" value="送信" onclick="submitForm()"/>
  </form>
  <iframe name="dummyIframe" style="display:none;"></iframe>
</div>
<div id="thxMessage" style="display:none;"><p>お問い合わせありがとうございました。</p></div>
<script>
  function submitForm(){
    document.myForm.submit();
    document.getElementById('formWrapper').style.display = 'none';
    document.getElementById('thxMessage').style.display = 'block';
  }
</script>


ポイントは、送信をボタンではなくinputタグで表現しているところと、form送信処理と、送信後の処理をJavaScriptを使ってコントロールしているところです。

自作フォームの見た目を整える

最後に自作のフォームの見た目を整えます。

見た目を整えるために、BootStrap(CDN)を使っています。

完成形がこちらです。


カスタマイズフォーム

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="panel panel-success">
  <div class="panel-heading">
    <h4>お問い合わせフォーム</h4>
    <p>だって楽したいじゃんか!のお問い合わせフォームになります。<br>記事についての質問、訂正、ご意見、ご要望お食事のお誘いなんでもOKです。</p>
  </div>
  <div class="panel-body">
    <div id="formWrapper">
      <form action="https://docs.google.com/forms/d/e/xxxxxxxxx/formResponse" method="post" name="myForm" target="dummyIframe">
        <div class="form-group">
          <label for="name">お名前</label>
          <input type="text" class="form-control" id="name" name="entry.1830423923" placeholder="山田 太郎" required/>
        </div>
        <div class="form-group">
          <label for="name">ご連絡先(メールアドレス)</label>
          <input type="mail" class="form-control" id="mail" name="entry.1595257947" placeholder="mail@example.com" required/>
        </div>
        <div class="form-group">
          <label for="message">質問・ご要望</label>
          <textarea id="message" class="form-control" name="entry.1990308657" placeholder="質問やご要望について" required rows="5" cols="40"></textarea>
        </div>
        <input class="btn btn-success" type="button" value="送信" onclick="submitForm()"/>
      </form>
      <iframe name="dummyIframe" style="display:none;"></iframe>
    </div>
    <div id="thxMessage" style="display:none;"><p>お問い合わせありがとうございました。</p></div>
  </div>
</div>
<script>
  function submitForm(){
    document.myForm.submit();
    document.getElementById('formWrapper').style.display = 'none';
    document.getElementById('thxMessage').style.display = 'block';
  }
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


これをブログメニューのデザイン>スパナマーク>記事>記事下に貼り付けます。
f:id:makimakimakino:20190420233732p:plain
f:id:makimakimakino:20190420233851p:plain

以上が自作のGoogle Formをカスタマイズする方法になります。

まとめ

表示させてみると以下のようになります。

f:id:makimakimakino:20190420220950p:plain

送信すると回答画面が表示されます。

f:id:makimakimakino:20190421000156p:plain

以上のようにGoogle Fromを自作HTMLでラップしました。

Bootstrapをブログ内で呼び出す位置が正しいのか、
BootStrapが他のタグに悪影響を及ぼしているため、自作フォームのみに適用させる方法などは今後の課題です。