メールフォームプロのHTMLコーディングについて

この記事のゴール

「名前」「ナマエ(フリガナ)」「メールアドレス」「電話番号」「郵便番号」「住所」「備考」を取得するフォームのHTMLコーディングについて解説します。設置がまだの場合はメールフォームプロ 4の設置方法の記事を先に参照してください!

 

下準備

まずは<head>内に、以下を記述しメールフォームプロのCSSを読み込みます。

<link rel="stylesheet" href="mfp.statics/mailformpro.css" type="text/css" />

挿入の場所ですが、「リセット系CSS(normalize.cssやreset.css)」と「デザイン系CSS(style.cssなど)」の間がベストだと思います。

<body>に記述すること

下記のサンプルコードをコピー&ペーストでフォームとして機能します。
コードの下に、属性値の意味とカスタマイズに必要なヒントがあります。

メールフォームプロのメリットはHTMLだけで項目の追加・変更・削除ができる点です。
必要ない項目は<dt><dd>をワンセットで削除してください。

追加したい場合は、サンプルファイル(example.html)またはメールフォームプロのデモサイトのコピーして利用すればOKです。

<body>内の記述

<form id="mailformpro" action="mailformpro/mailformpro.cgi" method="POST">
  <dl>
    <dt class="mfp"><span class="must">必須</span>お名前</dt>
    <dd class="mfp">
      <input type="text" name="名前" data-kana="ナマエ" size="30" required="required" />
    </dd>
    <dt class="mfp">フリガナ</dt>
    <dd class="mfp"><input type="text" name="ナマエ" size="30" data-charcheck="kana" /></dd>
    <dt class="mfp"><span class="must">必須</span>メールアドレス</dt>
    <dd class="mfp"><input type="email" data-type="email" name="email" size="40" required="required" /></dd>
    <dt class="mfp"><span class="must">必須</span>確認のためもう一度</dt>
    <dd class="mfp"><input type="email" data-type="email" name="confirm_email" size="40" required="required" /></dd>
    <dt class="mfp">電話番号<span class="must">必須</span></dt>
    <dd class="mfp">        <input type="tel" data-type="tel" name="電話番号" size="30" data-min="9" data-max="13" required="required" /></dd>
    <dt class="mfp">郵便番号 <a href="http://www.post.japanpost.jp/zipcode/" rel="nofollow" target="_blank">郵便番号を調べる</a></dt>
    <dd class="mfp">
      <input type="hidden" name="ご住所" data-join="〒+郵便番号+\n+都道府県+市区町村+丁目番地" value="" />
      <input type="text" name="郵便番号" size="15" data-address="都道府県,市区町村,市区町村" />
    </dd>
    <dt class="mfp">ご住所</dt>
    <dd class="mfp">
      <ol>
        <li>
          <span>都道府県</span>
          <select name="都道府県">
            <option value="" selected="selected">選択して下さい</option>
            <optgroup label="北海道・東北地方">
              <option value="北海道">北海道</option>
              <option value="青森県">青森県</option>
              <option value="岩手県">岩手県</option>
              <option value="秋田県">秋田県</option>
              <option value="宮城県">宮城県</option>
              <option value="山形県">山形県</option>
              <option value="福島県">福島県</option>
            </optgroup>
            <optgroup label="関東地方">
              <option value="栃木県">栃木県</option>
              <option value="群馬県">群馬県</option>
              <option value="茨城県">茨城県</option>
              <option value="埼玉県">埼玉県</option>
              <option value="東京都">東京都</option>
              <option value="千葉県">千葉県</option>
              <option value="神奈川県">神奈川県</option>
            </optgroup>
            <optgroup label="中部地方">
              <option value="山梨県">山梨県</option>
              <option value="長野県">長野県</option>
              <option value="新潟県">新潟県</option>
              <option value="富山県">富山県</option>
              <option value="石川県">石川県</option>
              <option value="福井県">福井県</option>
              <option value="静岡県">静岡県</option>
              <option value="岐阜県">岐阜県</option>
              <option value="愛知県">愛知県</option>
            </optgroup>
            <optgroup label="近畿地方">
              <option value="三重県">三重県</option>
              <option value="滋賀県">滋賀県</option>
              <option value="京都府">京都府</option>
              <option value="大阪府">大阪府</option>
              <option value="兵庫県">兵庫県</option>
              <option value="奈良県">奈良県</option>
              <option value="和歌山県">和歌山県</option>
            </optgroup>
            <optgroup label="四国地方">
              <option value="徳島県">徳島県</option>
              <option value="香川県">香川県</option>
              <option value="愛媛県">愛媛県</option>
              <option value="高知県">高知県</option>
            </optgroup>
            <optgroup label="中国地方">
              <option value="鳥取県">鳥取県</option>
              <option value="島根県">島根県</option>
              <option value="岡山県">岡山県</option>
              <option value="広島県">広島県</option>
              <option value="山口県">山口県</option>
            </optgroup>
            <optgroup label="九州・沖縄地方">
              <option value="福岡県">福岡県</option>
              <option value="佐賀県">佐賀県</option>
              <option value="長崎県">長崎県</option>
              <option value="大分県">大分県</option>
              <option value="熊本県">熊本県</option>
              <option value="宮崎県">宮崎県</option>
              <option value="鹿児島県">鹿児島県</option>
              <option value="沖縄県">沖縄県</option>
            </optgroup>
          </select>
        </li>
        <li><span>市区町村</span>
          <input type="text" name="市区町村" size="30" />
        </li>
        <li><span>丁目番地 (建物名・部屋番号)</span>
          <input type="text" name="丁目番地" size="30" />
        </li>
      </ol>
    </dd>
    <dt class="mfp">備考欄</dt>
    <dd class="mfp"><textarea name="備考欄" rows="10" cols="60"></textarea></dd>
  </dl>
  <button type="submit" data-disabled="入力内容にエラーがあります">送信する</button>
</form>
<script type="text/javascript" id="mfpjs" src="mailformpro/mailformpro.cgi" charset="UTF-8"></script>

メールフォームプロを用いたフォームコーディングの基本

formタグ内は、tableまたはdlを用いて作成します。

dt,dd,trにclass=”mfp”を指定しておくと、偶数・奇数それぞれのクラスが割り当てられます。
これを利用して行にストライプの背景をつけたりすることができます。

偶数行・・・class=”mfp_colored”
奇数行・・・class=”mfp_achroma”

<form>の属性・値

id=”mailformpro”
メールフォームプロのCSSを有効にするために記述します
action=”mailformpro/mailformpro.cgi”
データの送信先として、mailformpro.cgiへのパスを記述します
method=”POST”
データの送信形式はpostを指定します。

名前関連の属性・値

type=”text”
テキスト
1行テキストボックスを作成します。
name=”名前”
フォーム部品の名前
メールに入力された値(value)を差し込むことができます。記述の形式は<_name属性の値_>です。例えばname=”名前”は<_名前_>、name=”email”は<_email_>
required=”required”
項目への入力を必須にする場合
data-kana=”ナマエ”
name=”ナマエ”の項目にフリガナを自動入力します。Firefoxは非対応、IE、Chrome、Safari、Operaで機能します。

データチェックの属性・値

input, textareaにデータチェックの属性・値を追加することで、文字校正ができます。

data-charcheck=”kana”
入力したデータをチェックし全角カタカナ以外であればエラーを表示します
data-charcheck=”digit”
数字以外はエラー表示
data-charcheck=”alphabet”
英語以外はエラー表示
data-charcheck=”digit_and_alphabet”
英語と数字(記号含まず)以外はエラー表示

メールアドレス関連の属性・値

type=”email” data-type=”email”
メールアドレスの入力欄に使用します。
古いブラウザに対応させるため「data-type=”email”」を併記します。
name=”email”
この属性・値が指定されたアドレスが、ユーザーへの返信に使用されます。
name=”confirm_email”
確認のために入力したメールアドレスの項目に指定します。

電話番号関連の属性・値

type=”tel” data-type=”tel”
電話番号の入力欄に使用します。
古いブラウザに対応させるため「data-type=”tel”」を併記します。

郵便番号・住所関連の属性・値

data-address=”都道府県,市区町村,市区町村”
郵便番号のinputの属性・値として追加します。
郵便番号の入力で、住所の一部が自動で入力されます。
上記のように住所を格納するエレメントのname属性を指定します。
一つの入力欄にすべて入力させたい場合は「data-address=”住所,住所,住所”」とします。

これで、基本的なフォームは作成できると思います。
レイアウトについては、CSSで適宜調整してください。

次回、スマートフォンに対応したCSSについて解説したいと思います。
質問などあれば、コメント欄でお知らせください!

コメントを残す

メールアドレスが公開されることはありません。