Snow Monkey Forms v0.7.0 をリリースしました

Snow Monkey Forms v0.7.0 の概要

機能追加

  • カスタム DOM イベントを追加

変更

  • Error コントローラーを Invalid コントローラーにリネーム

カスタム DOM イベントを追加

例えば「フォームの送信完了時に Google Analytice でイベントトラッキングする」のようなことが実現できるように、フォームの送信時にカスタム DOM イベントを実行するようにしました。イベントの種類は以下。

smf.beforesubmit

送信ボタンがクリックされて、フォームの送信がおこなわれる直前に実行されます。

const form = document.querySelector( '.snow-monkey-form' );
form.addEventListener( 'smf.beforesubmit', ( event ) => console.log( event.detail ) );

smf.back

戻るボタンで戻ったときに実行されます。

const form = document.querySelector( '.snow-monkey-form' );
form.addEventListener( 'smf.back', ( event ) => console.log( event.detail ) );

smf.confirm

確認画面へボタンで確認画面に移動したときに実行されます。

const form = document.querySelector( '.snow-monkey-form' );
form.addEventListener( 'smf.confirm', ( event ) => console.log( event.detail ) );

smf.complete

送信ボタンを押して送信が完了したときに実行されます。

const form = document.querySelector( '.snow-monkey-form' );
form.addEventListener( 'smf.complete', ( event ) => console.log( event.detail ) );

smf.invalid

バリエーションエラーがあったときに実行されます。

const form = document.querySelector( '.snow-monkey-form' );
form.addEventListener( 'smf.invalid', ( event ) => console.log( event.detail ) );

smf.systemerror

システムエラーが発生したときに実行されます。

const form = document.querySelector( '.snow-monkey-form' );
form.addEventListener( 'smf.systemerror', ( event ) => console.log( event.detail ) );

smf.submit

他の条件に関係なくフォームが送信されたときに実行されます。

const form = document.querySelector( '.snow-monkey-form' );
form.addEventListener( 'smf.submit', ( event ) => console.log( event.detail ) );

参考

この記事を書いた人

キタジマ タカシ

長崎県長崎市在住。地元のWeb制作会社でWebデザイナー/エンジニアとして従事した後、2015年にフリーランス [ モンキーレンチ ] として独立。WordPress のテーマやプラグイン、ライブラリ、CSS フレームワーク等、多数のプロダクトをオープンソースで開発・公開しています。

Snow Monkey オンラインコミュニティ

Snow Monkey をより良いテーマにするために、今後の機能開発等について情報共有したりディスカッションをしたりする場所です。より多くのユーザーの交流があったほうがより良いプロダクトに育っていくと思いますので、ぜひご参加ください!