フロントエンドがフォームページをコーディングするときのメモ

毎回調べるので、現状のメモを。 ども、カンマンのフロントエンド担当、阿部です。 WordPressならばメールフォームをくっつけるのは簡単なのですが、htmlで組んだフォームページをバックエンドに回す前にフロント側でやっておいた方が良さそうなことをメモします。

生年月日のテンプレート

こちらを拝借。 もっとスマートに実装できるのかしら？？

郵便番号から住所を入力させる

ajaxzip3/ajaxzip3.github.io

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

本体を読み込んで、

<input type="text" name="zip11" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');">
<input type="text" name="addr11" size="60">

これだけで実装OK。jQueryすら必要としない。都道府県のメンテナンスも不要。

フォームのリアルタイムバリデーション

jzaefferer/jquery-validation バリデーション系のプラグインはいっぱいあるけど、個人的にはコレが使いやすい。 本体を読み込んで、

$(function(){
    $("form").validate({
        rules: {
            name :{
                required: true
            },
            mail :{
                required: true,
                email: true
            },
            url :{
                required: true
            }
        },
        messages: {
            name :{
                required: "お名前を入力してください"
            },
            mail :{
                required: "メールアドレスを入力してください",
                email: "正しいメールアドレスを入力してください"
            },
            url :{
                required: "URLを入力してください"
            }
        }
    });
})

見た感じが直感的に指定出来る。日本語ももちろんOK。

フォームはコーディング自体が完全に作業なので、その他の部分でちょっとでも楽したいですね。

コンバージョンを上げたりKPT回したりする前に、しっかりと問題なく組めることが大事ですね。 ではでは。