はじめに

完全に無料で運用出来るお問い合わせフォームを作成したいと思い作成しました。

完成したもののリンク
- https://nekoharuyuki.github.io/Form.io/

:::note alert 警告 ※　こちらのリンクからのお問い合せは本当に必要な場合のみでお願いします。 ※　レイアウトは調整中です。 :::

通常、お問い合わせフォームを作成する場合、AWS lambda や Google Cloud Functions でお問い合わせがあったことを知らせるアプリケーションを作成するか、他サービスのフォームを埋め込むことになります。しかし、運用には費用がかかり手軽ではありません...。

この記事では Github と Google フォームを使って、手軽にお問い合わせフォームを作成します。また、お問い合わせいただいた方に、問い合わせが行われたことを通知するためのメールで自動返信を行う処理も作成しています。

お問い合わせフォームの作成要件

お問い合わせフォームの作成に伴い、以下の要件を満たす状態になるように考えました。

完全に無料で運用する。
お問い合わせを簡単に管理出来る。
お問い合わせいただいた方に、問い合わせが行われたことを通知するためのメールで自動返信する。

事前準備

以下のサービスを利用する事で無料で開発を行いました。

Githubアカウント
Googleアカウント　　- フォーム　　- スプレッドシート　　- Gmail

実装

以下の手順で実装を行いました。

サイト用にリポジトリを作成する

Githubに新規でリポジトリを作成し、こちらの内容通りに、GitHub Pages サイトを作成します。お問い合わせフォームのデザインは下記のサイトから気に入ったデザインの html / css / javascript をコピーして、 GitHub Pages サイトを作成します。

https://deshinon.com/2019/03/03/otoiawase-oshare-css-kopie/

参考記事

https://docs.github.com/ja/pages/getting-started-with-github-pages/creating-a-github-pages-site

Google フォームでお問い合わせフォームを作る

Googleフォームを使った「お問い合わせフォーム」の作成を行います。 Googleフォームで以下の情報を入力してもらえるように設定します。

https://docs.google.com/forms/d/e/1FAIpQLSeMkXgsT8_xs4mIiF-bc6InDCAwknqLiy5Gh-JrQGnCHAPrJQ/viewform

名前・会社名　（必須）
メールアドレス　（必須）
お問い合わせ内容

参考記事

https://tonari-it.com/create-google-form/

自動返信メールを送る Google Apps Script を実装する

Googleフォームで作成したお問い合せの結果を、スプレッドシートに保存するように設定します。設定が完了したら、スプレッドシートに以下のscriptを取り込みます。

{
   "timeZone": "Asia/Tokyo",
  "dependencies": {},
  "webapp": {
    "access": "ANYONE",
    "executeAs": "USER_ACCESSING"
  },
  "exceptionLogging": "STACKDRIVER",
   "oauthScopes": [
   "https://www.googleapis.com/auth/script.send_mail",
   "https://www.googleapis.com/auth/script.external_request"
  ],
  "runtimeVersion": "V8"
}

function onFormSubmit(e) {
  // フォームの回答を取得
  var name = e.namedValues['名前・会社名'][0];
  var email = e.namedValues['メールアドレス'][0];
  var message = e.namedValues['お問い合わせ内容'][0];
  
  // 自動返信メール件名
  var subject = 'お問い合わせいただきありがとうございました。';
      
  // 自動返信メール本文
  var body = name + '様\n' +
    '\n' +
    'この度はお問い合わせいただき、誠にありがとうございました。' +
    '\n' +
    '後日、改めてご連絡させていただきますので\n' +
    'よろしくお願い申し上げます。\n' + 
    '\n' +
    '─────────────────────────\n' +
    'ご送信内容の確認\n' +
    '─────────────────────────\n' +
    '\n' +
    '【氏名】\n' +
    name + '\n' + 
    '\n' +
    '【メールアドレス】\n' +
    email + '\n' + 
    '\n' +
    '【お問い合わせ内容】\n' +
    message;
  
  // メール送信
  MailApp.sendEmail({
    to: email,
    subject: subject,
    body: body
  });

  keys = Object.keys(e.namedValues).sort()
  qa_list = keys.map( key => "### " + key + "\n" + e.namedValues[key] + "\n")
  
  url = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
  token = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
  options = {
    "method": "post",
    "headers" : {
      "Authorization": "token " + token, 
      "Accept": "application/vnd.github.v3+json"
    },
    "payload" : JSON.stringify({
      "title": "[お問い合せ] " + name + "様",
      "body": qa_list.join("\n")
    })
  }
  UrlFetchApp.fetch(url, options)

おまけ

添付したコードでは、自動返信メールを送った後に、Github の issue を作成しています。お問い合せを issue で管理出来るので便利です。

https://qiita.com/miyatsuki/items/5cc9c17c6d342007cb72

参考記事

https://nansystem.com/create-a-contact-form-with-google-form-and-auto-reply/

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

Googleフォームで「ページのソースを表示」を行い、各種値を取得し、入れ込みます。

サンプルコード

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>お問い合せ</title>
    </head>

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-158207338-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'UA-158207338-1');
    </script>

    <!-- Google Form -->
    <form
        action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSeMkXgsT8_xs4mIiF-bc6InDCAwknqLiy5Gh-JrQGnCHAPrJQ/formResponse"
        method="POST"
        target="hidden_iframe"
        onsubmit="submitted=true;"
        class="c-form"
    >
    
    <link rel="stylesheet" href="assets/css/main.css" />

    <h1 style="text-align: center;">お問い合せ</h1>

    <p style="text-align: center; margin: 20px auto">
        下記の項目を入力して、「送信する」のボタンを押して下さい。<br>必須の欄は必ず全てご記入下さい。
    </p>

    <p style="text-align: center; margin: 40px auto">
        ※回答までには1週間程度かかる場合もございます。御了承下さい。
    </p>

    <form class="c-form">
        <div class="c-form__item">
            <label class="c-form__label" for="field-name"
                >名前・会社名<span class="c-form__required">必須</span></label
            >
            <input
                name="entry.14683452"
                class="c-form__input"
                id="field-name"
                placeholder="氏名"
                type="text"
                required="required"
            />
        </div>
        <div class="c-form__item">
            <label class="c-form__label" for="field-mail"
                >メールアドレス<span class="c-form__required">必須</span></label
            >
            <input
                name="entry.448452954"
                class="c-form__input"
                id="field-mail"
                placeholder="sample@gmail.com"
                type="email"
                required="required"
            />
        </div>
        <div class="c-form__item">
            <label class="c-form__label" for="field-message">お問い合わせ内容</label>
            <textarea
                name="entry.1020368020"
                class="c-form__input"
                id="field-message"
                placeholder="お問い合わせ内容"
            ></textarea>
        </div>
        <div class="c-form__submit">
            <button type="submit">送信する</button>
        </div>
    </form>

    <script type="text/javascript">
        let submitted = false;
    </script>

    <iframe
        name="hidden_iframe"
        id="hidden_iframe"
        style="display: none"
        onload="if(submitted){window.location='./pages/thanks.html';}"
    ></iframe>
</html>

.c-form {
    max-width: 600px;
    margin: 0 auto;
}
.c-form__item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-bottom: 20px;
}
.c-form__label,
.c-form__input {
    padding: 10px;
}
.c-form__label {
    width: 90%;
}
.c-form__input {
    width: 90%;
    font-size: 16px;
    border: solid 1px #333;
    border-radius: 4px;
}
.c-form__input:focus-visible {
    outline: Black auto 1px;
}
.c-form__required {
    color: #fff;
    background-color: Red;
    border-radius: 4px;
    padding: 5px 5px;
    margin: 0 0 0 18px;
}
textarea.c-form__input {
    height: 160px;
}
.c-form__submit {
    text-align: center;
}
.c-form__submit button {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background-color: green;
    border: solid 1px green;
    border-radius: 4px;
    padding: 5px 32px;
    transition: 0.4s;
    cursor: pointer;
}
.c-form__submit button:hover {
    color: green;
    background-color: transparent;
}

@media (min-width: 640px) {
    .c-form__item {
        flex-wrap: nowrap;
    }
    .c-form__label {
        width: 40%;
    }
    .c-form__input {
        width: 55%;
    }
}

参考記事

https://zenn.dev/yurukei20/articles/9741118bfb5ee0

https://monomonotech.jp/kurage/memo/m220202_googleform_html.html

まとめ

完全に無料で運用出来るお問い合わせフォームの作成方法をざっくりとまとめました。作成したソースコードはこちらです。参考にして頂けると幸いです。

https://github.com/nekoharuyuki/Form.io

nekoblog

ちょっとためになるブログ

お問い合せフォームをGithubとGoogle Formで用意する

はじめに

お問い合わせフォームの作成要件

事前準備

実装

サイト用にリポジトリを作成する

参考記事

Google フォームでお問い合わせフォームを作る

参考記事

自動返信メールを送る Google Apps Script を実装する

おまけ

参考記事

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

参考記事

まとめ