NoCode Ninja@Bubbleを中心にプロトタイプの制作過程をアウトプット

プログラミング不要の「NoCode」について発信します。作ってみたいサービスや企画などありましたらDMくださいー。

【Bubble】お問い合わせフォームを作ろう 1、inputの値をE-mailとして受信する

f:id:nocodejp:20200216143350p:plain

 

こんにちは。NoCode Ninjaです。

今回は、Bubbleを使って「お問い合わせフォームを作ろう」を紹介します。

Webサイトには欠かせない「お問い合わせフォーム」。

もちろん、Bubbleを使ってできちゃいます。

送信側はinputフォームに入力して送信することで既にお馴染みなことだと思います。

では、受信側はどのような設定にしているのでしょうか。

気になりますね。

それでは、いってみましょう。

 

どのような形で受信し、閲覧するか

 

上記の通り、サイト利用者にinputフォームにて入力してもらいます。

お問い合わせフォーム自体は、inputエレメントを作り値を入力してもらい、こちらに送信してもらう設定です。

ただその方法はどうすれば良いでしょうか。

筆者は、二つの方法を考えてみました。

 

E-mailとして受信する

そのまま、入力された値をE-mailとして受信する設定です。

E-mailを確認するだけで、一通り確認できるような形で設定します。

 

inputの値をデータベースに格納する設定にし、通知をE-mailに送る

単純にデータベースに入れる設定にすれば、入っている値を確認するだけでOKです。

ただしいつ入ったか気づくのは随時確認しないとわからないので、通知を設定します。

 

今回は、前者のE-mailとして受信するを紹介します。

 

設定方法

 

各エレメントを設置

それでは、エレメントを配置していきましょう。

複数のinputと、問い合わせ送信ボタンを設置していきます。

今回はinputを複数用意しますので、先にGroupエレメントを作って格納していくようにしましょう。

Responsive面でも有利になります。

 

まずはGroupを設置。大きめに取ります。

 

f:id:nocodejp:20200216114829p:plain

 

ここに、inputとbuttonを設置します。

今回は、「返信用アドレス」「送信者名」「件名」「詳細」の4つを設定します。

inputを3つ設定し、「詳細」は複数行になるので「Mulltiple input」にて設置します。

「text」も置きつつエレメントごとにGroup化し、設置しましょう。

以下の画像のようにします。

 

f:id:nocodejp:20200216133927p:plain

 

各Textとinputをgroup化するには2つを選択してから「Group elements in a group」とすると便利です。

これで、側の部分は完成です。

 

Workflowを設定する

Buttonから「Start/Edit Workflow」をクリックし、Workflowへ。

「E-mail」から「Send E-mail」を選択します。

「To」は受信したいアドレスを入力。データベースに入っている場合は「Dynamic Data」より入力。

以下、各欄をクリックし「Dynamic Data」へ進み、値を下記のように入力。

「Specify a different reply-to address」にもチェックマークを入れます。

すると返信用アドレスを記入する「Reply to」が出てきますので、こちらも入力。

inputは上から順番にA,B,Cで設定しています。

f:id:nocodejp:20200216134800p:plain

 

WorkflowとDynamic Dataについては、過去の記事をご覧ください。

 

https://nocodejp.hatenablog.com/entry/database1

 

また以前のように、問い合わせボタンを押したら「Reset relevant inputs」でinputの値を消す設定もしておきましょう。

これで設定は完了しました。

 

送ってみる

 

それでは、実際に送ってみましょう。

 

f:id:nocodejp:20200216140754p:plain



これで送信してみます。

 

f:id:nocodejp:20200216140941p:plain

Gmailで受信出来ました!

この設定にしておけば、送られてきた問い合わせは任意のメールアドレスに入ってきます。

実際に作ったページがありますので載せておきます。

https://girls-tunnel.bubbleapps.io/version-test/test2

 

補足:上のリンクについて、ブログの設定通りでは実際に動かしても当サイトに届くだけでライブ感が無いので、内容を以下に変更しました。

f:id:nocodejp:20200217195422p:plain

 

「To」にinput Aの値を指定しましたので、メールアドレスを入れてもらえるとそちらに届くようになっています。

こちらのDBも通りませんので直接届くようになっています♪

是非、ライブ感を楽しんでいただけたらと思います。

 

まとめ

多くのWebサイトにある問い合わせフォームが簡単に設定できましたね。

Webサイトを作る場合は必須だと思うので、是非やってみてください。

次回は「inputの値をデータベースに格納する設定にし、通知をE-mailに送る」を紹介します。

 

それでは、また!