【Bubble開発超基礎編！】️input formsの使用方法総まとめ！

こんにちは！

EPICs株式会社です。

Bubbleでは、ユーザーに情報を入力してもらうためのインプットの要素を提供しています。

️input formsにはいくつか種類があり、実装したい機能に応じて使い分けることができます。

 この記事では、Bubbleのinput formsの使い方や違いを詳しく解説し、それぞれの用途に合わせた適切な使い方を紹介します！

※本記事は、まだBubbleを触ったことがない、始めたばかりで開発に使う要素がわからないといった初級者向けの記事です。

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

input formsとは？

️input formsとは、ユーザーが様々な情報を入力するためのフォームのことです。

Bubbleでは、さまざまなインプット要素が用意されており、それぞれの用途に応じて適切に使い分けることが重要となります。

Bubbleのエディターの左側メニューから「Input Forms」を選択すると、各要素をページに配置できます。

インプット要素一覧と使い方

️input

1行のみのテキスト入力が可能な要素です。改行はできません。
氏名やメールアドレス、電話など入力する内容がある程度決まっていて基本的に1行で収まるテキストを入力する際に、使用します。

️inputの主な使い方や特徴は以下となります。

• 使い方
  • 氏名・メールアドレス・電話番号などの短いテキスト入力時
• 特徴：
  • 入力できるのは 1行のみ
  • 「This input should not be empty」 をチェックすることで必須入力項目にすることができる

Multiple input

複数行のテキスト入力が可能な要素のため、改行が可能です。

複数行や改行が可能なinput要素なので、運営への問い合わせや運営からのお知らせ機能など、長文のテキストを入力する際は、こちらのMultiple inputを利用します。

メールアドレスの入力欄など、短いテキストを入力する場所に利用すると、レイアウトが崩れるといったことが起きますので、長文の入力が必要なときのみ使用するようにしましょう。

• 使い方
  • 問い合わせ・コメント・投稿文などの長文入力時 
• 特徴
  • ユーザーが改行を含むテキストを入力可能
  • 通常のインプットと異なり、テキストエリアのサイズを自由に変更できる
  • 入力制限 を設定し、最大文字数を制御できる

Checkbox

チェックをつけたり外したりすることができる要素です。

Repeating Group内にCheckboxを配置することで、複数選択できる仕様を実装することも可能です。

• 使い方
  • 利用規約の同意チェック、設定のオン/オフ など
• 特徴
  • チェックをつけるかつけないかの2択選択ができる
  • デフォルトでチェックの有無を設定可能

Dropdown

Dropdownは、複数のデータから選びたいデータを一つ選択することができる要素です。

Dropdown内で表示したい選択肢の設定は、2パターンあります。

一つは、自分で選択肢を入力するStatic choice です。
もう一つは、データベースに登録したデータを選択肢として表示させるDynamic choice があります。

• 使い方
  • 都道府県の選択、性別選択、カテゴリ選択 など
• 特徴
  • 選択肢を 手入力する Static choiceもしくは データベースから取得する Dynamic choice で設定可能
  • デフォルトで選択肢のデータをあらかじめひょうじさせておくことも可能（マイページなどで登録したデータが最初から表示させてあるようなイメージです）

※下記箇所で、Static choiceもしくは Dynamic choice の設定が可能です。

Serchbox

検索するためのテキストを入力する要素です。

入力した値に一致するデータをデータベースから持ってくるようSerchbox に検索対象を指定することが可能なので、入力した値に一致するデータを検索候補として表示させるといった機能も実装できます。

• 使い方
  • ユーザー検索、商品検索、タグ検索
• 特徴
  • ユーザーが入力した値に基づいて、データベースから一致する検索候補を表示
  • リアルタイム検索 を実装可能

RadioButtons

アンケート回答などでよく使われている要素で、複数の選択肢から選ばせる機能を実装することができます。

Dropdown同様、Static choiceもしくは Dynamic choice で選択肢を設定することが可能です。

• 使い方
  • 性別選択、アンケート回答 など
• 特徴
  • 複数の選択肢から1つだけ選択
  • 一覧表示できるので、選択肢が少ない場合には適している
  • 選択肢の内容は、Static choiceもしくは Dynamic choiceで設定可能

Sliderinput

スライドさせて数字を選ばせるなどの機能を実装できる要素です。

選択できる数字の幅は調整できます。

• 使い方
  • 価格調整、レベル設定 など
• 特徴
  • 数値の範囲（Min-Max） を設定し、スライダーで調整可能
  • 刻み幅を設定できる

※下記箇所で数値の範囲が設定できます。

Date/TimePicker

日付の選択をすることができる要素です。

Date/TimePickerのデフォルト表示設定は、「DD/MM/YYYY（例：10/03/2025）」となっています。

上記の表示は日本ではあまりなじみがないため、実装時は Date Format から表示設定を「YYYY/MM/DD（例：2025/03/10）などに適宜変更して使いましょう。

• 使い方
  • 予約日時の選択、誕生日の入力、日付の指定 など
• 特徴
  • 日付のみ or 日付＋時間 の選択が可能
  • 日付表示のフォーマット（YYYY/MM/DD など）を自由にカスタマイズできる
  • 日付の範囲を制限 することが可能

PictureUploder

画像をアップロードすることができる要素です。

• 使い方
  • プロフィール画像の設定、商品画像の登録 など
• 特徴：
  • 簡単に画像をアップロードする機能が実装できる

FileUploder

動画やPDFといったファイルをアップロードすることができる要素です。

• 使い方
  • 履歴書の提出、ドキュメントの共有 など
• 特徴：
  • アップロード可能なファイルの種類を制限 できる（例：PDF のみ）
  • アップロード後にファイルURLを取得し、表示やダウンロードが可能
  • 複数ファイルのアップロードも可能

Bubbleの️input formsには、それぞれ適した使い分けがあります。

データの形式に合った要素を選択することで、ユーザーにとって利便性の高いアプリを提供できます。

ぜひ色々な機能を試しながら、Bubbleの開発のスキルを高めていきましょう！