【Bubble】お問い合わせフォームを作る方法

2024年1月24日

ノーコードツール「Bubble」でお問い合わせフォームを作成する方法をご紹介。

実装方法はざっくり言うと、お問い合わせ用のData Typeを作成し、送信するボタンをクリック時にWorkflowでSend emailを設定するてな感じです。

動画解説バージョンはこちら！

また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。

従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。

開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
リリース後の改修スピードも早い → PDCAを早く回せる

日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。

ノーコード開発サービスについて詳しく知る

EPICs株式会社の特徴

日本最大級のノーコード開発実績 → 高度な開発もスピーディー
複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
マーケティングまで支援が可能

ざっくりの課題でも
プロが無料で提案

実装手順

以下の手順で実装します。

お問い合わせフォーム用のData Typeを作成する
お問い合わせページを作成する
送信するボタンにWorkflowのSend emailを設定する

お問い合わせフォーム用のData Typeを作成する

お問い合わせフォーム用のData Typeを作成します。今回のお問い合わせフォームは超シンプルな項目で、氏名・件名・メールアドレス・お問い合わせ詳細の４項目のみです。

スクロールできます

設定項目	設定内容
Type name	Inquiry（問い合わせ）
▼Create a new fieldで以下作成する▼	▼Field type▼
name	text
title	text
email	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