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

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

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

このメールフォームを既存のサイトに組み込む場合はこのページの解説を読んでおくと、組み込み作業がスムーズにできるかもしれません。
初期状態では以下のようなデザインになっています。
注意:バージョン4.0から背景画像は白色のものに変わりました。
メールフォームの初期デザイン

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

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

この解説の対象となる人

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

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

背景を白色にしたい場合(通常版のみ)

初期状態では見た目を綺麗に見せるため、ページ全体の背景に画像を使用しています。
白色ベースの企業サイトなどに組み込む場合はこの背景画像は不要になるので、そのコードを削除する必要があります。

初期状態のstyle.cssで以下のようになっている部分を、

body{
  font-family : "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", Verdana, Arial, sans-serif;
  color : #454545;
  font-size : 90%;
  line-height : 1.8;
  background : url( '../image/bg-body.png' ) repeat 0 0;
}

以下のように変更します。(backgroundの行を削除)

body{
  font-family : "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", Verdana, Arial, sans-serif;
  color : #454545;
  font-size : 90%;
  line-height : 1.8;

}

するとページの表示は以下のように変わります。
背景画像を削除した表示
このメールフォームで使用している画像は上記の背景画像のみなので、ついでにimageフォルダごと削除してしまっても問題ありません。

メールフォームの寸法の説明

初期状態では以下のようにフォーム全体の横幅が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 );
}

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

form#mail_form{
  width : 960px;
  margin : 50px auto;
  padding : 10px 0;
  background : #ffffff;

}

狭いコンテンツ領域に組み込む場合

前述の説明のように、メールフォームの横幅は初期状態で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 );
}

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

form#mail_form{
  width : 600px;
  margin : 50px auto;
  padding : 10px 0;
  background : #ffffff;

}

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 : pink;
}
form#mail_form dl dt span.optional{
  background : green;
  border : 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;
  line-height : 1;
  padding : 8px 9px;
  border-radius : 3px;
}

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

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

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

各項目名の下にある英語表記を削除したい場合

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

これらの英語表記を削除したい場合にindex.html内の以下の部分から<span>~</span>を削除してしまうと、送信ボタンを押された際の入力チェック時に支障が出ます。
(エラーメッセージに使う項目名を自動取得する際に、このspanタグを利用しているため)
バージョン5.0からはspan要素をHTMLから削除しても正常に動作するようになりました。

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

ですから、英語表記を削除したい場合は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;
}

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

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 : deeppink;
}

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

サポートBBS

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

ダウンロード一覧へ

アンケートフォーム

ダウンロード一覧へ

BBS

ダウンロード一覧へ

その他おすすめ

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

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