LoginSignup
3
1

More than 1 year has passed since last update.

@Coa3

自作ポートフォリオにグーグルフォームのお問い合わせを追加してみた

Last updated at Posted at 2022-07-01

概要

今回は自作のポートフォリオにグーグルフォームを使ったお問い合わせフォームを埋め込んでみようと思います。

ワードプレスの扱い方がよく分からず、グーグルフォームを埋め込んでみたんだけどCSSいじれないしグーグルフォームのUI丸出しでダサくね？ってことでHTMLに書いた自作のフォームにグーグルフォームを紐づける方法をまとめました。

これで自由にCSSもいじれるしGoogleアカウント一つでお問い合わせフォームが埋め込めてとても楽チン

目次

1.グーグルフォームでフォーム作成
2.グーグルスプレッドシートと紐づけ
3.GASで自動返信機能を追加
4.HTMLのサイトと紐づけ
5.サンクスページを作る
6.あとがき
7.参考文献

1.グーグルフォームでフォーム作成

グーグルフォームでお問い合わせのフォームを作っていきます。→Google Forms
今回は名前、連絡先、件名、メッセージの4つの項目を入力してほしいので質問を4つ追加していきます。
全て必須項目で回答方法が記述式になっていることを確認。
image.png

連絡先のメールアドレスには後程自動返信を行うので左下の3点リーダから［回答の検証］を追加してメールアドレスが正しく入力されているかを検証できるようにしましょう。
image.png

また、設定タブの中の［設定］→［回答］から［回答を１回に制限する］がOFFになっていることを確認。（DefaultでOFFになってるはず）
image.png

これでグーグルフォームは完成。
続いてスプレッドシートと紐づけます。

2.グーグルスプレッドシートと紐づけ

完成したグーグルフォームの回答タブを開くと左上に緑色のスプレッドシートのアイコンがあります。
クリックして新しいシートを作成します。
image.png

これでスプレッドシート完成です。（めっちゃ早い）
続いてGASで自動返信機能を実装します。

3.GASで自動返信機能を追加

先ほどフォームとスプレッドシートの紐づけができたので、フォームで入力された内容がスプレッドシートの最終行にどんどん追加されていきます。
今回は追加された最終行のデータを取得して、そのメールアドレスに対して確認メールを返信していきます。
開いたスプレッドシートの上部、拡張機能タブから［AppScript］を開きます。
image.png

エディタが表示されたと思います。さっそくスクリプトを書いていきましょう。
まずは、先ほど作成したスプレッドシートとその最終行のデータをそれぞれ取得して変数に格納していきます。

function autoReply() {
  var sheet = SpreadsheetApp.getActiveSheet();  // スプレッドシートの情報を取得
  var row = sheet.getLastRow();  // シートの最終行を取得
  // 最終行のセルの値をそれぞれ取得
  var name =sheet.getRange(row, 2).getValue();  
  var mail =sheet.getRange(row, 3).getValue();
  var title =sheet.getRange(row, 4).getValue();
  var message =sheet.getRange(row, 5).getValue();
}

アクティブなスプレッドシートのデータはgetActiveSheetメソッドで、
データの最終行はgetLastRowメソッドで取得できます。

最終行のセルの値はgetRangeメソッドで行と列の位置を指定して、getValueメソッドでセルの値を取得します。

//例)お名前の情報を取得してnameに格納
var name = sheet.getRange(row, 2).getValue();

今回はシートの情報をsheetとしてるのでオブジェクト名はsheet、getRangeメソッドはrowに最終行を取得してもらっているので、最終行の2列目を取得する場合はgetRange(row, 2)となります。

それでは取得したデータをもとに確認メールを生成していきます。

function autoReply() {
...

  var mail_title = "お問い合わせいただきありがとうございます。";

  var mail_body
  = "お問い合わせいただきありがとうございます。\n"
  +"下記のとおりお問い合わせを受け付けました。\n\n"
  +"―――――――――――――――――――――――\n"
  +"◆お名前\n"
  + name + "\n\n"
  +"◆ご連絡先メールアドレス\n"
  + mail + "\n\n"
  +"◆件名\n"
  + title + "\n\n"
  +"◆お問い合わせ内容\n"
  + message + "\n\n"
  +"―――――――――――――――――――――――\n"
  +"確認後、返信させていただきます。\n";

  GmailApp.sendEmail(mail,mail_title,mail_body);
}

ここは実際に送信される確認メールの中身になるのでお好みにアレンジして下さい。
mail_titleが件名、mail_bodyがメールの本文になります。

最後にGmailAppにsendEmailメソッドを実行します。

GmailApp.sendEmail(/*送信先メールアドレス*/, /*件名*/, /*本文*/);

これでスクリプトはすべて書けました。
スクリプトを保存したら最後に作成したスクリプトを実行できるようにしましょう。

今回はフォームが送信されたら確認メールを返信したいのでフォーム送信をトリガーに設定します。
サイドバーにある時計マークを押してトリガーを追加しましょう。
左下の［トリガーを追加］を押すとポップアップが出てきます。
image.png

イベントの種類を［フォーム送信時］に変更してトリガーを保存します。
これで確認メールの自動返信機能が完成しました。
試しに初めに作成したグーグルフォームにアクセスしフォームを入力して送信してみましょう。
image.png
入力した連絡先メールアドレスに確認メールが届いていれば成功です。

4.HTMLのサイトと紐づけ

ここからが本題です。
それでは実際に作ったWebサイトに作成したグーグルフォームを紐づけていきましょう。

お問い合わせを埋め込みたいhtmlファイルに簡単なformを記述していきます。

index.html
<div class="contact-info">
  <h2>お問い合わせ</h2>
  <form action="" class="form-field">
    <label for="name">お名前</label>
    <input id="name" name="" type="text" class="form-control" placeholder="Full Name">
    <label for="email">ご連絡先</label>
    <input id="email" name="" type="email" class="form-control" placeholder="Email">
    <label for="title">件名</label>
    <input id="title" name="" type="text" class="form-control" placeholder="Title">
    <label for="message">お問い合わせ内容</label>
    <textarea id="message" name="" cols="40" rows="10" class="form-control" placeholder="Message"></textarea>
    <br>
    <button type="submit" class="btn">送信</button>
  </form>
</div>

image.png

inputタグはグーグルフォームで作ったものと同じ項目を記述します。
先ほど作成したグーグルフォームを開きます。
右上の［送信］ボタンを押すとウィンドウが出てきます。
送信方法の真ん中のチェーンマークを選択してリンクを開きます。
image.png

リンク先でデベロッパーツールを開きます。デベロッパーツール上でctrl+Fなどで検索窓を開き「action」と検索します。Elementsの中に「form action="○○○○○○○○/formResponse"」と記述されている行が見つかるはずです。
image.png

action属性内に記述されているurlをコピーして先ほど作成したhtmlのformタグaction属性に貼りつけます。

index.html
 <form action="https://〇〇〇〇〇/formResponse" class="form-field">

続いて同じ検索窓で「entry」と検索。「name="entry.XXXXXX"」と記述されているinputタグが見つかるはずです。
フォームの項目の数だけ上から順番に並んでいるので、name属性に記述されている「entry.XXXXXX」を作成したhtmlのそれぞれ対応するname属性に貼りつけます。

index.html
    <label for="name">お名前</label>
    <input id="name" name="entry.XXXXXXXXXX" type="text" class="form-control" placeholder="Full Name">
    <label for="email">ご連絡先</label>
    <input id="email" name="entry.XXXXXXXXX" type="email" class="form-control" placeholder="Email">
    <label for="title">件名</label>
    <input id="title" name="entry.XXXXXXXXX" type="text" class="form-control" placeholder="Title">
    <label for="message">お問い合わせ内容</label>
    <textarea id="message" name="entry.XXXXXXXXX" cols="40" rows="10" class="form-control" placeholder="Message"></textarea>

これでグーグルフォームを自作のフォームで利用できるようになりました。
ですが、試しにフォームを送信すると…image.png
グーグルフォームの送信完了画面に遷移してしまいました。

これはformのデータを正しくスプレッドシートに送信するために、自作のフォームのaction属性にもグーグルフォームと同じページに遷移するように設定してしまったからです。

それでは最後に、遷移先の送信完了ページも自作しましょう。

5.サンクスページを作る

それでは新しくhtmlで簡単なサンクスページを作成します。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>送信完了！</title>
</head>
<body>
    <div>
        <h1>お問い合わせ 送信完了</h1>
        <p>
        お問い合わせありがとうございました。<br>
        </p>
        <a href="index.html">
        <button type="button">TOPに戻る</button>
        </a>
    </div>
</body>
</html>

image.png

続いて、フォームが埋め込んであったhtmlに戻り下記の3行を追記します。
1.formタグaction属性の後ろ(/formResponse"の後ろ)

index.html
method="post" target="hidden_iframe" onsubmit="submitted=true;"

2.form閉じタグの下

index.html
<script type="text/javascript">var submitted = false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){window.location='（サンクスページURL）';}"></iframe>

サンクスページのURLには自分が遷移させたいページのURLを入力します。
最終的にこんな感じのコードになっていればOKです。

index.html
    <div class="contact-info">
        <h2>お問い合わせ</h2>
        <form action="https://○○○○○○○○○○○○/formResponse" method="post" target="hidden_iframe" onsubmit="submitted=true;" class="form-field">
            <label for="name">お名前</label><br>
            <input id="name" name="entry.XXXXXXXXX" type="text" class="form-control" placeholder="Full Name"><br>
            <label for="email">ご連絡先</label><br>
            <input id="email" name="entry.XXXXXXXXX" type="email" class="form-control" placeholder="Email"><br>
            <label for="title">件名</label><br>
            <input id="title" name="entry.XXXXXXXXX" type="text" class="form-control" placeholder="Title"><br>
            <label for="message">お問い合わせ内容</label><br>
            <textarea id="message" name="entry.XXXXXXXXX" cols="40" rows="10" class="form-control" placeholder="Message"></textarea>
            <br>
            <button type="submit" class="btn">送信</button>
        </form>
        <script type="text/javascript">var submitted = false;</script>
        <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){window.location='/thanks.html';}"></iframe>
    </div>

では先ほどと同じようにhtmlのお問い合わせフォームからメールを送ってみましょう。
image.png
image.png

自作のサンクスページに遷移できました！
確認メールもしっかり届いていれば完成です！
お疲れさまでした！

6.あとがき

今回初めてQiitaの記事を書いてみました。いろんな動画やブログをあさりながら独学で勉強をしていて、なにか自分からアウトプットできるものがないかと考え今回の記事を書いてみた次第です。
半分自分の勉強メモの代わりに使わせていただいていますが、また今後もどんどん発信していきたいと考えています。実務経験もなくまだまだ駆け出しの身なので、コメントでどんどん感想や指摘をいただけるとモチベにつながります。

7.参考文献

Googleフォームの埋め込み方法４つを完全解説【自作フォームとの連携方法も紹介】
→ https://www.webdeki.com/column/2993/

初心者でもできる！Googleフォームで作成したお問い合わせフォームにGASで自動返信機能を追加する
→ https://tonari-it.com/gas-form-autoreply/

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
1