Learning site for website creation

Contact form 7 の使い方

公開日:2017年11月21日

Contact Form 7 インストール

管理画面左メニュー「プラグイン」>「新規追加」

「contactform7」で検索

表示された「Contact Form 7」プラグインをインストールして有効化

コンタクトフォーム設置

管理画面左メニュー「お問い合わせ」をクリックすると現在作成されているコンタクトフォーム一覧が表示される

初期状態「コンタクトフォーム1」作成済み

「コンタクトフォーム1」をクリックして「コンタクトフォームの編集」画面を表示

編集画面上部のショートコードをコピー

管理画面左メニュー「固定ページ」>「新規追加」でお問い合わせページ用の固定ページ作成

本文に先程のショートコードをペーストして「公開」ボタンクリック

作成したお問い合わせ固定ページを表示するとコンタクトフォームが表示される

入力項目の編集

コンタクトフォームの編集画面のフォームタブで入力項目の編集

編集画面上部のパーツボタンをクリックしてショートコードを生成

例えば「テキスト」の場合は以下の画面が表示されるので、必要な項目を入力して「タグを挿入」ボタンをクリック

ショートコードが挿入される

ショートコードが挿入されるので「保存」をクリック
※パーツに使用できない名前を使うと以下のようなメッセージが表示されるのでパーツの名前を変更すること

実サイトでお問い合わせページを表示すると入力欄が表示されている

ショートコードは基本的に以下の構成

[パーツ名 値の名前]

メール送信設定

コンタクトフォームの編集画面のメールタブでメール送信先やメール本文の編集

ショートコードで使用した値の名前を使ってメール送信先や本文の内容を作成する

ショートコードは基本的に以下の構成

[パーツ名 値の名前]

メール送信先や本文に使用するショートコード

[値の名前]

メッセージ設定

Contact Form 7 が表示する各種メッセージを編集