サンプルコード集
このページには、フォーム作成時に役立つサンプルコードをまとめてあります。
なお、以下ではformrun.jsを利用しています。
formrun.js を利用するとHTMLのマークアップだけで、一般的なフォームに必要なバリデーションやEFO（エントリーフォーム最適化）を設定することができます。
タグに data-formrun-type="tel" 属性を指定します。
指定すると入力欄に電話番号のバリデーションを設定します。
電話番号以外の文字を入力された場合エラーになります。
<!-- マークアップ例 -->
<input type="text" name="電話番号" data-formrun-type="tel">
最大100、最小-100の数字のみのバリエーションを指定する場合
タグにdata-formrun-type = "number" max = "100" min = " - 100"属性を指定します。
指定すると入力欄に数字のバリデーションを設定します。
指定の範囲以外の数字を入力された場合エラーになります。
<!-- マークアップ例 -->
<input type="number" data-formrun-type="number" max="100" min="-100" name="個数" >
タグに data-formrun-required 属性を指定します。
指定すると入力フィールドを必須に設定します。
空欄のテキストフィールドや未選択のラジオボタン、チェックボックス、セレクトボックスがエラーになります。
<!-- マークアップ例 -->
<input type="text" name="お名前" data-formrun-required>
タグに data-formrun-type="postal-code-jp" 属性を指定します。
郵便番号を入力すると対応するフィールドに住所が反映されます。
住所に対応するフィールドは
data-formrun-type="region locality street-address" という記述で指定します。
それぞれ、regionが都道府県に、localityが市区町村に、street-addressが町名に対応します。
該当する町名が存在しない場合は空になります。
data-formrun-typeの値を別々に記入することで、
住所の複数フィールドにも対応できます。
<!-- マークアップ例1 (住所を1つにまとめる場合) -->
<input type="text" name="郵便番号" data-formrun-type="postal-code-jp">
<input type="text" name="住所" data-formrun-type="region locality street-address">
<!-- マークアップ例2 (住所を複数フィールドに分割する場合) -->
<input type="text" name="郵便番号" data-formrun-type="postal-code-jp">
<input type="text" name="住所" data-formrun-type="region">
<input type="text" name="住所" data-formrun-type="locality street-address" >
Selectタグに
data-formrun-type="prefecture-jp" を指定します。
この機能を利用すると、
都道府県を列挙した <option>タグ が自動で設定されるので、
<option>タグを記述する必要がなくなります。
この設定と data-formrun-type="region" を併用することで、
郵便番号による自動補完機能も利用できます。
<!-- マークアップ例 -->
<input type="text" name="郵便番号" data-formrun-type="postal-code-jp">
<select name="都道府県" data-formrun-type="region prefecture-jp"></select>
<!-- マークアップ例 -->
<form class="formrun" action="https://form.run/api/v1/r/xxxxxxxxxxxxx" method="post" enctype="multipart/form-data">
<div>
<label>お名前</label>
<input name="お名前" type="text">
</div>
<div>
<label>ファイル</label>
<input name="添付ファイル" type="file">
</div>
<button type="submit" data-formrun-error-text="未入力の項目があります" data-formrun-submitting-text="送信中...">送信</button>
</form>
ボタンタグに data-formrun-submitting-text 属性を指定します。
指定するとフォーム送信後にボタンのラベルを変更します。
二重送信を防ぎ、ユーザビリティを向上させる効果があります。
<!-- マークアップ例 -->
<button type="submit" class="btn btn-primary" data-formrun-submitting-text="送信中...">送信</button>
ボタンタグに data-formrun-error-text 属性を指定します。
フォーム内にエラーがある場合にボタンのラベルを変更します。
送信してからエラーに気づくよりもユーザービリティが高まり、
ユーザーの離脱を抑えることができます。
<!-- マークアップ例 -->
<button type="submit" class="btn btn-primary" data-formrun-error-text="未入力の項目があります">送信</button>
タグに data-formrun-show-if-error=<FieldName> 属性を指定します。
指定すると FieldNameに指定したフィールドがエラーの時に表示されます。
以下の例では、
「お名前」というフォールドを未入力にすると
「お名前を正しく入力してください」という文字列が表示されます。
<!-- マークアップ例 -->
<input type="text" name="お名前" data-formrun-required>
<div data-formrun-show-if-error="お名前">お名前を正しく入力してください</div>
タグに data-formrun-show-if-success=<FieldName> 属性を指定します。
指定すると FieldNameに指定したフィールドにエラーが無い時に表示されます。
以下の例では、
「お名前」というフォールドに文字列を入力すると「ok.png」という画像が表示されます。
<!-- マークアップ例 -->
<input type="text" name="お名前" data-formrun-required>
<img src="ok.png" data-formrun-class-if-success="お名前" />
タグに data-formrun-class-if-error=<ClassName> 属性を指定します。
指定すると対象のフィールドが
エラーの時に指定したクラスClassNameが付与されます。
対象のフィールドが別の要素の場合は
data-formrun-target=<FieldName> にて指定します。
<!-- マークアップ例1 (対象のフィールドが自分自身の場合) -->
<input type="text" name="お名前" data-formrun-required data-formrun-class-if-error="has-danger">
<!-- マークアップ例2 (他のフィールドがエラーの時にクラスを付与する場合) -->
<label data-formrun-class-if-error="has-danger" data-formrun-target="お名前">
<input type="text" name="お名前" data-formrun-required>
</label>
タグに data-formrun-class-if-success=<ClassName> 属性を指定します。
指定すると
フィールドがエラーでない時に指定したクラスClassNameが付与されます。
対象のフィールドが別の要素の場合は
data-formrun-target=<FieldName> にて指定します。
<!-- マークアップ例1 (対象のフィールドが自分自身の場合) -->
<input type="text" name="お名前" data-formrun-required data-formrun-class-if-success="has-success">
<!-- マークアップ例2 (他のフィールドがエラーの時にクラスを付与する場合) -->
<label data-formrun-class-if-success="has-success" data-formrun-target="お名前">
<input type="text" name="お名前" data-formrun-required>
</label>
Formタグに data-formrun-confirm="true" 属性を指定します。
指定するとフォームに確認画面を設定することができます。
通常フォーム送信時には確認画面を経ずに直接データが送信されますが、
確認画面を設定すると送信前にユーザーが入力した項目を確認することができます。
確認画面を利用する場合、
通常の送信ボタンの他に data-formrun-back-button を設定した
「戻る」ボタンの設置が必須です。
<!-- マークアップ例 -->
<form class="formrun" action="#" method="post" data-formrun-confirm="true">
...
<a href="javascript:void(0)" class="btn btn-default" data-formrun-back-button>戻る</a>
<button type="submit" class="btn btn-primary">確認</button>
</form>
タグに data-formrun-show-if-confirm 属性を指定します。
指定すると、確認画面モードの時のみ要素を表示します。
<!-- マークアップ例 -->
<form class="formrun" action="#" method="post" data-formrun-confirm="true">
<div data-formrun-show-if-confirm>
データをよく確認してから送信してください。
</div>
...
</form>
タグに data-formrun-hide-if-confirm 属性を指定します。
指定すると、確認画面モードの時のみ要素を非表示します。
<!-- マークアップ例 -->
<form class="formrun" action="#" method="post" data-formrun-confirm="true">
<div data-formrun-hide-if-confirm>
データを入力して確認ボタンを押してください。
</div>
...
</form>
指定すると、確認画面モードの時に対象のフィールドの値を表示します。
data-formrun-show-if-confirm と併用することで、
確認画面モードの時の表示をレイアウトすることができます。
<!-- マークアップ例 -->
<input type="text" name="お名前">
<div class="col-xs-9" data-formrun-show-if-confirm>
<span data-formrun-confirm-value="お名前"></span>
</div>
Formタグに data-formrun-saving="true" 属性を指定します。
指定するとフォームに入力された情報を一時的に保存し、誤ってブラウザを閉じてしまっても
再度フォームを開くと入力された情報が入力されています。
保存された情報はフォーム送信を行うと削除されます。
<!-- マークアップ例 -->
<form class="formrun" action="#" method="post" data-formrun-saving="true">
...
</form>
HTMLのヘッダーの終了タグの直前に追加
<script src='https://www.google.com/recaptcha/api.js'></script>
formタグ内にRecaptchaを表示したい箇所にタグを追加
<div class="g-recaptcha" data-sitekey="your google recapcha site key"></div>
以上の内容について、動作デモをこちらに設置しています。
コーディング時にどのように動くかの参考にしてください。
© Basic Inc. All Rights Reserved.