サンプルコード集

このページには、フォーム作成時に役立つサンプルコードをまとめてあります。

なお、以下ではformrun.jsを利用しています。

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

目次

設定方法

このページの機能を利用する場合には、
下記 formrun.js を <head>内 で読み込み、
 Formタグ に formrun というクラスを付与する必要があります。

 <head>

...

<script src="https://sdk.form.run/js/v2/formrun.js"></script>

</head>

<body>

...

<form class="formrun" action="https://form.run/api/v1/r/<フォーム設定ページで指定される値>" method="post">

...

</form>

...

</body>

バリデーション

電話番号バリデーション

タグに data-formrun-type="tel" 属性を指定します。

指定すると入力欄に電話番号のバリデーションを設定します。

電話番号以外の文字を入力された場合エラーになります。

 <!-- マークアップ例 -->

<input type="text" name="電話番号" data-formrun-type="tel">

メールアドレス

タグに data-formrun-type="email" 属性を指定します。

指定すると入力欄にメールアドレスのバリデーションを設定します。

メールアドレス以外の文字を入力された場合エラーになります。

 <!-- マークアップ例 -->

<input type="text" name="メールアドレス" data-formrun-type="email">

メールアドレス再入力

タグに data-formrun-type="email_confirmation" 属性を指定します。

また一致させたいメールアドレスのタグに指定したname属性の値を

data-formrun-confirmed-nameに指定します。

<input data-formrun-type="email_confirmation"  data-formrun-confirmed-name="メールアドレス">

数字バリデーション

最大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>

スパム対策

  1. 「reCAPTCHA」の設定ページにアクセス
    まず、下記のサイトにアクセスしてください。
    reCAPTCHA: Easy on Humans, Hard on Bots
  2. 「reCAPTCHA」の設定
    下図を参照しながら、①〜④の項目の記入・選択を行ってください
  3. 「reCAPTCHA」のSecret Keyのコピー
    2.の作業で作成された「reCAPTCHA」のSecret Keyをコピーしてください。
  4. Secret Keyの入力
    フォーム設定画面で、3.でコピーしたSecret Keyを入力してください。
  5. 埋め込み先ページのHTMLに下記タグを設置 

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>

動作デモ

以上の内容について、動作デモをこちらに設置しています。

コーディング時にどのように動くかの参考にしてください。

バリデーション

住所自動補完機能

確認画面

アラートダイアログ

エラー・ツールチップ

コード型に関するよくある問い合わせ

チェックボックスで複数項目送信する方法

「name=XXX」の後に[]を付け足すことで、
複数選択した場合に両方のデータが送られるようになります。

「name=XXX」の後に[]を付け足していない場合は、
複数選択した場合でも片方のデータしか送信されませんのでご注意ください。 

<!-- マークアップ例 -->
    好きなもの
    <label><input type="checkbox" name="好きなもの[]" value="A" >A</label>
<label><input type="checkbox" name="好きなもの[]" value="B" >B</label>
<label><input type="checkbox" name="好きなもの[]" value="C" >C</label>

お困りですか?

FAQ menu

formrunの基本

料金プラン&機能一覧

チーム設定・ユーザー設定

フォームの作成

フォーム設定

問い合わせ対応

セキュリティ対策

決済・トラブルシューター

その他

ISO/IEC 27001:2013 (ISMS) 登録番号: IA180169