【ノーコードアプリ】Softr使ってみた!(受付システム作ってみた)

ノーコード(nocodo)のSoftrとAirtableを使用して「受付システム」を作成しようと思います。

前回はAirtableを使用して実際に商品などを並べてみましたが、
今回は、ノーコード(nocodo)のSoftrとAirtable。通知先としてSlackを使用し「受付システム」を作成しようと思います。
機能としては、受付システムにて入力された際にSlackへ通知される仕組みです。
弊社はPマークを取得しておりますので、来客情報もAirtableにて保存する仕組みとなっています。

今回使用したツール
・Gmail(各種サービス登録に使用)
・Softr
・Airtable(Slack通知機能を使用)
 ※通知先(Slackまたはメール。今回はSlackへ)
・画像(使用画像を事前準備しましょう。)
 今回は「ヒューマン ピクトグラム2.0」さんを拝借しました。ありがとうございますorz)
・使っていないタブレット(ブラウザを使用します。)

今回、Airtableを有料化していません。通知先を「メール」に設定運用される方は、
「Airtable登録時のメアドにのみ通知発信できます」ので作業前に確認してください。

また、slackを有料化をされていない方は、こちらも参照し通知方法を検討ください。

Softr上にて、Top画面を作りましょう。
構成は、Topページのボタンを押した先にFormを設置する形になります。
・面接の方はこちら(interviews)
・総合受付(receptionist)
・アポなし対応(non-apointment)
・配達業者さま対応(Delivery)








■Airtableにてシートを作成する。
「VisitorList」というシートを作成しました。
「Visitors」「Interviews」「Delivery」のタブを作成。
各々中身は以下のような項目です。
カッコ内の文言は説明のため記載。実際には記入していません。

Visitors:
Name(氏名)・Company Name(企業名)・Number of people(何人で来たか)・date(日付)

Interviews:
Name(氏名)・date(日付)

Delivery:
Name(氏名)・date(日付)
※「date」の項目は、ダブルクリックして、「Created time」を選択。
「Date format」「Time format」は写真のようにしていますがお好みで。
■詳細ページ:「/interviews」を作成
※このページでは、「氏名」のみ取得します。

DYNAMICの項目でForm「Sales form」を選択。
余分なフィールド項目を削除し、「Name」の項目だけを残す。
Field Settings
Type:Single Line Text
Placeholder:お名前を記入ください。
Tag:Name
※右端にある「三点リーダー」を押し、「Required」をONにし必須とする。

「Button」の挙動は、Airtableに飛ばし登録します。
Text:ボタン名を設定(「送信」としました。)
Action:Send to Airtable
Base:自身が作成したシート名(今回は、VisitorList)
Table:自身が作成したシートタブ名(今回は、interviews)

「Show Messeage /Open page」では「Open page」を選択。
Page:「Home(/)」を選択。
これで入力後にトップページに戻ります。

間違ってこのページに来た人用に「戻るボタン」も設置。
STATICの項目でCTA「Call to action with a button on …」を選択。
「Buttons」にて以下を入力&選択。
Text:トップに戻る
Action:Open Page > Home


■詳細ページ:「/receptionist」を作成
※このページでは、「会社名・お名前・来社人数」の3点を取得します。

DYNAMICの項目でForm「Sales form」を選択。
フィールド項目は3つ。「会社名」「お名前」「人数」の項目を作成。
Field Settings
Type:Single Line Text
Placeholder:会社名
Tag:Campany Name
※右端にある「三点リーダー」を押し、「Required」をONにし必須とする。

Type:Single Line Text
Placeholder:お名前
Tag:Name
※右端にある「三点リーダー」を押し、「Required」をONにし必須とする。

Type:Dropdown
Options:1;2;3;4;5;6;7;8;9;10(※セミコロンで区切ります。)
Placeholder:人数選択ください
Tag:Number of people
※右端にある「三点リーダー」を押し、「Required」をONにし必須とする。


「Button」の挙動は、Airtableに飛ばし登録します。
Text:送信
Action:Send to Airtable
Base:自身が作成したシート名(今回は、VisitorList)
Table:自身が作成したシートタブ名(今回は、Visitors)

「Show Messeage /Open page」では「Open page」を選択。
Page:「Home(/)」を選択。
これで入力後にトップページに戻ります。

間違ってこのページに来た人用に「戻るボタン」も設置。
STATICの項目でCTA「Call to action with a button on …」を選択。
「Buttons」にて以下を入力&選択。
Text:トップに戻る
Action:Open Page > Home
■詳細ページ:「/non-apointment」を作成
※このページでは、情報取得はしません。

STATICの項目でHero「Hero with call to action」を選択。
Title:アポイントメントのない方へ
Subtitle:文章を記入。
image/Video:弊社問い合わせフォームのQRコード画像を貼りました。
※QRコードサービスは多々あるのでお調べください。(QRのススメさん など)

間違ってこのページに来た人用に「戻るボタン」も設置。
STATICの項目でCTA「Call to action with a button on …」を選択。
「Buttons」にて以下を入力&選択。
Text:トップへ戻る
Action:Open Page > Home

■詳細ページ:「/Delivery」を作成
本来では、ボタンを押すだけで「配達の方が来た通知」を飛ばしたいのですが
そのようなブロックがないのでフォームで「Dropdown」を使用します。
※このページでは、「お届け or 引き取り」の情報を形骸的に取得。

DYNAMICの項目でForm「Sales form」を選択。
Title:配達業者さま
Subtitle:本文

「Form」のField Settingsは以下になります。
Type:Dropdown
Options:お届け;引き取り(※セミコロンで区切ります。)
Placeholder:選択ください
Tag:Name

「Button」の挙動は、Airtableに飛ばし登録します。
Action:Send to Airtable
Base:自身が作成したシート名(今回は、VisitorList)
Table:自身が作成したシートタブ名(今回は、Delivery)

「Show Messeage /Open page」では「Open page」を選択。
Page:「Home(/)」を選択。
これで入力後にトップページに戻ります。

間違ってこのページに来た人用に「戻るボタン」も設置。
STATICの項目でCTA「Call to action with a button on …」を選択。
「Buttons」にて以下を入力&選択。
Text:トップに戻る
Action:Open Page > Home

各ページ右上「Preview」を押してから入力テストをしましょう。
Airtableへの反映が正しくできたのを確認できましたか?

次は、Airtableに新しく情報が追加された際にSlackへ通知する方法です。

Airtable画面の右上「AUTOMATIONS」を押します。
右から出てきたメニュー内の「New automation」を押します。
「Automation 1」(左上)を自分のわかりやすい名前に変更。
※自分は各項目名にしました。(面接用・配達業者・騒動受付 など)

TRIGGERの項目「+ Add trigger(青文字)」をクリック。

「When a record is created」を選択。(レコードが作成された時に)
右メニュー「CONFIGURATION」の項目でTableを選択してください。
※どのテーブルでレコードが作成された時?




Run actionの項目「+ Add action(青文字)」をクリック。
右メニュー「Slack account」と「Channel/Use」を選択。
Messeageの項目にSlackへ通知する際の文面を記載。
“@here
配達業者さまがいらっしゃいましたのでお出迎えください。”
など
文面を記載の際に注意点
AirtableからSlack通知の際に「@here」を入れたい。
「@here」の表記だけだと、「@here」は消えるので、
「@here」の前に「改行」を入れたら表示されました。
「Bot name」や「Bot icon」を変更の際はこちらにて指定してください。
※デフォルトでは、名前はAitable、アイコンはAirtableの物になります。

以上で受付システムの完成です。
自分で作ってしまえば、数万円は浮くかもしれませんね!
ぜひ、お試しください!

今後も何かしら形にできましたら、公開していきたいと思います。

プレスマンでは、ノーコード(nocode)・ローコード思考によるDXを進めています。
ECサイト・POC・社内DX・リスキルに至るまで、お問い合わせください。
必ず良い答えをご用意できます!
ご相談は以下よりお願い致します。

pm-manabu

pm-manabu

自分の興味があるノーコード・ローコードの情報を発信していけたらと思います。