ノーコードツール「Bubble」でお問い合わせフォームを作成する方法をご紹介。
実装方法はざっくり言うと、お問い合わせ用のData Typeを作成し、送信するボタンをクリック時にWorkflowでSend emailを設定するてな感じです。
動画解説バージョンはこちら！
目次
実装手順
以下の手順で実装します。
- お問い合わせフォーム用のData Typeを作成する
- お問い合わせページを作成する
- 送信するボタンにWorkflowのSend emailを設定する
お問い合わせフォーム用のData Typeを作成する
お問い合わせフォーム用のData Typeを作成します。今回のお問い合わせフォームは超シンプルな項目で、氏名・件名・メールアドレス・お問い合わせ詳細の４項目のみです。
スクロールできます
| 設定項目 | 設定内容 |
|---|---|
| Type name | Inquiry（問い合わせ） |
| ▼Create a new fieldで以下作成する▼ | ▼Field type▼ |
| name | text |
| title | text |
| text | |
| inquiry detail | text |
お問い合わせページを作成する
見た目は上の画像の感じ。構造は以下の感じです。
送信するボタンにWorkflowのSend emailを設定する
WorkflowにSend emailを設定します。
以下のように諸々設定します。
スクロールできます
| 設定項目 | 設定内容 |
|---|---|
| To | 管理者メールアドレスなどを指定する |
| Sender name | Current User’s name |
| Subject | Current User’s name様からお問い合わせが来ています。 |
Bodyのテンプレ。
お問い合わせがありました。
お客様のお問い合わせ内容は以下に記載です。
【お名前】Input 氏名's value
【件名】Input 件名's value
【メールアドレス】Input メールアドレス's value
【お問い合わせ詳細】MultilineInput お問い合わせ詳細's value
