Contact Form 7 カスタマイズ前編(チェックボックスのCSSなど)

WordPressプラグイン「ContactForm7」について、ブックマーク整理がてらメモしておきます。

長くなってしまったので、今回はショートコードの書き方とHTMLとCSSまで!!

今回やったこと

  • WordPressプラグイン「Contact Form 7」を使用
  • 固定ページに「Contact Form 7」のショートコードとhtml・CSSで実装
  • 注意書きは極力減らし、プレースホルダーとエラーチェックで対応する
  • リアルタイムエラーチェックの導入
  • 自動入力機能をフル活用してできるだけ手入力を減らす
  • フォームはすべてレスポンシブデザインにする
  • 送信履歴をWordpress管理画面から見られるよう「Flamingo」を導入

デザイン段階で行ったこと

1,どういうことができるのか調べてからデザインした。

こちらのページを参考にして、Contact Form 7でどこまでできるのか調べてからデザインした。

実は高性能な問い合わせフォームのプラグインContactForm7を完璧に使いこなすための設定方法・カスタマイズ方法をまとめました。法人WEBサイト担当者は必見。

Contact Form 7との付き合いは実はもう思い出せないほど長いのですが、いつもこんなビジネス的にばっちり改造していたわけではなかったので、ほんとちょっとのショートコードで足りていたんですよね。

今回一番心配だったのは、「こんな表現はできませんよ~って後から判明すること」でした。デザインしてから、まさかそういうCSS使えませんなんてオチがあったら困る。

2,見出し以外の注意書きなどを極力減らした。

プレースホルダー(入力欄の上に表示されている灰色の文字)が使えることは先程参考にしたページでわかってたので、書き方の例は注意書きではなくプレースホルダーで対応することにした。

電話番号のハイフンどうするとかは、プレースホルダーで例を示した上で、JQueryのエラーチェックを使うことにして、これも注意書きでは書かないことにした。

注意書きが多いと、利用者はめんどくさくなって入力する気がなくなるからであります。

3,郵便番号の横に「自動入力する」ボタンを置いていたが削除した。

いただいたアドバイスをもとに、ボタンを取り払って、郵便番号を入れるとそのまま下に自動入力されるようにコーディングすることにした。

Contact Form 7のインストール

こちらのページを参考にして簡単に設置。

サイト運用でのお問い合わせページは必須。wordpressプラグイン contact form 7は、メッセージを送るだけではなくアンケートフォームや企業の採用応募ページなど用途は様々。contact form 7の使い方を画像付きでわかりやすく解説します。

手順はこう。

  1. 新しいフォームを作る
  2. 設定はさておき、固定ページにぺたっとショートコードを貼る
  3. フォームにショートコードを置いて、固定ページを表示。
  4. まずはなんかそれっぽいフォームが見れることを確認。

これにより、先にフォームを固定ページに設置してしまうことで、フォームのコーディングと実際に表示される画面を同時に表示しながら、ちょっとの変更をリアルタイムに反映させながら作業ができるようになりました。

私は、Webサイトは出来上がっていく様子を見ながらちょっとずつ完成図に近付けて仕上げていきたい派。編み物とかジグソーパズルみたいな感じ。

コーディング(ショートコード編)

画面左にContactForm7の画面。画面右に固定ページを表示して二画面で作業していきました。

  1. ボタンを押す→詳細な設定はせず、フォームのタイプが合うようにしてとにかくタグを挿入
  2. 全部の欄を設置できたら、ショートコードを直接改造開始。

1,フォームのタイプをあわせてとにかくタグを挿入

先ほど紹介したページだと、ボタンを押す→必要な設定をしてタグを挿入する、という基本の流れで作っています。

フォームの入力タイプが合っていることが重要なので、

5つの入力タイプ

text :文字であれば自由に入力可能。
email:メールアドレスを入力可能 @が全角だとエラーになる
tel :電話番号やFAX番号が入力可能 半角数字とハイフンを入力できる
url :URLを入力。http://を入力しなくとも自動で補正してくれます。全角文字などが入るとエラーになります。
textarea :備考・連絡事項などでよく使われる複数行入力可能なテキストエリア。

引用元:http://work.lifemake.design/entry/2017/09/27/180000

これに合わせてタグを置いていきます。

  • 「text」=お名前、ふりがな、住所の全項目
  • 「email」=メールアドレス
  • 「tel」=電話番号
  • 「textarea」=具体的なご相談内容

2,置いたタグの中身を改造していく

まず、タグの前にある入力項目名の部分を作ります。

inputタグ編

旧バージョンの説明だと、入力項目名の部分もlabelタグで囲われて一緒に挿入されていたのが、現在のバージョンでは普通にショートコードだけになっています。

何も設定しないでテキストのボタンをおしてタグをつっこむとこういう感じになるはず。

私はほとんどをCSSでコントロールしたかったので、pタグで囲うことにしました。とりあえずinputareaとでもクラス名をつけておきます。

これを、お名前とふりがなの欄にしていきます。参考サイト何使ったか思い出せないので書きますと、

  • text*のようにタイプの横に*をつけると必須項目化できる
  • id:○○はid名。
  • class:○○はclass名。
  • id:とかclass:とか何もなくついているものがそのフォームのname(例:your-name)
    (nameはメールなどでその項目欄を指す時に使う。idやclassはJQueryやCSSの制御で使う)
  • placeholder “○○” と書くと、○○の部分がフォームの上に表示される

今回は、

  • お名前=必須項目、nameをyour-nameにし、first_lineクラスをつけ、placeholderで文字を表示
  • ふりがな=必須項目、nameをyour-kanaにし、placeholderで文字を表示

を行いました。

このnameとidとclassを混同してnameかかなかったりclassかかなかったりすると、おかしいな動かないなぁとか、おかしいなぁ効かないなあとか発生します。ご注意ください。

テキストのエリアはhtmlのタグでみるとinput[type=”text”]に相当するので、レスポンシブになるように横幅や縦幅をCSSのcalcを使って設定しました。ほんとcalcさん便利すぎて涙出る。

電話番号とメールアドレスもinputタグでtype違いなだけなので、併記すると楽です。いや~一行テキスト欄は楽だなぁ~!!

セレクトタグ編

テキスト欄だけなら簡単だったんですけどね……選べるセレクトメニューを置きたいときはこうです。

  • first_as_label を書くと、選択肢の1つ目は選択肢ではなくラベルとして認識され、中身のデータがない状態(value=””)になります。
  • 選択肢は”○○”の形でいくつでも増やすことが出来る。

セレクトタグこう見ると問題ないように見えますが、右端に出る▼のことなどがブラウザで異なるので、ブラウザ間でできるだけ差をなくすならばCSSでがんばる必要があります。

チェックボックス編(CSS応用)

ここが一番つらかったところです。

まずhtmlとショートコードはこちらです。

  • 1つ目のcheckboxという言葉は、フォームのタイプです。
  • 2つめのcheckboxという言葉は、このチェックボックス3つのグループ名です(必ず同じ名前にする)。
  • idで何番目なのかを記載します。
  • use_label_element “○○” を書くと、○○という文字がチェックボックスの右に表示されます。

問題はCSSでした。デザインしたときには深く考えていませんでした。

いっそ違うデザインにしたほうが楽なのではと悩みましたが↓

チェックボックスやラジオボタンのスタイルを苦手にしている人も少なくないと思います。シンプルなHTMLにclassを加えるだけで、さまざまなデザインのチェックボックスとラジオボタンが実装できるスタイルシ
 渋谷・新宿のホームページ制作│レベルF株式会社 
チェックボックスをcssをいじっておしゃれにする方法 | 渋谷・新宿のホームページ...
input属性へのスタイルはデザインだけではなくコンバージョン率に直結します。 今回はチェックボックス(checkbox)に対してcssのみでデザインをつける方法のご紹介です。

 

しかしもう今回はデザインの時点でこのデザインにしてしまったんで、疑似要素を使ってチェックボックスを作りました。

最初のcolor designの部分は、他の一行テキストと共通です。表示される文字のフォントやサイズ、色、背景色などを設定しています。

ポイントは.checkbox input[type=checkbox] + span.wpcf7-list-item-label:beforeです。

次。

checkboxをもう独自デザインにするのでdisplay:noneにしてしまいます。

ここから、uncheckedとcheckedに分けてCSSを記述します。

まず、チェックが入っていない時の設定(unchecked)です。

.checkbox input[type=checkbox] + span.wpcf7-list-item-label:beforeに指定することがポイントです。

これがチェックした後(checked)は、背景色が変わってチェックマークが出ればいいので、

.checkbox input[type=checkbox]:checked + span.wpcf7-list-item-label:beforeで指定します。

:checkedをつけるのをお忘れなく!!!

checkedのほうで指定した部分は、本当にcolorとbackground-colorのみです。

今回はチェックマークをCSSで作るのではなく、Font Awesome 5 Free から持ってきています。

アイコンのWebフォントです。Font Awesomeまじ便利すぎて足を向けて寝れないです。

一回ここまでにしよう。

長くなったのでここで一回区切ることにします!!!!

チェックボックスとCSSは色々あるので、ググってみると良いと思います。

contact form 7 については、ショートコードをわざわざ使わなくても、htmlで組んでしまっても行ける気がするので次は試してみます。