読者です 読者をやめる 読者になる 読者になる

formrun guide

formrun guideでは、ユーザーの皆様に役立つTipsやFAQ、ニュース、ユーザーインタビューなどの情報をまとめてお伝えします

HTMLのコーディングだけでフォームのバリデーションができるようになりました

f:id:mixtape-team:20170226010027p:plain

HTMLのマークアップだけでフォームにバリデーション機能が追加できる機能 formrun.js をリリースいたしました。

formrun.js を利用するとHTMLのマークアップだけで、一般的なフォームに必要なバリデーションやEFO(エントリーフォーム最適化)を設定することができます。

これを利用することで、最小限のコストでデザイン性やユーザビリティに優れたフォームを設置することができ、お問い合わせ数やCVRの改善に役立ちます。

f:id:mixtape-team:20160822095918j:plain

新機能のご紹介

今回のリリースにより、以下の5つの機能をご利用いただけます。

  1. インライン・バリデーション
  2. 確認画面モード
  3. 住所補完機能
  4. アラート・ダイアログ
  5. エラー・ツールチップ

※ 下記の動作デモは「Bootstrap4」を使用していますが、ご利用の際はご自由なデザインを当てることができます。


1. インライン・バリデーション

ユーザーのフォーム入力に対してリアルタイムにバリデーションを行うことができます。

現在対応しているバリデーションは以下の3種類です。

  • 必須項目
  • メールアドレス
  • 電話番号

動作デモ(デザインはBootstrap4を利用しています)

See the Pen formrun.js (Inline) by Masato TADA (@tady) on CodePen.


2. 確認画面モード

お問い合わせフォームなどで利用される「確認ページ」を簡単に利用することができます。

動作デモ(デザインはBootstrap4を利用しています)

See the Pen formrun.js (Confirm mode) by Masato TADA (@tady) on CodePen.


3. 住所補完機能

日本の郵便番号からの住所の補完機能をご利用いただけます。

郵便番号はハイフンの有無や全角入力にも対応します。

動作デモ(デザインはBootstrap4を利用しています)

See the Pen formrun.js (Postal Code JP) by Masato TADA (@tady) on CodePen.


4. アラート・ダイアログ

入力に不備がある場合に、目立つようにダイアログを表示する機能です。

動作デモ(デザインはBootstrap4を利用しています)

See the Pen formrun.js (Alert Dialog) by Masato TADA (@tady) on CodePen.


5 エラー・ツールチップ

入力に不備がある場合に、エラーになった項目にツールチップを表示する機能です。

動作デモ(デザインはBootstrap4を利用しています)

See the Pen formrun.js (Error Popup) by Masato TADA (@tady) on CodePen.


設定方法

それぞれの設定方法につきましては、下記ページをご覧ください。

guide.form.run

guide.form.run

guide.form.run

利用可能日

2016-08-19より利用可能です。

対応ブラウザ

推奨動作環境につきましては、こちらをご覧ください。

guide.form.run


「formrun」のサービスに関する皆様からのご意見・ご要望・フィードバックをお待ちしております。 これからもformrunをどうぞよろしくお願いいたします。

■facebook https://www.facebook.com/formrun/

■twitter twitter.com