コード型フォームのサンプルコード集
前提 バリデーション 必須項目指定 メールアドレス項目 再入力用の項目 電話番号項目 電話番号の入力最大桁数指定 数値項目 テキスト項目 文字数の上限指定 文字数の下限指定 送信ボタンのテキストを変更する 便利な機能 複数選択項目 日付選択項目 郵便番号による住所補完 郵便番号項目の設定 住所項目の設定 補足 都道府県のプルダウン設定 ファイルアップロード項目 ボタンラベル（文言） 送信中の文言を変更する エラー時に文言を変更する フォーム内に未入力項目・入力ミス項目がある場合に文言を変更する エラーテキスト 入力成功サイン 確認画面 確認画面モードを有効にする 確認画面にフォームへの入力内容を表示する 確認画面に要素を表示する 確認画面で要素を非表示にする フォーム入力途中保存 スパム対策 reCAPTCHAを設定する reCAPTCHAをチェックした時にボタンを有効化する Honeypot保護機能を設定する 動作デモ アラートダイアログ エラー・ツールチップ
前提 formrunではformrun.jsというライブラリを使用することにより、実装を簡単にすることができます。 コード型フォームを作成する場合、formrun.jsを用いて実装いただいても構いませんし、用いずにご自身でバリデーションを実装いただいても構いません。 このページでは実装のお役に立てる情報を提供していますが、記載されていない内容についてはご自身で実装を行ってください。 バリデーション 動作デモ 必須項目指定 タグに data-formrun-required 属性を指定します。 指定すると入力フィールドが必須に設定されます。 空欄のテキストフィールドや未選択のラジオボタン、チェックボックス、セレクトボックスがエラーになります。 JavaScript メールアドレス項目 タグに data-formrun-type="email" 属性を指定します。 指定すると入力欄にメールアドレスのバリデーションが設定されます。 メールアドレス以外の文字が入力された場合エラーになります。
JavaScript 文字数の下限指定 タグに data-formrun-chars-min 属性を指定します（data-formrun-type="text" も併せて指定する必要があります）。 指定するとテキストエリアに入力される文字数の下限が設定され、その文字数を下回るとエラーが表示されます。
JavaScript 送信ボタンのテキストを変更する タグに data-formrun-send-text 属性を指定します。 指定すると、フォーム送信ボタンの表記を変更できます。 確認 JavaScript 便利な機能 複数選択項目 「name=XXX」の後に[]を付け足すことで、複数選択した場合に両方のデータが送られるようになります。 「name=XXX」の後に[]を付け足していない場合は、複数選択した場合でも片方のデータしか送信されませんのでご注意ください。 好きなもの A B C JavaScript
日付選択項目 日付の入力欄を作成するために使います。具体的には「年」「月」「日」の3つの値を入力する項目が作られます。 JavaScript
郵便番号による住所補完 郵便番号による住所補完を利用するには、郵便番号入力欄と、対応する住所項目の設定が必要です。 郵便番号項目の設定 郵便番号の input 要素に、data-formrun-type="postal-code-jp" を指定します。 住所項目の設定 住所に対応する input 要素には、data-formrun-type に加えて、郵便番号項目と紐づけるための data-formrun-target 属性の指定が必要です。 data-formrun-type の指定内容 region：都道府県 locality：市区町村 street-address：町名 data-formrun-target には、対応する郵便番号 input の name 属性の値を指定します。 この設定により、指定した郵便番号に対応する住所項目のみが自動補完されます。 該当する町名が存在しない場合は空になります。
JavaScript 補足 住所項目が1組のみの場合でも、data-formrun-target の指定は必須です。 住所項目が複数あるフォームでは、郵便番号と対応関係を正しく保つため、必ず本設定を行ってください。 都道府県のプルダウン設定 Select タグに data-formrun-type="prefecture-jp" を指定することで、都道府県を列挙した option タグが自動で設定されます。 郵便番号による住所自動補完を利用する場合は、data-formrun-type="region" と data-formrun-target を併用してください。 <select name="都道府県" data-formrun-type="region prefecture-jp" data-formrun-target="郵便番号"
JavaScript
動作デモ ファイルアップロード項目 ファイルアップロード項目は以下2点を行うと設置できます。
ボタンラベル（文言） 送信中の文言を変更する ボタンタグに data-formrun-submitting-text 属性を指定します。 指定するとフォーム送信中にボタンのラベルが変更されます。 二重送信を防ぎ、ユーザビリティを向上させる効果があります。 送信 JavaScript エラー時に文言を変更する ボタンタグに data-formrun-error-text 属性を指定します。 フォーム内にエラーがある場合にボタンのラベルが変更されます。 送信ボタンを押す前にエラーに気づけるためユーザビリティが高まり、ユーザーの離脱を抑えることができます。 送信 JavaScript フォーム内に未入力項目・入力ミス項目がある場合に文言を変更する タグに data-formrun-not-input-error-text 属性、およびdata-formrun-invalid-input-error-text 属性を指定します。（使用するには両属性を併せて指定する必要があります） 指定すると、フォーム内の必須項目に未入力箇所、またはフォーム内に入力内容が正しくない（バリデーションチェックエラー）が発生している場合に、送信ボタンのラベルを変更します。 送信前に入力エラーが起きているかどうかの確認できるので、ユーザビリティを向上させる効果があります。 送信 JavaScript エラーテキスト タグに data-formrun-show-if-error= 属性を指定します。 指定すると FieldNameに指定したフィールドがエラーの時にテキストが表示されます。 以下の例では、「お名前」というフォールドを未入力にすると「お名前を正しく入力してください」という文字列が表示されます。
表示されるシークレットキーをコピーする
formrunのフォーム設定画面＞スパム対策＞Google Recaptchaの設置より、「利用する」にチェックを入れ、3.でコピーしたシークレットキーを入力する
埋め込み先ページのHTMLに下記タグを設置する headの終了タグの直前に追加
JavaScript formタグ内のreCAPTCHAを表示したい箇所にタグを追加
reCAPTCHAをチェックした時にボタンを有効化する ※非表示reCAPTCHAを選択された場合は設定できません。 ※これまでの設定をすべてきちんと終えたうえで実装してください。 チェック時 時間切れ タグに data-callback 属性を指定します。指定する値にはreCAPTCHAをチェックされた時にボタンを有効化する関数を指定します。 タグに data-expired-callback 属性を指定します。指定する値にはreCAPTCHAの有効期限が切れた時にボタンを無効化する関数を指定します。 送信ボタンにdisabled属性を指定します。 Scriptタグに送信ボタンを有効化する関数と送信ボタンを無効化する関数を用意します。
送信 ...
この記事は役に立ちましたか？