Wordpress

【wordpress】Contact Form 7で、お問い合わせページを作る

投稿日:2016-12-19 更新日:

 

るしる(@aromusica)です。

 

今日はWordpressでブログ、HP作成の準備といたしまして「お問い合わせページ」をプラグインの定番「Contact Form 7」で作ってみました。

 

コンタクトをとる重要な設定なので初期の段階で設置しておきましょう。

 

スポンサーリンク

インストール

WordPressダッシュボードから「プラグイン」→「新規追加」 「Contact Form 7」を検索します。

 

Contact Form 7が出てきたら「今すぐインストール」をクリックします

0

 

インストールが終わったら、プラグインを有効化しておきます。するとダッシュボード左側のメニューの中に「お問い合わせ」の項目が追加されます。

 

Contact Form 7 フォーム設定

プラグイン一覧の中にある「contact Form 7」の「設定」をクリックします。

「コンタクトフォーム1」にカーソルを合わせると「編集」が表示されるのでクリックすると、フォームが表示されるので「URL」のタグをクリックします。

 

1

 

フォームタグ生成:URL の下にある赤枠の部分 [url url_〇〇〇]をコピーしてフォームタグ生成:URLを閉じます。(〇〇〇の数字はフォーム作成ごとに違う数字が表示されます)

 

2

 

先程のフォーム画面の中にある「メールアドレス」「題名」の間に以下のコード(コピーしたものを貼りつけて)追加します。

 

<p>URL<br />

[url url-〇〇〇]</p>

 

3

 

プラグイン「Akismet」を使用している場合

WordPressに最初から入っているスパム対策のプラグイン「Akismet」を利用している方はContact Form7と連携ができます。

フォーム内の「お名前」「メールアドレス」「URL」に追加で以下のコード(赤文字)を追加してください。

 

<p>お名前 (必須)<br />
[text* your-name akismet:author] </p>

<p>メールアドレス (必須)<br />
[email* your-email akismet:author_email] </p>

<p>URL<br />
[url url-〇〇〇 akismet:author_url]</p>

 

入力が終わったら「保存」をクリックします。

 

Contact Form 7 メール設定

編集画面の「メール」をクリックして開きます。

問い合わせメールの宛先や、メッセージ内容などの変更ができます。

自分のメールアドレスに届くものです。特に変更がなければ、画面下にある「メール(2)を使う」をクリックします。

 

「メール(2)」はお問い合わせをくれた方への自動返信メールです。

メールを自分のメールアドレスに変更したり、件名や本文に追加でメッセージを付け加えることができます。

 

【例】件名:お問い合わせありがとうございます。
本文:「このメールは自動送信メールとなっております」など追加しておく。

 

設定が全て終了したら最後に「保存」をクリックします。

 

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

先程のコンタクトフォーム編集画面上、またはコンタクトフォーム一覧にショートコードが表示されているので、コピーしておきます。

 

WordPressダッシュボードから「固定ページ」→「新規追加」をクリックします。

本文に先程コピーしたコードを貼りつけるだけです.私は「お問い合わせ」と名付け、パーマリンクをcontactにしました。

 

6

入力が終わったら「公開」をクリックし、作ったページをメニューに追加しておきます。

 

プレビューで確認してみましょう。メニューバーに「お問い合わせ」の項目があり、それをクリックすると

 

7

 

こんな風にフォーム欄が完成しました!

 

まとめ

コンタクトフォームを作ると画面上に「コンタクトフォームの設定検証をする」という表示がでるので検証しておきましょう。またメール(2)自動返信メールの本文内容は、ネットショッピングなどで送られてくる文を参考にして、一言添えてみました。

一度、フォームから自分でメッセージを送ってみると、どのように届くのか、不備はないか確認出来るので確認することをオススメします。

お疲れ様でした!

 

この記事が気に入ったら
いいね ! しよう

Twitter で

    関連記事    


-Wordpress
-,

Copyright© るしるし , 2017 All Rights Reserved Powered by AFFINGER4.