Google Formsを使ってブログの問い合わせフォームを作ってみた

 このブログにはお問い合わせ用のメールフォームがなかったので設置してみました。

Google Formsを使ってフォームを作ると情報を受け取る側のページをわざわざ作らなくても、スプレッドシートにタイムスタンプ付きで記錄が残るので便利です。

最近はアンケートとかでもGoogle Formsを使っているのをよく見かけるのですが、ページに組み込んでしまうと表からでは「グーグルフォームっぽくない」ページに仕上がるのでオススメです。

問い合わせフォーム

https://financial-pharmacist.blogspot.com/p/blog-page.html

このフォームはBloggerのページ上でHTMLで書いていますが、Google Formsを利用しているので、ドライブのスプレッドシートに回答がタイムスタンプ付きで自動で登録されます。

<form action="https://docs.google.com/forms/u/0/d/e/(xxxxxxxx)/formResponse" id="tasklogform" name="tasklogform" target="empty">
        <label>当ブログへのご意見やお仕事依頼などがあれば、何でも構いませんのでこちらのフォームから送ってください。<br />ご記入頂いたメールアドレスへgmailアドレスで返信させていただきます。<br /><br /><span style="background-color: #fcff01;">名前</span></label>
        <p id="username"></p>
        <input id="name" name="(xxxxxxxx)" required="" size="40" type="text" /><hr />
        <span style="background-color: #fcff01;"><label>メールアドレス</label>
        </span><p id=""></p>
        <input id="patient" name="(xxxxxxxx)" required="" size="40" type="text" /><hr />
        <label style="background-color: #fcff01;">お問い合わせ内容</label>
        <p id="homeName"></p>
         <textarea cols="40" id="home" name="(xxxxxxxx)" required="" rows="10"></textarea><hr />
        <button id="button" name="button" onclick="send()" value="">送信</button>
      </form>
        <p id="complete" style="color: red;"></p>
      <iframe name="empty" style="border: 0px; height: 0px; width: 0px;"></iframe>
<script>
  function  send(){
        document.tasklogform.submit();
        document.getElementById("complete").innerText = "お問い合わせを送信しました。ありがとうございます。"
     }
</script>

一部伏せ字にしてありますが、上記のコードで書きました。CSSも自由に編集できるのでデザインも凝ったフォームを作ることも可能です。

パラメーターなどの詳しい話は、また別の投稿で書きます。