今回は「Contact Form 7の導入とカスタマイズ」と「コメント欄のカスタマイズ」を紹介していきたいと思います。
では早速始めていきましょう。
お問い合わせプラグイン「Contact Form 7」の導入
まずCocoonのお問い合わせプラグインとしてメジャーな「Contact Form 7」の導入を紹介します。
管理メニューの
「プラグイン」
→「新規追加」を押下します。
「Contact Form 7」で検索
→「今すぐインストール」
→「有効化」を押下します。
有効化されると管理メニューに「お問い合わせ」の項目が追加されます。
「お問い合わせ」
→「新規追加」を押下します。
コンタクトフォームの追加画面に移ります。
フォームの名前を決めてユーザー入力欄を確認します。
フォーム内容はデフォルトで
「氏名」
「メールアドレス」
「題名」
「メッセージ本文」があります。
私の設定では「題名」は不要と判断したので「題名」の項目を削除しました。
続いて「メール」タブを押下します。
ここではお問い合わせのメッセージの送信先の設定や記載内容の設定をします。
「送信先」にて受信したいメールアドレスを入力します。
(複数のアドレスを登録する場合は「,」カンマで区切ります)
「題名」は受信時の「件名になります」
「メッセージ本文」は先程入力項目から削除した「題名」を削除しました。
設定が終了するとお問い合わせのページを作成します。
作成は簡単でページ本文に「コピーしたショートコード」を貼り付けるだけです。
管理メニューの「固定ページ」
→「新規追加」を押下します。
件名を「お問い合わせ」にして「コピーしたショートコード」を本文に貼り付けて保存します。
以上でお問い合わせのページの完成です。
お問い合わせとコメント欄をコードでカスタマイズ
コメント欄の送信ボタンにマウスカーソルが乗った時にボタンの色を変化させる
コード
#commentform #submit:hover{
background: #787878;
color: #000
}
コメント欄の余計なメールアドレスとサイトURL入力削除する
コード
.comment-form-email, .comment-form-url, .comment-notes {
display: none;
}
お問い合わせの送信ボタンにマウスカーソルが乗った時にボタンの色を変化させる
コード
#formbtn:hover{
background: #787878;
color: #000;
}
色を変化させるカラーコード(#以下)はこちらでお調べください。
ではCSSコードを入力していきましょう。
管理メニューの「外観」
→「カスタマイズ」を押下します。
「追加CSS」を押下します。
各コードを貼り付けて「公開」を押下します。
続いてコードの関連付けをします。
管理メニューの「お問い合わせ」
→「コンタクトフォーム」を押下します。
先程作成したフォームを選択します。
テキストの最後の行
[submit “送信”]を
[submit id:formbtn “送信”]
として「保存」します。
以上でコード入力は終了です。
適用されているか確認してみましょう。
コメント欄から「メールアドレス」と「サイトURL」の入力欄が削除されました。
「送信ボタン」にマウスカーソルを合わせると色が変化します。
お問い合わせのページの「送信ボタン」もマウスカーソルを合わせると色が変化するようになりました。
以上でユーザーコンタクト関連のカスタマイズの紹介は終了です。
カスタマイズというよりプチカスタマイズのようなものですが、同一内容を調べている方の参考になれば幸いです。
以上
コメント