WordPress お問い合わせページの作成
WordPressのサイトにお問い合わせページを追加してみました。
お問い合わせフォームは、プラグインを使用しました。
やり方を備忘録としてメモしておきます。
1.お問い合わせページの作成
WordPress管理画面の「固定ページ」⇒「新規追加」で
お問い合わせページを作成します。
2.ナビゲーション・メニューに追加
WordPress管理画面の「外観」⇒「メニュー」で
先ほど作成したお問い合わせページをナビゲーション・メニューに追加します。
お問い合わせにチェックを入れ、メニューに追加を押します。メニュー構造にお問い合わせが追加されたら、メニューを保存します。
3.プラグイン「Contact Form 7」をインストール
お問い合わせフォームの定番プラグイン「Contact Form 7」を
インストールします。
プラグインをインストールするとWordPress管理画面に
「お問い合わせ」項目が追加されます。
この「お問い合わせ」項目を選択すると、コンタクトフォーム1という設定が
用意されているので、ショートコードをコピーします。
手順1で作成しておいた固定ページの編集画面に入り、
先ほどコピーしたショートコードを貼り付け、
更新を押して保存します。
お問い合わせページを確認すると、以下のように
お問い合わせフォームが表示されていると思います。
4.デザインの変更
必要に応じて、スタイルシートを変更してお問い合わせフォームの
デザインを調整します。
ちなみに、お問い合わせフォームのクラス名は、”wpcf7″となります。
参考までに、変更したスタイルシートを以下に載せています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* お問い合わせフォーム */ .wpcf7 input, .wpcf7 textarea {width: 100%; padding: 5px; -moz.box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box} .wpcf7 input[type="submit"] {width: 200px; padding: 10px; border: none; background-color: #e6cc1c; -webkit-appearance: none; cursor: pointer} .wpcf7 input[type="submit"]:hover {background-color: #ff8800} |
最終的に完成したお問い合わせフォームです。
5.まとめ
プラグインを使えば簡単にお問い合わせページを作成することができました。
参考になれば幸いです。
スポンサーリンク