Learning site for website creation

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

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

「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]

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

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

メールタグ

特別なメールタグ

あいさつ文
 
■お問い合わせ内容
 
名前
[your-name]
 
メールアドレス
[your-email]
 
お問い合わせ内容
[your-message]
 
お問い合わせフォームから自動返信されたものです

メッセージタブ

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

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

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

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

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

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

公開サイトで確認

公開サイトでフォーム送受信を確認しましょう。