WixStudioでVeloを使う Step 38 「新フォーム」
はじめに
最近、WixStudioのフォーム周りの話題が騒がしい。2025年8月1日から旧フォームが使えなくなったらしい。いや、正確には「旧フォームは“追加できなくなる”が“既存は動く"」っぽい。正直新しいものにしか興味が無く古いものは積極的には触らないので、なんとも思ってなかった。しかし、考えてみると僕もたいして新フォームに触れていない。すこし触ってみて分かったことをメモする。
準備
新しくサイトを作成しておく。
新フォームを用意する
まずは新フォームを配置する。
パーツ追加から「お問い合わせ・フォーム」、「新規フォームを作成」で追加出来る。
新規フォームを作成
適当に入力欄を追加しておく。今回は「連絡先」から「姓」「名」「メールアドレス」を追加。
入力欄を追加
メモ:レイアウトの調整
うろ覚えだったけど改めて確認。新フォームのレイアウトも調整が簡単でいい。
レイアウト調整
入力欄はマウスでサイズを調整出来るし、横並びもドラッグアンドドロップで楽勝。シンプルでいい。
レイアウト調整が完了したら「保存する」ボタンを押して閉じる。
フォームがページに追加される
Veloで何が出来る?
APIを確認してみると基本的なものは以下。
- フォームの送信(
submit()) - 入力欄の値設定(
setFieldValues()) - フォームの送信イベント(
onSubmit()) - 送信成功イベント(
onSubmitSuccess()) - 送信失敗イベント(
onSubmitFailure()) - 入力欄の値変更イベント(
onFieldValueChange())
上記以外にも関数はあるけど割愛。詳しくはAPIを参照。
WixFormV2(VeloAPI)
新フォームが便利
ただ、新フォーム(WixFormV2)を触ってると気付いた事がある。操作できる関数は以前に比べて増えていると思うが、新フォーム自体が結構多機能で高機能な気がする。
条件機能
ユーザからの入力に応じてフォームの構造を変更する機能 「条件」 。
条件機能
簡単な例を示すと 「メールアドレスが入力されない限り、送信ボタンを表示しない」 といった処理が画面上で設定できてしまう。
メールアドレスが入力されない限り、送信ボタンを表示しない
ページ機能
フォーム入力を複数ページに分ける機能 「ページ」 。
ページ機能
今回は氏名とメールアドレスの入力欄を一度に表示しているが、これらを 段階的にページを分けて提示する ことができる。
氏名とメールアドレスの入力欄を段階的に表示する
標準的な機能でこれらがはVelo不要で実現できてしまうは正直驚く。Veloを使えば、更に便利に拡張する事も出来るのだろうけど十分な気がする。
で、もう一つ感じた点。機能によっては Veloでは実現出来ないが、画面からの設定でなら実現出来る機能 もありそう。そういう意味では、新フォームの機能のことはよく知っておく必要がありそうな気がした。
入力チェック(高度なフォーム検証)
実は今回の記事で一番扱いたかったポイント。応用的なことは改めて記事にする。新フォームに限定したことではないけど、Veloは非常に便利ではありながらアプリの中身まで操作することは大抵出来ない。それは、新フォームも同じ。なので、アプリで提供されている機能を使って適切に設定を施す必要がある。
今回扱うのは 「入力チェック(高度なフォーム検証)」 。要は、入力欄の値が正しいかチェック。誤りがあれば適切な案内を提示する機能。
試しにフォームに新しい入力欄を追加する。今回は 数値 。
数値欄を追加
例えばこの数値入力欄を何らかのスコア入力用として使うことを目的とする。
更にこのスコアは必須項目で、-10から10の範囲とする。
スコアで必須
項目名や必須項目の設定は右サイドのメニューから行える。続いて値の範囲を設定するには詳細設定へ進むのだが問題が発生する。
詳細設定で数値の範囲が設定できる・・・が
なぜか負の値が指定できない。直入力すれば-1ならかろうじて入力出来た。いずれにしてもやや貧弱。なので、標準で用意されている入力チェックでは十分な検査が行えない可能性もある。
今回は標準の入力チェックではなく高度なフォーム検証を利用する。高度なフォーム検証では項目キーが必要になることがあるので、わかりやすい項目キーを設定しておく。例ではform_scoreとした。
項目キーを設定
高度なフォーム検証
高度なフォーム検証は上部の「設定」へ進みスクロールすると現れる。
高度なフォーム検証
「検証を作成」ボタンをおす。
この時、フォームの保存に関して警告が表示されるかもしれない。検証を作成するには事前にフォームを保存しておく必要がある。
検証を作成するには事前にフォームを保存しておく必要がある
検証の作成に進むと次のような画面が表示され、フォームの検証の流れを作ることができる。
フォームの検証の流れを作ることができる
この画面のルールとして以下の通りポイントをおさえておく。
- 流れは上から下に流れる。
- フォームから送信されると、一番上から処理が始まる。
- 「検証エラーを適用」に到達すると、指定した入力欄に任意の案内を通知することができる。
スコアは、-10~10
まず、スコアの範囲は -10から10 とする。この設定を施す。
「検証エラーを適用」するのは、上記の条件が満たされなかった場合と言うことになる。
ステップとして条件を追加する
+マークを押すとステップが追加出来る
条件を選択する
条件はスコアの値が -10以上 。かつ、 10以下 でなければならない。
逆に不正値となる条件は「スコアの値が10より大きいか、-10より小さい」となる。
追加された条件ブロックを選択すると条件に必要なパラメータ設定が行える。まずはプロパティを選択する。今回の検証対象となる値を選択する。要はスコア(form_score)。
この指定もマウスで選択出来る。
条件を選択する
次にロジックを選択。プロパティに対してどのような検証を行うかを指定。今回は「が次より大きい」を選択する。
ロジックを選択で「が次より大きい」を選択する
最後に数値を10とし「スコアが10より大きいか」という条件が完成する。
「スコアが10より大きいか」という条件が完成する
本来であれ正しい値の条件を指定した方がわかりやすいかもしれないが、今回は不正値となる条件を作成しているので注意。
不正値となる条件はもう一つあるので続ける。または を選択する。
「または」を選択
もう一つの条件は「スコアが-10より小さい」。設定の流れは同じなので割愛。
不正値の条件「スコアが10より大きい」もしくは「スコアが-10より小さい」が完成
最後に適用ボタンを押しておく。
検証エラーを適用
検証エラーを適用では「どの入力欄に対して、どのような案内を通知するか」が設定できる。
「検証エラーを適用
今回はスコア欄に 「スコアの値が範囲外です。スコアは-10から10の値を入力してください。」 と表示する。
「検証エラーを適用」を選択し、必要なパラメータを設定する。ここで、項目キーが必要になるので注意。今回はform_scoreとしているので、これをフォーム項目キーに指定。
エラーメッセージには上記のメッセージを設定する。
検証エラーを適用の設定が完了
最後に適用ボタンを押しておく。
これですべての設定が完了。
すべての設定が完了
右上の有効化ボタンを押し、左上の閉じるで完了する。
右上の有効化ボタンを押し、左上の閉じるで完了する
関数の有効化が始まる
動作確認
動作確認はプレビューでは出来ないので注意。
サイトを公開して検証する。
公開されたフォーム
不正値-11を入力する。
不正値を入力する
送信ボタンを押すと、スコアの値が不正であることが通知される。
スコアの値が不正であることが通知される
そのほか不正値11、正常値-10、正常値10を試したがいずれも想定通りの動作が確認出来た。
まとめ
今回は新フォームに改めて触れてみて感じたところを簡単に紹介した。高度なフォーム検証はプログラム(Velo)を書かなくても、色々と拡張が出来そうな気がした。もちろんプログラムを書けばより高度な拡張ができるとは思う。ただ、途中でも述べたようにアプリ内の処理はVeloでも十分に制御することは難しいため、どのような機能がどのような方法で提供されているのかを十分に知っておく必要がある。その上で、Veloによってどのような点で拡張が可能になるのか検討していく必要がある。
次回以降に、新フォームをVeloで拡張していくことも試していきたい。
つづき
Discussion