Learning site for website creation

p01-1:お問い合わせフォーム「Contact Form 7」

  • 投稿日:2018年11月08日
  • 更新日:2018年11月19日

「Contact Form 7」を使ってお問い合わせフォームを作成します。

「Contact Form 7」をインストールし有効化すると左メニューに「お問い合わせ」が表示されます。

お問い合わせフォーム作成

管理画面「お問い合わせ」>「コンタクトフォーム」をクリックするとコンタクトフォーム一覧が表示されます。

初期状態でサンプルの「コンタクトフォーム1」が存在しています。

「新規追加」をクリックして新しいコンタクトフォームを作成します。

タイトル

今回タイトルは「商品お問い合わせ」にします。

フォームタブ

「フォーム」タブでお問い合わせ項目を作成します。

タグの使い方

例)

<label> お名前 <span class="Required">必須</span>
    [text* your-name placeholder "例)田中 太郎"] </label>

<label> メールアドレス <span class="Required">必須</span>
    [email* your-email placeholder "例)contact@example.com"] </label>

<label> お問い合わせ内容 <span class="Required">必須</span>
    [textarea* your-message] </label>

[submit "送信"]

メールタブ

「メール」タブでメールの内容を作成します。

会社担当者が受け取るメール

 

 

メールタグ

特別なメールタグ

例)

差出人: [your-name] <[your-email]>

名前
[your-name]

メールアドレス
[your-email]

お問い合わせ内容
[your-message]

送信者IPアドレス
[_remote_ip]

送信者ユーザエージェント情報
[_user_agent] 

送信日時
[_date] [_time] 

-- 
このメールは サイト名 (http://localhost/lesson1) のお問い合わせフォームから送信されました

お問い合わせした人への自動送信メール

「メール(2)」を使用にチェックを入れます。

メールタグ

特別なメールタグ

例)

あいさつ文

■お問い合わせ内容

名前
[your-name]

メールアドレス
[your-email]

お問い合わせ内容
[your-message]

-- 
このメールは サイト名 (http://localhost/lesson1) のお問い合わせフォームから自動返信されたものです

メッセージタブ

「メッセージ」タブでお問い合わせ時のメッセージを作成します。

 

すべての設定が終わったら「保存」ボタンをクリックします。

[ ] で囲まれたショートコードが表示されるのでコピーします。

お問い合わせページを作成

固定ページでお問い合わせページを作成します。

本文のお問い合わせ表示したいところに先程コピーしたショートコードをペーストします。

公開サイトで確認