レスポンシブ メールフォームのカスタマイズ方法についての解説

このページでは、こちらのページでダウンロードができる「レスポンシブ メールフォーム」のカスタマイズ方法について詳細な解説をしたいと思います。

このページの解説は初期状態での設置・動作確認ができており、バージョンは現在公開中の最新バージョンが前提での解説になります。
このページで解説している通りのカスタマイズであれば、各アドオンを追加しても正常に動作するようになっています。

2017年4月3日追記：各ファイル相関図を作成しました。各ファイルの関連性を知る参考にどうぞ。

2018年1月29日追記：このサイトで公開しているすべてのプログラムに関して、基本仕様の解説ページを作成しました。カスタマイズをする際には仕様から外れないように編集をすると、プログラムの動作エラーを未然に防ぐことができます。

この解説の対象となる人

このページの解説は以下の人が対象になります。

0、必須スキル

ファイルを編集後に文字コードを「UTF-8 BOMなし(UTF-8N)」で保存ができる人。
このやり方については「文字コードをUTF-8 BOMなし(UTF-8N)でファイル保存をする方法」をご覧ください。

1、項目の変更・削除

HTMLを理解・編集ができる人。

2、デザインの変更

HTML、CSSを理解・編集ができる人。

以下、コードの部分(黒背景に緑文字の部分)が改行が多くて読み取りにくい場合は、そのコードをコピーしてテキストエディタなどに貼り付けて確認してみてください。

項目名を変更する方法

以下の部分を「項目名」と呼ぶこととします。

これらの名称はHTMLファイル内を編集することで可能です。

例えば初期状態で「名前」となっているのを「お名前」に変更したい場合はindex.html内の以下の部分を、

<dt><i></i>名前</dt>

以下のように変更します。

<dt><i></i>お名前</dt>

必須項目が未入力の際に表示されるエラーメッセージの項目名に関しては、編集作業は必要ありません。上記HTMLファイル内の項目名を自動で取得して表示されます。

各項目の必須または任意の変更方法

各項目の必須または任意の変更は、index.htmlファイル内の各項目のdd要素にrequiredというクラス名を付加するとそれが必須項目となり、自動的に赤色の「必須」ラベルが表示されます。
と同時に、その項目はフォーム送信前に入力チェックが行われるようになります。

逆にこのクラス名が無い場合は、その項目には自動的に青色の「任意」ラベルが表示されます。

具体的なコードの例としては、以下のような状態なら「任意」になり、

<dt><i></i>名前</dt>
<dd><input type="text" name="name_1" value="" /> <input type="text" name="name_2" value="" /></dd>

以下のような状態なら「必須」の項目になります。(class=”required”を追加)

<dt><i></i>名前</dt>
<dd class="required"><input type="text" name="name_1" value="" /> <input type="text" name="name_2" value="" /></dd>

この必須・任意のラベルの色の変え方や削除の方法は「メールフォームのデザイン変更やサイト組み込みの際のサイズの説明」で解説しています。

デザインの変更方法

見た目のデザインに関してはすべてCSSで行っています。
JavaScriptによって自動的に表示される「必須または任意のラベル」や「エラーメッセージ」も、文字サイズや色などすべてCSSで設定しています。

各CSSファイルの内容は以下のように振り分けて設定しています。
WordPressプラグイン版の方はプラグインフォルダの中にCSSファイルが入っています。
プラグインフォルダの場所は wp-content/plugins/responsive-mailform です。

reset.css (WordPressプラグイン版はない)

ブラウザのデフォルトCSSをリセットするためのファイル。

mailform.css (WordPressプラグイン版はresponsive-mailform.css)

このメールフォームのデザイン設定。

thanks.css (WordPressプラグイン版はない)

サンクスページのデザイン設定。

つまり、すでに出来上がっているサイトに組み込む場合はreset.cssが不要になる可能性が高いです。

デザインに関する基本的な解説は「メールフォームのデザイン変更やサイト組み込みの際のサイズの説明」でしています。

メールフォームの不要な項目を削除する方法

項目を減らしたい場合はHTMLファイル内のdl,dt,dd要素ごと削除してしまえばOKです。

具体的なコードの例としては、index.html内の以下のような初期状態から「ご希望の日時」を無くしたい場合は、

<dl>
  <dt><i></i>電話番号</dt>
  <dd><input type="tel" name="phone" value="" /></dd>
</dl>

<dl>
  <dt><i></i>ご希望の日時</dt>
  <dd class="required"><input type="text" name="schedule" value="" readonly="readonly" /></dd>
</dl>

<dl>
  <dt><i></i>ご希望の商品</dt>
  <dd>
    <select name="product">
      <option value="">選択してください</option>
      <option value="iPhone4">iPhone4</option>
      <option value="iPhone4s">iPhone4s</option>
      <option value="iPhone5">iPhone5</option>
      <option value="iPhone5s">iPhone5s</option>
      <option value="iPhone6">iPhone6</option>
      <option value="iPhone6 Plus">iPhone6 Plus</option>
      <option value="iPhone6s">iPhone6s</option>
      <option value="iPhone6s Plus">iPhone6s Plus</option>
      <option value="iPhone7">iPhone7</option>
      <option value="iPhone7 Plus">iPhone7 Plus</option>
    </select>
  </dd>
</dl>

以下のようにdl,dt,dd要素ごと削除してしまえばOKです。

<dl>
  <dt><i></i>電話番号</dt>
  <dd><input type="tel" name="phone" value="" /></dd>
</dl>

<dl>
  <dt><i></i>ご希望の商品</dt>
  <dd>
    <select name="product">
      <option value="">選択してください</option>
      <option value="iPhone4">iPhone4</option>
      <option value="iPhone4s">iPhone4s</option>
      <option value="iPhone5">iPhone5</option>
      <option value="iPhone5s">iPhone5s</option>
      <option value="iPhone6">iPhone6</option>
      <option value="iPhone6 Plus">iPhone6 Plus</option>
      <option value="iPhone6s">iPhone6s</option>
      <option value="iPhone6s Plus">iPhone6s Plus</option>
      <option value="iPhone7">iPhone7</option>
      <option value="iPhone7 Plus">iPhone7 Plus</option>
    </select>
  </dd>
</dl>

メールフォームの項目を増やす方法

項目の増やし方は簡単です。
例えば初期状態で以下のようになっている部分に、

<dl>
  <dt><i></i>会社名</dt>
  <dd><input type="text" name="company" value="" /></dd>
</dl>

<dl>
  <dt><i></i>名前</dt>
  <dd class="required"><input type="text" name="name_1" value="" /> <input type="text" name="name_2" value="" /></dd>
</dl>

1行テキストボックスを追加したい場合は、以下のようにdl,dt,dd要素ごと挿入してください。
(dl,dt,dd要素で構成するのがこのメールフォームの仕様です)

<dl>
  <dt><i></i>会社名</dt>
  <dd><input type="text" name="company" value="" /></dd>
</dl>

<dl>
  <dt><i></i>役職</dt>
  <dd><input type="text" name="position" value="" /></dd>
</dl>

<dl>
  <dt><i></i>名前</dt>
  <dd class="required"><input type="text" name="name_1" value="" /> <input type="text" name="name_2" value="" /></dd>
</dl>

上記作業の際は、必ずname属性の値を適当に変更してください。1つのページ内に同じ名前が存在してはいけません。
また、上記例の箇所にラジオボタンを追加したい場合は以下のように挿入します。

<dl>
  <dt><i></i>会社名</dt>
  <dd><input type="text" name="company" value="" /></dd>
</dl>

<dl>
  <dt><i></i>好きなタイプ</dt>
  <dd>
    <ul>
      <li><label><input type="radio" name="like_type" value="洋式" />洋式</label></li>
      <li><label><input type="radio" name="like_type" value="和式" />和式</label></li>
      <li><label><input type="radio" name="like_type" value="おまる" />おまる</label></li>
      <li><label><input type="radio" name="like_type" value="野グソ" />野グソ</label></li>
    </ul>
  </dd>
</dl>

<dl>
  <dt><i></i>名前</dt>
  <dd class="required"><input type="text" name="name_1" value="" /> <input type="text" name="name_2" value="" /></dd>
</dl>

このように、ラジオボタンの場合は同一の選択肢グループに属するものは同じname属性にする必要があります。これはHTMLの仕様です。
また、チェックボックスを増やしたい場合は以下のようにします。

<dl>
  <dt><i></i>流れない時どうする？</dt>
  <dd>
    <ul>
      <li><label><input type="checkbox" name="happening[]" value="店員を呼ぶ" />店員を呼ぶ</label></li>
      <li><label><input type="checkbox" name="happening[]" value="黙って逃げる" />黙って逃げる</label></li>
      <li><label><input type="checkbox" name="happening[]" value="上記以外の切り抜け方を知っている" />上記以外の切り抜け方を知っている</label></li>
    </ul>
  </dd>
</dl>

このようにチェックボックスのname属性は、同一の選択肢グループに属するものは同じname属性名にし、末尾に[]を追加します。

ラジオボタンの選択肢を増やしたい場合

初期状態では「性別」や「恋愛対象」という項目がラジオボタンでの選択肢になっています。

この選択肢を増やしたい場合は、初期状態のindex.html内で以下のようになっているのを、

<dl>
  <dt><i></i>性別</dt>
  <dd>
    <ul>
      <li><label><input type="radio" name="gender" value="男性" />男性</label></li>
      <li><label><input type="radio" name="gender" value="女性" />女性</label></li>
    </ul>
  </dd>
</dl>

以下のようにすればOKです。

<dl>
  <dt><i></i>性別</dt>
  <dd>
    <ul>
      <li><label><input type="radio" name="gender" value="男性" />男性</label></li>
      <li><label><input type="radio" name="gender" value="女性" />女性</label></li>
      <li><label><input type="radio" name="gender" value="オカマ" />オカマ</label></li>
      <li><label><input type="radio" name="gender" value="ニューハーフ" />ニューハーフ</label></li>
    </ul>
  </dd>
</dl>

このように、ラジオボタンの場合は同一の選択肢グループに属するものは同じname属性にする必要があります。

プルダウンメニューの選択肢を増やしたい場合

初期状態では「ご希望の商品」や「ご使用中の商品」という項目がプルダウンメニューでの選択肢になっています。

この選択肢を増やしたい場合は、初期状態のindex.html内で以下のようになっているのを、

<dl>
  <dt><i></i>ご希望の商品</dt>
  <dd>
    <select name="product">
      <option value="">選択してください</option>
      <option value="iPhone4">iPhone4</option>
      <option value="iPhone4s">iPhone4s</option>
      <option value="iPhone5">iPhone5</option>
      <option value="iPhone5s">iPhone5s</option>
      <option value="iPhone6">iPhone6</option>
      <option value="iPhone6 Plus">iPhone6 Plus</option>
      <option value="iPhone6s">iPhone6s</option>
      <option value="iPhone6s Plus">iPhone6s Plus</option>
      <option value="iPhone7">iPhone7</option>
      <option value="iPhone7 Plus">iPhone7 Plus</option>
    </select>
  </dd>
</dl>

以下のように追加すればOKです。

<dl>
  <dt><i></i>ご希望の商品</dt>
  <dd>
    <select name="product">
      <option value="">選択してください</option>
      <option value="iPhone4">iPhone4</option>
      <option value="iPhone4s">iPhone4s</option>
      <option value="iPhone5">iPhone5</option>
      <option value="iPhone5s">iPhone5s</option>
      <option value="iPhone6">iPhone6</option>
      <option value="iPhone6 Plus">iPhone6 Plus</option>
      <option value="iPhone6s">iPhone6s</option>
      <option value="iPhone6s Plus">iPhone6s Plus</option>
      <option value="iPhone7">iPhone7</option>
      <option value="iPhone7 Plus">iPhone7 Plus</option>
      <option value="iPhone13">iPhone13</option>
      <option value="iPhone13 Pro">iPhone13 Pro</option>
    </select>
  </dd>
</dl>

チェックボックスの選択肢を増やしたい場合

初期状態では「お問い合わせの種類」や「返信方法のご希望」がチェックボックスでの選択肢になっています。

このチェックボックスの選択肢を増やしたい場合は、初期状態のindex.html内で以下のようになっている部分を、

<dl>
  <dt><i></i>お問い合わせの種類</dt>
  <dd>
    <ul>
      <li><label><input type="checkbox" name="kind[]" value="WEBサイトについて" />WEBサイトについて</label></li>
      <li><label><input type="checkbox" name="kind[]" value="商品について" />商品について</label></li>
      <li><label><input type="checkbox" name="kind[]" value="キャンペーンについて" />キャンペーンについて</label></li>
      <li><label><input type="checkbox" name="kind[]" value="採用について" />採用について</label></li>
      <li><label><input type="checkbox" name="kind[]" value="ご意見・ご要望" />ご意見・ご要望</label></li>
      <li><label><input type="checkbox" name="kind[]" value="交際希望" />交際希望</label></li>
    </ul>
  </dd>
</dl>

以下のように追加すればOKです。

<dl>
  <dt><i></i>お問い合わせの種類</dt>
  <dd>
    <ul>
      <li><label><input type="checkbox" name="kind[]" value="WEBサイトについて" />WEBサイトについて</label></li>
      <li><label><input type="checkbox" name="kind[]" value="商品について" />商品について</label></li>
      <li><label><input type="checkbox" name="kind[]" value="キャンペーンについて" />キャンペーンについて</label></li>
      <li><label><input type="checkbox" name="kind[]" value="採用について" />採用について</label></li>
      <li><label><input type="checkbox" name="kind[]" value="ご意見・ご要望" />ご意見・ご要望</label></li>
      <li><label><input type="checkbox" name="kind[]" value="交際希望" />交際希望</label></li>
      <li><label><input type="checkbox" name="kind[]" value="むしろ結婚して" />むしろ結婚して</label></li>
      <li><label><input type="checkbox" name="kind[]" value="都合のいい女にして" />都合のいい女にして</label></li>
    </ul>
  </dd>
</dl>

このように、チェックボックスのname属性は同一の選択肢グループに属するものは同じname属性名にし、末尾に[]を追加します。