【Bubble】お問い合わせフォームを作ろう ２、通知をE-mailに送る方法
こんにちは。NoCodeNinjaです。
今回は、前回に引き続きBubbleを使って「お問い合わせフォームを作ろう」を紹介します。
前回はこちら
https://nocodejp.hatenablog.com/entry/form
今回は、「inputの値をデータベース（以下DB）に格納する設定にし、通知をE-mailに送る」を紹介します。
前回のやり方に比べると、DBに入っていくので管理がしやすいことがポイントです。
「あの問い合わせがどこにあるかわからない」を防ぎ、一括で管理できます。
DBに値が入った時に通知する設定
DBは管理がしやすいのですが、通知がきちんと届くように設定しないと当然気づきません。
ここの設定をしていきましょう。
エレメントを設置する
まずは前回使ったエレメントがありますので、そのままコピペしましょう。
なぜわざわざ書くかというのも、Bubbleにおいてエレメントを上手にコピペすることは作業の効率化に大いに役立ちます。
UI的にサイズなど合わせる部分が多いので、使いまわしてしまったほうが統一感も出ますし（だって同じものだもん）効率がいいというわけです。
少し余談ではあるものの、結構大事なのでひとくちコメントということで（笑）
DBの設定
データベース側で、各種設定を進めます。
新しいTypeが必要になるので、ここでは「お問い合わせ」という名前のTypeを作ります。
- Dataタブから「New Type」のところで「お問い合わせ」と入力し作成。
- 「Create a new field」にてそれぞれ4件「返信用アドレス」「送信者名」「件名」「詳細」というFieldを作成。
すると、以下のような状態が完成します。
それぞれのinputに合わせたfieldを作ることができました。
Workflowの設定
続いて、WorkflowにてDBへ値を入れる設定をしましょう。
「Button（問い合わせる）のWorkflowでInputの値を入れる」という設定になります。
Buttonの「Start/Edit Workflow」を押し、「Data(Thing)」から「Create a new thing」を選択。
以下の画像のように設定します。
これまで通り、inputの値をそれぞれのData fieldに入れていくという設定ですね。
そして、この後に通知としてのE-mailを送る設定をします。
Step2
Step2を設定します。
「Data(thing)」から「Send E-mail」を選択。
以下の画像のように設定。
「To」には自分が受信したいメールアドレスを指定。
「Sender name」はあくまで通知なので無くても良いのですが、inputの値を入れておくとわかりやすくなります。
「Subject」には通知用の文言として「お問い合わせがありました。」と設定してみました。
「Body」も無くて良いのですが、入れておくと確認と記録に良いかもしれません。
そして今回「Only when」に画像のような設定をしています。
これはinputの値が無かったりDBに正常に入らなかった時のために念の押して設定しています。
inputの値が入らない時点でButtonが動作しないように設定してはいるものの、こうしておくとより確実です。
Step3
最後に、Step3で「Reset relevant input」を設定しておきましょう。
送信しても残ったままというのは何とも気持ちが悪いものです。
これで、設定は完了しました。
確認してみましょう。
テスト
それでは、各inputに値を入れて送信してみましょう。
以下のように入れてみます。
「問い合わせ」Buttonを押し、きちんと受信できているか確認します。
無事受信出来ました！
これで問い合わせのたびにこの内容で通知が入ります♪
まとめ
以上、二回に分けてお問い合わせフォームとその設定についてを紹介しました。
DBに入れて通知するやり方のほうがスッキリする部分もありますが、ボリュームによって使い分けるのも良いかもしれません。
このように設定のバリエーションは色々ありますので、実際にやってみて自分のスキルもデータベース化していきましょう。
と、DBと若干かけたところで収まりよく（笑）まとめを終わりたいと思います。
それでは、また！
