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

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

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

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

【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 : 80%;
  line-height : 1.8;
  background : url(../image/bg-body.jpg) 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 : 80%;
  line-height : 1.8;

}

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

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

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

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

form#mail_form{
  width : 600px;
  margin : 50px auto;
  padding : 10px 0;
  background : rgba(255, 255, 255, 0.45);
  border : 1px solid #cccccc;
  border-radius : 7px;
  text-shadow : 0px 1px 0px #ffffff;
}

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

form#mail_form{
  width : 600px;
  margin : 50px auto;
  padding : 10px 0;
  background : rgba(255, 255, 255, 0.45);

  text-shadow : 0px 1px 0px #ffffff;
}

必須・任意のラベルの色を変更したい場合

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

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

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

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

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

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

form#mail_form dl dt span.required{
  background : rgba(255, 0, 0, 0.8);
}
form#mail_form dl dt span.optional{
  background : rgba(0, 0, 255, 0.8);
}

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

form#mail_form dl dt span.required{
  background : pink;
}
form#mail_form dl dt span.optional{
  background : green;
}

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

必須・任意のラベルを削除したい場合

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

form#mail_form dl dt span.required,
form#mail_form dl dt span.optional{
  display : inline-block;
  float : left;
  font-weight : bold;
  color : #ffffff;
  padding : 3px 5px;
  border-radius : 3px;
  text-shadow : 0px -1px 0px #222222;
}

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

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

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

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

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

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

<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>名前が入力されていません。</span>

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

form#mail_form dl dd span{
  display : block;
  color : #ff0000;
}

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

form#mail_form dl dd span{
  display : block;
  color : deeppink;
}

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

添付ファイル機能付きメールフォーム

サイト内を検索
サイト運用事例
ダウンロード

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

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