自社運営サイト 会員登録フォーム改修
既存の会員登録フォームの入力項目が多いため、離脱率を減らすためスッテプ形式にしたいとの依頼。
当方コーダー止まりなので、ちょっと厳しいかなと思っていましたが、藁をも掴む思いで「ChatGPT」に質問してみました。
ステップごとにページを分けるのかと思ってたら、分けたい項目ごとにブロックに分けて、「Next」ボタンを押すごとに非表示項目を解除していく感じでいけるとのこと！
ステップフォームってこうやって作る方法があるんですね。勉強になりました！
See the Pen Step Form by syagiri (@syagiri) on CodePen.
ベースは上記でOKですが、これに下記の機能を追加してフォームを完成させました。
- 個人情報保護方針の同意チェックボックス
- 必須項目の入力ができていないと次のステップに進ませない
- 郵便番号の入力で住所の都道府県名・市名の自動入力
- ステップバーの追加
等の機能を追加して、無事に完成させることができました。