こんにちは！ノーコーダーのIKDです。
今回は、前回(インプットのリンクつける！)お話ししたインプットの発展版であるマルチインプットを使って、簡単なお問い合わせフォームを作ってみようと思います。
bubbleって何？という方やノーコードってなんだという方はまずはこちらの記事を参考にしてみてください！
と、その前にアカウントをまだ持ってないという方はこちらからアカウントを作成しましょう。
マルチインプットの編集方法
今回からは、配置方法はできると仮定して、省略させていただきます。
それでは、さっそくマルチインプットの編集方法をみていきましょう！
- フォームの中の文字を変更できます。
- 自動的に、内容を変更できるようになります。(データベースが定義されているグループ内にmultiinputがないと機能しない)
- 初めから入っているテキストを設定できます。
- コンテンツの種類を選択できます。(数値・パスワード・メアドなど)
- コンテンツの幅などを自動で調整してくれるようになります。
- 空のデータを無効化できます。
- input自体を機能させないようにできます。
⑤以外は、前回扱ったinputと同じ内容になっています。
お問い合わせフォームを作ってみる
それでは、いよいよマルチインプットを使って、簡単なお問い合わせフォームの見かけを作っていきましょう！
今回作成するのは、マルチラインインプットの機能確認が目的なので、データベースを使わないなんちゃってフォームになります笑
見た目をカスタムする
まずは、グループで下地を作ります。
このときに、StyleはGroup-tipを選ぶといい感じの見た目になります。
次は、multiline inputをGroupの中に配置しましょう。
Placeholderには、わかりやすいように「ここに入力してください」と書いておきます。他の設定は、特にいじっていないので好みで大きさや色などを調整してみてください！
ここまでできたら、テキストとボタンを配置します。
今までの記事を読んでいる方にとっては、これくらい大丈夫ですよね！
やる方がよくわからない、という方は、当ブログのテキストやボタン、グループの使い方の記事などを参考にしてください。
最後に、送信ボタンを押したときに問い合わせフォームの下にテキストが表示されるように、テキストを配置します。
テキスト内容は、前回やったように、ダイナミックデータを設定しておきます。
このとき、This element is visible on page load のチェックを外しておいてください。
これを外しておかないと、フォーム送信の雰囲気を楽しめなくなってしまいます笑
ここまでで、とりあえず見た目は完成です。最後に、ボタンをクリックしたときのワークフロウ(動作)を設定して完成になります！
ワークフロウで動きをつける
まずは、ボタンをクリックして、StartEdit workflow をクリックします。
そうすると、以下の画面に飛ぶので、Click here add an action をクリックします。
すると、画像のように追加のアクションが出てくるので、Elements Actions → Show をクリックします。これで、ボタンをクリックしたときに「何か」を表示するアクションができました。
次は、その「何か」を「TextB」に設定してあげるために、黒ウィンドウの中のElementからTextBを設定してあげましょう。
これで、完成です！右上のpreviewをクリックして、動作を確認してみましょう！
うまく行っていれば、始めに入力した文字が送信をクリックすると下に表示されるようになります。
2回目以降は、入力と同時に反映されるようになってしまうので注意してください。
まとめ
今回は、マルチラインインプットを使って、簡単なフォームを作成してみました。
まだ、初めの段階なのでおもちゃみたいな機能でしかありませんが、動作するものを作るのは楽しくないですか？
データベースを扱った後からは、もっとちゃんとしたものを作っていく予定なので、楽しみにしていてください！
今回は以上です。また次回お会いしましょう〜
コメント