![](https://jobtech.jp/wp-content/uploads/wp1.png)
Contact form 7 の使い方
公開日:2017年11月21日
Contact Form 7 インストール
管理画面左メニュー「プラグイン」>「新規追加」
「contactform7」で検索
![](https://jobtech.jp/wp-content/uploads/ws0094.jpg)
表示された「Contact Form 7」プラグインをインストールして有効化
![](https://jobtech.jp/wp-content/uploads/ws0095.jpg)
コンタクトフォーム設置
管理画面左メニュー「お問い合わせ」をクリックすると現在作成されているコンタクトフォーム一覧が表示される
初期状態「コンタクトフォーム1」作成済み
![](https://jobtech.jp/wp-content/uploads/ws0098.jpg)
「コンタクトフォーム1」をクリックして「コンタクトフォームの編集」画面を表示
![](https://jobtech.jp/wp-content/uploads/ws0100.jpg)
編集画面上部のショートコードをコピー
![](https://jobtech.jp/wp-content/uploads/ws0099.jpg)
管理画面左メニュー「固定ページ」>「新規追加」でお問い合わせページ用の固定ページ作成
本文に先程のショートコードをペーストして「公開」ボタンクリック
![](https://jobtech.jp/wp-content/uploads/ws0101.jpg)
作成したお問い合わせ固定ページを表示するとコンタクトフォームが表示される
![](https://jobtech.jp/wp-content/uploads/ws0102.jpg)
入力項目の編集
コンタクトフォームの編集画面のフォームタブで入力項目の編集
![](https://jobtech.jp/wp-content/uploads/ws0103.jpg)
編集画面上部のパーツボタンをクリックしてショートコードを生成
例えば「テキスト」の場合は以下の画面が表示されるので、必要な項目を入力して「タグを挿入」ボタンをクリック
ショートコードが挿入される
![](https://jobtech.jp/wp-content/uploads/ws0113.jpg)
![](https://jobtech.jp/wp-content/uploads/ws0114.jpg)
ショートコードが挿入されるので「保存」をクリック
※パーツに使用できない名前を使うと以下のようなメッセージが表示されるのでパーツの名前を変更すること
![](https://jobtech.jp/wp-content/uploads/ws0108.jpg)
実サイトでお問い合わせページを表示すると入力欄が表示されている
![](https://jobtech.jp/wp-content/uploads/ws0106.jpg)
ショートコードは基本的に以下の構成
[パーツ名 値の名前]
メール送信設定
コンタクトフォームの編集画面のメールタブでメール送信先やメール本文の編集
![](https://jobtech.jp/wp-content/uploads/ws0109.png)
ショートコードで使用した値の名前を使ってメール送信先や本文の内容を作成する
ショートコードは基本的に以下の構成
[パーツ名 値の名前]
メール送信先や本文に使用するショートコード
[値の名前]
メッセージ設定
Contact Form 7 が表示する各種メッセージを編集
![](https://jobtech.jp/wp-content/uploads/ws0111.png)
同じカテゴリーのコンテンツ