WordPressのプラグイン「Contact Form 7」で出力されたフォームをちょっとカスタマイズ──その①

メールフォームを設置した際の備忘録

WordPressで構築したサイトにプラグインの「Contact Form 7」を使ってメールフォームを設置した案件があり、Contact Form 7が出力したフォームをちょっぴりカスタマイズしたので、その備忘録を兼ねて。

カスタマイズ内容は以下のとおりで、当初の予定では一気に記事にするつもりでいたが、あまりにも長くなりそうなので小出しにする事に変更。1記事、1項目かな。

1. テキストフォーム、テキストエリアに表示される入力見本の文字色を統一
2. 住所の一部を郵便番号を元に自動入力
3. セレクト項目の文字色をテキストインプット部分、テキストエリアの色の変化に合わせる
4. チェックボックス、及びラジオボタンのON/OFFを分かりやすく＆スマホでもタップしやすく
5. ラジオボタンとテキスト入力の組み合わせ項目をできる限り分かりやすく
6. ファイルの添付のボタンをカスタマイズ
7. 利用規約に同意することで送信ボタンを活性化

サンプルページのフォームは、WordPress上で「Contact Form 7」を経由し出力されたコードの部分を通常のhtmlファイルにコピペしたもの。よって「wpcf7-」で始まるspanの各要素が追加されている事を予めお断りしておく。

尚、案件でWebフォントのNoto Sansを使っていたので、この備忘録でもGoogle Fontsが提供するNoto Sansを使う事に。ところで、IE 11でGoogle Fontsを使いたい場合には、現状（2019年12月現在）パラメータに&subset=japaneseを追加するといいらしい。

さらに、チェックボックスのチェックのアイコンにFont Awesomeを使っているため、それに関連するファイルも読み込んでいるがそのあたりの説明は割愛。

ちなみに、サンプルページ・ソースの800行目～858行目までをWordPressの「Contact Form 7」にぶち込んでもらえれば、サンプルページと同じ内容のフォームが作成できる。

placeholder（プレースホルダ）をCSSで変更

何をどうやっているかについては、サンプルページのソースを見てもらえれば分かるが、それでは身も蓋もないので、まずは「placeholder」の指定から。これはテキストインプット部分（input[type="text"]）やテキストエリア（textarea）の欄に薄い色で表示されている文字に関する設定で、この見え方を統一しようと思うが、2019年12月上旬現在「Chrome 78」と「Firefox 70」「Safari 13」は、ベンダープレフィックスなしの「::placeholder」の指定だけでいけるようだ。

ただ、Edgeについては2019年12月上旬現在のバージョン44（EdgeHTML 18）では、ベンダープレフィックスなしでOKとはいかず「::-webkit-input-placeholder」と記述しないとスタイルが適用されない。巷に溢れる情報の中にはEdgeのベンダープレフィックスは、「::-ms-input-placeholder」（-ms-の前に付くコロンが2つ。後述のIE 11用のものは-ms-の前に付くコロンが1つ）と解説しているものがあるが、少なくともEdge 44（EdgeHTML 18）では「::-webkit-input-placeholder」の記述で事足りる。

IE 11については、もちろんベンダープレフィックス付きでないとダメで「:-ms-input-placeholder」を使って指定する必要がある。さらに、IE 11ではinputで指定した文字色がplaceholderにも継承される仕様らしく、今回のサンプルページのようにinputでガッツリと文字色を決めたうえで、他の表記に合わせて:-ms-input-placeholderというセレクタだけで文字色を指定したい場合は、!importantが必須となる。

というわけで、2019年12月上旬時点でのplaceholderに関する記述は、サンプルページ・ソースの357行目から370行目までのところに該当する。以下はその部分を抜粋したもの。

    ::-webkit-input-placeholder { color: #afafaf; }
    :-ms-input-placeholder { color: #afafaf !important; }
    ::-moz-placeholder { color: #afafaf; opacity: 1; }
    ::placeholder {
      color: #afafaf;
      opacity: 1;
    }
    :focus::-webkit-input-placeholder { color: transparent; }
    :focus:-ms-input-placeholder { color: transparent; }
    :focus::-moz-placeholder { color: transparent; }
    :focus::placeholder {
      color: transparent;
    }

ところで、Chrome（Sfafariもかな？このあたりはちょっと不明）に関しては、これまで（たぶん）必要のなかった「opacity: 1」がないと、colorの値だけではFirefoxと同じように若干薄い色になるみたい。本来は公式な情報を参照して正確な情報を出せちゅー話なんだけどね…w

Firefox用のベンダープレフィックス「::-moz-placeholder」を残しているのは気分的な問題なので、お好きに。アドオンなどの問題で敢えて旧Firefoxを使う人への配慮も多少はね。

そして、364行目からの「:focus」ではじまる部分は、テキストインプット部分やテキストエリアが選択された時に文字色を透明にするためである。「テキストインプット部分やテキストエリアが選択された ＝ 焦点があっている状態 ＝ :focus」という事。color: transparent;じゃなくて、opacity: 0;でもいいと思うが、colorで設定したものはcolorで透明にしたいじゃん、ということでcolor: transparent;で指定。

尚、上記:focusの設定はIEのデフォルトの挙動と同じであるため、IE 11用に入れている:focus:-ms-input-placeholder { color: transparent; }の部分は省いても問題ない。しかし、Firefox用のベンダープレフィックスを残しているのと同じ理由で、気分的に省きたくなかったので残している。ちなみに、ChromeやFirefox、Sfariでは文字の入力を開始しないと、placeholderに設定している文字列が消えないという挙動がデフォルトらしい。