Supasaito Academy

mirror input values

Webflowで入力内容をリアルタイムに表示・同期する方法

利用シーン

  1. ユーザー名を自動的に挨拶文に反映する
  2. メッセージやカードなどの動的コンテンツをライブプレビューする
  3. 長いフォーム内のフィールドを同期して入力ミスを減らす

例1：動的なパーソナライズ挨拶

こんにちは
!
Supasaito Academyへようこそ！
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

例2：リアルタイムメッセージプレビュー

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

例3：フィールドの重複入力を防ぐ（配送先と請求先）

配送先住所

請求先住所

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

ベストプラクティス（活用のコツ）

  1. ユーザー体験を向上させる場面でのみ使用する
  2. 同期されるフィールドには明確なラベルを付ける