メールフォームのデザイン変更やサイト組み込みの際のサイズの説明

このページでは以下のページでダウンロードできるメールフォームのデザインのカスタマイズに関して解説をいたします。

  1. レスポンシブ・メールフォームの無料ダウンロード
  2. WordPressプラグイン版のレスポンシブ・メールフォームの設定方法

このメールフォームを既存のサイトに組み込む場合はこのページの解説を読んでおくと、組み込み作業がスムーズにできるかもしれません。
初期状態では以下のようなデザインになっています。
メールフォームの初期デザイン

【WordPressプラグイン版の場合】
WordPressプラグイン版では背景画像がなく(画像は1枚もなし)、周りの罫線がないだけで、それ以外は通常版と同じです。
以下の解説内でmailform.cssとなっている部分をresponsive-mailform.cssに置き換えて読んでください。

WordPressプラグイン版のcssファイルはプラグインフォルダに入っています。
プラグインフォルダの場所は wp-content/plugins/responsive-mailform です。
style.cssなどはありません。


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

必須スキル
HTML、CSSを理解・編集ができる人。

初期状態では以下のようにフォーム全体の横幅が960ピクセル + 左右の罫線1ピクセルずつ、となっています。
(WordPressプラグイン版および通常版バージョン5.2未満は幅600ピクセルです)
メールフォームの寸法
つまり横幅の合計は962ピクセルになるのですが、既存のサイトに組み込む場合はおそらく周囲の罫線は不要になると思われるので、この罫線を消してしまえばちょうど960ピクセルとなります。
(WordPressプラグイン版では最初からこの罫線がありません)

周囲の罫線を消すためには初期状態のmailform.cssで以下のようになっている部分を、

form#mail_form {
  width: 960px;
  margin: 50px auto;
  padding: 10px 0;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 7px;
  box-shadow: 0 0 7px rgba( 0, 0, 0, 0.2 );
  font-size: 95%;
  line-height: 1.8;
}

以下のように変更すればOKです。(borderborder-radiusbox-shadowの行を削除)

form#mail_form {
  width: 960px;
  margin: 50px auto;
  padding: 10px 0;
  background: #ffffff;
  
  font-size: 95%;
  line-height: 1.8;
}

すると表示は以下のようになります。
罫線や影を削除した表示

前述の説明のように、メールフォームの横幅は初期状態で960ピクセル + 罫線2ピクセル、となっています。
例えば、今ご覧になっているこのページでは、コンテンツ領域が600ピクセルです。
コンテンツ領域の幅

ここにメールフォームを組み込む場合は、初期状態のmailform.cssで以下のようになっている部分を、

form#mail_form {
  width: 960px;
  margin: 50px auto;
  padding: 10px 0;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 7px;
  box-shadow: 0 0 7px rgba( 0, 0, 0, 0.2 );
  font-size: 95%;
  line-height: 1.8;
}

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

form#mail_form {
  width: 600px;
  margin: 50px auto;
  padding: 10px 0;
  background: #ffffff;
  font-size: 95%;
  line-height: 1.8;
}

するとページの表示は以下のような状態になります。
横幅を狭くした例
form#mail_formの親にあたる要素の横幅が指定されていれば、上記コードの600pxの部分はwidth : auto;にしてもOKでしょう。

また、form#mail_form配下の子要素については、すべて%での相対指定となっておりますので、修正が必要な点はありません。

初期状態では必須のラベルは赤色、任意のラベルは青色で表示されています。
必須と任意のラベル
これらのラベルのコードはJavaScriptによってHTML内にブッこんでいるので、index.html内を探しても存在しません。

具体的には、必須のラベルは以下のようなコードで挿入されており、

<span class="required">必須</span>

任意のラベルは以下のようなコードで挿入されております。

<span class="optional">任意</span>

つまり、このラベルの色を変更したい場合はmailform.css内で以下のようになっている部分を、

form#mail_form dl dt span.required {
  background: #d9534f;
  border: 1px solid #d43f3a;
}

form#mail_form dl dt span.optional {
  background: #337ab7;
  border: 1px solid #2e6da4;
}

以下のように変更すれば色を変えることができます。

form#mail_form dl dt span.required {
  background: pink;
  border: 1px solid pink;
}

form#mail_form dl dt span.optional {
  background: green;
  border: 1px solid green;
}

上記のようにコードを変更すると、画面の表示は以下のようになります。
色を変更後
色コードは「WEB色見本 原色大辞典 – HTMLカラーコード」のようなサイトを参考にすると良いでしょう。

必須や任意のラベル自体を削除してしまいたい場合は、mailform.cssで以下のようになっている部分を、

form#mail_form dl dt span.required,
form#mail_form dl dt span.optional {
  display: inline-block;
  float: left;
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 3px;
}

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

form#mail_form dl dt span.required,
form#mail_form dl dt span.optional {
  display: none;
}

上記のようにコードを変更すると、画面の表示は以下のようになります。
必須や任意を削除

初期状態では各項目名の下に英語表記があります。
項目名の英語表記

これらの英語表記を削除したい場合、index.htmlの中から以下のspan部分を削除することでも可能ですが、

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

実は、このプログラムにとってはCSSによって削除するほうがベターです。
なぜなら、このメールフォームプログラムではCSSはどのように編集しても動作エラーの原因にはならないからです。
もっと言えば、CSSファイルが存在しなくてもメールフォームプログラムは動作します。(index.htmlは編集する箇所によっては動作エラーの原因になる場合もあります)

というわけで、英語表記を削除したい場合はindex.htmlを編集するのではなく、mailform.css側で以下のようになっている部分を、

form#mail_form dl dt span {
  display: block;
  font-size: 85%;
  color: #3377ff;
}

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

form#mail_form dl dt span {
  display: none;
}

上記のようにコードを変更すると、画面の表示は以下のようになります。
英語表記を削除

初期状態ではエラーメッセージは以下のように赤色で表示されます。
エラーメッセージ
このエラーメッセージもJavaScriptによってHTML内にブッこんでいるので、index.html内を探してもそのコードは存在しません。

具体的には各入力フォームの下に以下のようなコードで挿入されています。(項目名が「名前」の場合)

<span class="error_blank">名前が入力されていません。</span>

また、メールアドレスの欄については書式のチェックが行われますので、上記コードに加えて以下のようなコードで挿入されます。

<span class="error_format">正しいメールアドレスの書式ではありません。</span>
<span class="error_match">メールアドレスが一致しません。</span>

このエラーメッセージの色を変更したい場合は、mailform.css内で以下のようになっている部分を、

form#mail_form dl dd span.error_blank,
form#mail_form dl dd span.error_format,
form#mail_form dl dd span.error_match {
  display: block;
  color: #ff0000;
  margin-top: 3px;
}

以下のように変更すればOKです。(colorblueに変更)

form#mail_form dl dd span.error_blank,
form#mail_form dl dd span.error_format,
form#mail_form dl dd span.error_match {
  display: block;
  color: blue;
  margin-top: 3px;
}

上記のようにコードを変更すると、エラーメッセージの表示は以下のようになります。
エラーメッセージの色変更後

提供サポートなど