WordPressプラグインの「Contact Form 7」を導入し、お問い合わせページを追加しました。
記事の誤字や内容修正、仕事の依頼、その他もろもろ…。
ブログ管理者への連絡手段は用意しておくべきです。
後回しにしていたのですが、ついに重い腰を上げて導入しました。
導入にかかったのは2〜3時間だったので、もっと早く動けば良かったです。
人間とは不思議なものですね。
Contact Form 7
「Contact Form 7」はWordPressで応募フォームを実現するためのプラグインです。
有効インストール数も500万を超えていていまだに継続的に更新されている、フォームを作るうえで鉄板のプラグインといえるでしょう。
●プラグインのページ
https://ja.wordpress.org/plugins/contact-form-7/
プラグイン有効化後に行った手順をまとめると
- WordPress管理画面の左メニュー［お問い合わせ］→［コンタクトフォーム］から新規追加
- 任意のフォーム管理名を入力
- ［フォームタブ］調整
- フォームの題名は不要だと思ったので削除
- ざっくりとした内容を簡単に把握できるようラジオボタンを追加
- ［メールタブ］調整
- フォームから題名を削除したので、メールの題名や本文から ”[your-subject]” 表記を削除
- 自動返信を有効化するため、「メール (2) を使用」にチェック
- メール・メール(2)、それぞれのメール本文の内容を調整
- ［メッセージタブ］調整
- 違和感あるテキストを調整
- 一例：「入力必須の項目が入力されていない」の内容を「※入力必須の項目です。」に変更
- プラグイン左下の［保存］ボタンをクリックして内容を確定
- お問い合わせ用の固定ページを作成
- 固定ページにContact Form 7のショートコードを入力
- CSSでフォームのデザインを調整
- フッターにお問い合わせページへのリンクを追加
- 導入完了
内容の調整
入力に悩みがちな題名を削除。
その代わり、問い合わせの概要を3つに分類してボタン選択で選べるように設定しました。
- 記事の誤字・修正報告
- 仕事の依頼
- その他
だらだら続く選択肢だと選ぶ方もめんどくさくなってしまうので、3つに絞っています。
問い合わせ理由で多そうなものと期待したいものを選択肢に含め、それ以外はすべて「その他」で集約しています。
デザインの調整
プラグインで挿入されるパーツのカラーや形式をサイトデザインに合わせました。
プラグインのパーツは作者毎にデザインされているので、ここを自分のサイトに合わせて調整しないとサイトの統一感がなくなってしまうので注意が必要です。
主に調整したCSSはこの辺りでした。
- 文字色 color
- 線色 border-color
- 角丸 border-radius
- 本文入力枠のサイズ変更を不可に resize: none;
- フォーム選択時の外枠を非表示に outline: none;
- 送信ボタン：PC表示時のみ横幅を小さく width:60%;
- 送信ボタン：中央揃え display: block; margin: 0 auto;
