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

このページでは、こちらのページでダウンロードができる「レスポンシブ メールフォーム」がバージョン2.0になったのを機会に、詳細な解説をしたいと思います。
WordPressプラグイン版も基本的には同じです。

初期状態での設置方法に関しては上記ページに書いてありますので、まずはそちらを参考にして設置してみてください。
このページの解説は初期状態での設置・動作確認ができており、バージョンは現在公開中の最新バージョンが前提での解説になります。

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

この解説の対象となる人

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

0、必須スキル
ファイルを編集後に文字コードを「UTF-8 BOMなし(UTF-8N)」で保存ができる人。
このやり方については「文字コードをUTF-8 BOMなし(UTF-8N)でファイル保存をする方法」をご覧ください。
1、項目の変更・削除
HTMLを理解・編集ができる人。
2、デザインの変更
HTML、CSSを理解・編集ができる人。

このメールフォームは項目(入力フォーム)を減らすことは比較的簡単にできますが、項目(入力フォーム)を増やすことはHTMLだけでなくJavaScriptやPHP側の編集も必要になってくるため、このページでは解説しきれません。
よろしければ有償でのカスタマイズ依頼をご検討下さい。
2017年4月12日追記:バージョン5.0からは比較的簡単に項目を追加できるようになりました。

しかし、ラジオボタンの選択肢とチェックボックスの選択肢、プルダウンメニューの選択肢は簡単に増やすことができるようになっています。(やり方は後述)

項目名を変更する方法

各項目名はHTMLファイル内を編集することで可能です。
たとえば初期状態で「名前」となっているのを「お名前」に変更したい場合はindex.html内の以下の部分を、

<dt>名前<span>Your Name</span></dt>

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

<dt>お名前<span>Your Name</span></dt>

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

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

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

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

<dt>名前<span>Your Name</span></dt>
<dd><input type="text" id="name_1" name="name_1" value="" /> <input type="text" id="name_2" name="name_2" value="" /></dd>

以下のような状態なら「必須」の項目になります。

<dt>名前<span>Your Name</span></dt>
<dd class="required"><input type="text" id="name_1" name="name_1" value="" /> <input type="text" id="name_2" name="name_2" value="" /></dd>

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

デザインの変更方法

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

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

import.css (WordPressプラグイン版はない)
reset.cssとstyle.cssをまとめて読み込むファイル。
reset.css (WordPressプラグイン版はない)
ブラウザのデフォルトCSSをリセットするためのファイル。
style.css (WordPressプラグイン版はない)
ページ全体(body要素)の背景色や文字の大きさ、リンクの文字色の設定。
mailform.css (WordPressプラグイン版はresponsive-mailform.css)
このメールフォームのデザイン設定。
thanks.css (WordPressプラグイン版はない)
サンクスページのデザイン設定。

つまり、すでに出来上がっているサイトに組み込む場合はmailform.cssthanks.cssだけを使用すればOKである可能性が高いです。

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

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

前述のとおり、項目を増やすことはJavaScriptやPHP側の編集も必要になるので難しいですが、項目を減らしたい場合はHTMLファイル内のdt要素とdd要素を丸ごと削除してしまえばOKです。

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

<dt>電話番号<span>Phone Number</span></dt>
<dd><input type="text" id="phone" name="phone" value="" /></dd>

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

<dt>ご希望の商品<span>Product</span></dt>
<dd class="required">
  <select id="product" 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>
  </select>
</dd>

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

<dt>電話番号<span>Phone Number</span></dt>
<dd><input type="text" id="phone" name="phone" value="" /></dd>


<dt>ご希望の商品<span>Product</span></dt>
<dd class="required">
  <select id="product" 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>
  </select>
</dd>

【注意点】
名前」や「ふりがな」、「住所」の3項目に関しては初期状態でそれぞれ2つの入力フォームがあります。
これの片方を削除して1つにすると、必須時のエラー表示が出なくなってしまいます。

バージョン3.1.2からは上記項目を1つにしても正常に動作するようにしました。

【補足説明】入力する人の手間を増やしてまで入力欄を2つに分けている理由
住所はともかくとして、なぜ性と名を2つに分けているかといいますと、例えば「時任三郎」という人からのお問い合わせがあった際、1つの入力欄だとどこまでが名字でどこからが下の名前かが判別できないからです。
お客様の名前を間違って呼ぶことは大変失礼になるので、入力する人の手間が増えるとしても入力欄を2つに分けてあります。

「ふりがなの欄があればいいじゃないか」と思われるかもしれませんが、ふりがな欄が必須項目とは限りませんし、もしふりがな欄が1つだった場合「ときとうさぶろう」と書かれているだけでは「ときとう さぶろう」なのかそれとも「とき とうさぶろう」かはもはや判別ができません。

さらに、もしふりがな欄がない場合、間違って「とき にんざぶろう」さんと呼んでしまうと、それがきっかけで人気刑事ドラマが生まれてしまうかもしれません。→具体例(「登場人物の名前」の部分を参照)

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

ようやく。
待望の。
むしろ、あって当然の新機能「項目を簡単に増やせる」がバージョン5.0から可能になりました。

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

<dt>会社名<span>Company Name</span></dt>
<dd><input type="text" id="company" name="company" value="" /></dd>

<dt>名前<span>Your Name</span></dt>
<dd class="required"><input type="text" id="name_1" name="name_1" value="" /> <input type="text" id="name_2" name="name_2" value="" /></dd>

1行テキストボックスを追加したい場合は、以下のようにdt要素とdd要素ごと挿入してください。

<dt>会社名<span>Company Name</span></dt>
<dd><input type="text" id="company" name="company" value="" /></dd>

<dt>役職<span>Position</span></dt>
<dd><input type="text" id="position" name="position" value="" /></dd>

<dt>名前<span>Your Name</span></dt>
<dd class="required"><input type="text" id="name_1" name="name_1" value="" /> <input type="text" id="name_2" name="name_2" value="" /></dd>

上記作業の際は、必ずid属性やname属性の値を適当に変更してください。1つのページ内に同じ名前が存在してはいけません
(id属性は同じ名前が存在したとしても、おそらくメールフォーム自体は正常に動作しますが、HTMLの仕様上、1つのページ内に同じid名が複数存在するのはよろしくありません)

また、上記例において、ラジオボタンを追加したい場合は以下のように挿入します。

<dt>会社名<span>Company Name</span></dt>
<dd><input type="text" id="company" name="company" value="" /></dd>

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

<dt>名前<span>Your Name</span></dt>
<dd class="required"><input type="text" id="name_1" name="name_1" value="" /> <input type="text" id="name_2" name="name_2" value="" /></dd>

このように、ラジオボタンの場合は同一の選択肢グループに属するものは同じname属性にする必要があります。これはHTMLの仕様です。
でも、id属性は同じ名前になってはいけません。そのため上記例ではid属性を使わずにclass属性を使用しています。
複数あるものはclass、唯一のものはid。これがHTMLの基本です。

また、チェックボックスを増やしたい場合は以下のようにします。

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

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

【注意点】
dt要素には項目名。dd要素にはフォーム部品が1種類。複数はOK。というのが仕様となります。
(ラジオボタンとチェックボックスに関しては、1つのdd要素内に複数グループは不可)

送られてくるメールの本文欄にある項目を削除する方法

バージョン3.1からは以下の設定は不要になりました。
上で書いてある説明にしたがってHTMLから削除した項目に関しては、送信者・受信者に送られるメールに記載されません。

上記の解説によってメールフォームの項目を削除した場合は、送信者・受信者に送られるメールの内容の項目も削除しておくとベターでしょう。

具体的なコード例としては「ご希望の日時」を削除したい場合、config.php内で初期状態で以下のようになっているのを、

//(任意) 自分に届くメールの内容 -- シングルクォーテーション、つまり'と'の間の文章だけを自分に合わせて変更してください。行ごと削除しても問題ありません。 --
$rm_send_body = ''.PHP_EOL;
$rm_send_body .= 'メールフォームからお問い合わせがありました。'.PHP_EOL;
$rm_send_body .= 'お問い合わせの内容は以下の通りです。'.PHP_EOL;
$rm_send_body .= ''.PHP_EOL;
$rm_send_body .= '-----------------------------------------------------------------------------------'.PHP_EOL;
$rm_send_body .= ''.PHP_EOL;
$rm_send_body .= '送信時刻:%1$d年%2$d月%3$d日 %4$d時%5$d分%6$d秒'.PHP_EOL;
$rm_send_body .= '名前:%7$s %8$s'.PHP_EOL;
$rm_send_body .= 'ふりがな:%9$s %10$s'.PHP_EOL;
$rm_send_body .= 'メールアドレス:%11$s'.PHP_EOL;
$rm_send_body .= '性別:%12$s'.PHP_EOL;
$rm_send_body .= '郵便番号:%13$s'.PHP_EOL;
$rm_send_body .= '住所:%14$s %15$s'.PHP_EOL;
$rm_send_body .= '電話番号:%16$s'.PHP_EOL;
$rm_send_body .= 'ご希望の日時:%17$s'.PHP_EOL;
$rm_send_body .= 'ご希望の商品:%18$s'.PHP_EOL;
$rm_send_body .= 'お問い合わせの種類:%19$s'.PHP_EOL;
$rm_send_body .= 'お問い合わせの内容:'.PHP_EOL;
$rm_send_body .= '%20$s'.PHP_EOL;
$rm_send_body .= ''.PHP_EOL;
$rm_send_body .= '-----------------------------------------------------------------------------------'.PHP_EOL;

以下のように該当する行ごと削除してしまえばOKです。

//(任意) 自分に届くメールの内容 -- シングルクォーテーション、つまり'と'の間の文章だけを自分に合わせて変更してください。行ごと削除しても問題ありません。 --
$rm_send_body = ''.PHP_EOL;
$rm_send_body .= 'メールフォームからお問い合わせがありました。'.PHP_EOL;
$rm_send_body .= 'お問い合わせの内容は以下の通りです。'.PHP_EOL;
$rm_send_body .= ''.PHP_EOL;
$rm_send_body .= '-----------------------------------------------------------------------------------'.PHP_EOL;
$rm_send_body .= ''.PHP_EOL;
$rm_send_body .= '送信時刻:%1$d年%2$d月%3$d日 %4$d時%5$d分%6$d秒'.PHP_EOL;
$rm_send_body .= '名前:%7$s %8$s'.PHP_EOL;
$rm_send_body .= 'ふりがな:%9$s %10$s'.PHP_EOL;
$rm_send_body .= 'メールアドレス:%11$s'.PHP_EOL;
$rm_send_body .= '性別:%12$s'.PHP_EOL;
$rm_send_body .= '郵便番号:%13$s'.PHP_EOL;
$rm_send_body .= '住所:%14$s %15$s'.PHP_EOL;
$rm_send_body .= '電話番号:%16$s'.PHP_EOL;

$rm_send_body .= 'ご希望の商品:%18$s'.PHP_EOL;
$rm_send_body .= 'お問い合わせの種類:%19$s'.PHP_EOL;
$rm_send_body .= 'お問い合わせの内容:'.PHP_EOL;
$rm_send_body .= '%20$s'.PHP_EOL;
$rm_send_body .= ''.PHP_EOL;
$rm_send_body .= '-----------------------------------------------------------------------------------'.PHP_EOL;

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

ラジオボタンの選択肢
初期状態では「性別」という項目がラジオボタンでの選択肢になっています。
この選択肢を増やしたい場合は、初期状態のindex.html内で以下のようになっているのを、

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

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

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

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

プルダウンメニューの選択肢
初期状態では「ご希望の商品」という項目がプルダウンメニューでの選択肢になっています。
この選択肢を増やしたい場合は、初期状態のindex.html内で以下のようになっているのを、

<dt>ご希望の商品<span>Product</span></dt>
<dd class="required">
  <select id="product" 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>
  </select>
</dd>

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

<dt>ご希望の商品<span>Product</span></dt>
<dd class="required">
  <select id="product" 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="iPhone7">iPhone7</option>
    <option value="iPhone8">iPhone8</option>
  </select>
</dd>

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

チェックボックスの選択肢
初期状態では「お問い合わせの種類」がチェックボックスでの選択肢になっています。
このチェックボックスの選択肢を増やしたい場合は、初期状態のindex.html内で以下のようになっている部分を、

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

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

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

サポートBBS

サイト内を検索
サイト運用事例
提供サービス
メールフォーム

ダウンロード一覧へ

アンケートフォーム

ダウンロード一覧へ

BBS

ダウンロード一覧へ

その他おすすめ

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

カテゴリ別
制作者の詳細
  • 谷元博のブログ
  • Google+