webデザイン

コピペで簡単♪「Contact Form 7(コンタクトフォーム7)」の設定方法

コピペで簡単♪「Contact Form 7(コンタクトフォーム7)」の設定方法
えりー
えりー
こんにちは、えりーです。

WordPress(ワードプレス)でお問い合わせフォームを設置するなら、プラグイン「Contact Form 7(コンタクトフォーム7)」が一番おすすめです。

今回は、「Contact Form 7(コンタクトフォーム7)」の設定方法を解説します。コピペ出来るコードを記載しているので、簡単なお問い合わせフォームならすぐに設置できます。

お問い合わせフォームを作る→お問い合わせフォームを設置するページを作る→メニューお問い合わせページへのリンクを追加する

という流れで設定していきます。では早速やっていきましょう!

「Contact Form 7(コンタクトフォーム7)」の設定方法

WordPress(ワードプレス)にログインします。

[プラグイン]-[新規追加]

プラグイン新規追加

検索窓に「Contact Form 7」と入力し検索。[今すぐインストール]

ContactForm7 今すぐインストール

[有効化]

有効化

[お問い合わせ]

「お問い合わせ」というメニューが追加されているので、クリックします。

お問い合わせ

「コンタクトフォーム 1」をクリックし、入力画面の設定をします

ContactForm7 設定 ContactForm7 設定

1)タイトルを付ける

「お問い合わせ」等、わかりやすい名前を付けましょう。

2)入力項目を作る

下記をコピペしましょう。

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

<label>メールアドレス(必須)
[email* mail akismet:author_email]</label>

<label>電話番号(必須)
[text* tel]</label>

<label>お問い合わせ内容(必須)
[textarea* message]</label>

内容をご確認の上、送信してください。

[submit]

必要に応じて、項目は追加してください。項目名が被るのはNGです。(項目名とは[your-name][mail]などのこと)

名前に「akismet:author」、メールアドレスに「akismet:author_email」を付けることで、スパム対策になります。プラグイン「Akismet」を有効化している必要があります。

3)[保存]ボタンをクリック

返信メールの設定

ContactForm7 メール設定

1)[メール]タブをクリック

2)送信先に[mail]と入力

ユーザーが入力したメールアドレスにメールが送信されます。

3)[題名]にメール件名を入力

わかりやすければ何でもOKですが、当サイトでは
「【SORAIRO】お問い合わせありがとうございました」としています。

4)[追加ヘッダー]に「Bcc:ご自身のメールアドレス」を入力(全て半角英数字)

自分宛にも同じメールを送信します。

「Bcc」で送信することで、自分のメールアドレスをユーザーに知らせないようにします。知らせてもOKな方は、「cc」で送信しても良いです。

5)[メッセージ本文]にメール本文を設定します

下記をコピペしましょう。「サイト名」2箇所とURLは変更してください。(他の部分も必要に応じて変更してください)

[your-name] さま

この度は「サイト名」から
お問い合わせをいただきまして、誠にありがとうございます。

下記の内容にて、お問い合わせを受付いたしました。

担当より折り返しご連絡させていただきますので、
今しばらくお待ちいただけますようお願いいたします。

※このメールアドレスは送信専用です。
ご返信いただいても対応致しかねますのでご了承ください。

────────────────────────────────
《お問い合わせ内容》

■お名前
[your-name]

■メールアドレス
[mail]

■電話番号
[tel]

■お問い合わせ内容
[message]

────────────────────────────────

お問い合わせありがとうございました。

────────────────────────────────
サイト名
https://www.●●●.com
────────────────────────────────

6)[保存]ボタンをクリック

これで「Contact Form 7」の設定は完了です!おつかれさまでした!

次に、お問い合わせフォームを設置するページ「固定ページ」で作成します。

お問い合わせフォームを設置するページを作成する方法

[固定ページ]-[新規追加]

固定ページ 新規追加

固定ページを新規追加します。

固定ページを設定する

固定ページの設定

1)タイトルを付ける

基本的には「お問い合わせ」でOKです。

2)[パーマリンク](URL)を半角英数字に変更

日本語URLだとあまり良くないので、「contact」など半角英数字に変更しましょう。

3)[下書きとして保存]ボタンをクリック

一旦、下書き保存します。

4)本文入力欄にコンタクトフォームのショートコードをコピペ

[お問い合わせ]に「ショートコード」があるので、コピーして固定ページに貼り付けます。

ショートコード

5)[公開]ボタンをクリック

ページを表示して、確認してみましょう

[ページを表示]をクリックして確認します。(パーマリンクのURLをクリックでもOK)

ページを表示 お問い合わせフォーム

これでお問い合わせページの作成は完了です!

最後に、メニューにお問い合わせページへのリンクを設置しましょう。

メニューにお問い合わせページへのリンクを設置する方法

[外観]-[メニュー]

外観 メニュー

[固定ページ]の[お問い合わせ]にチェックを入れ、[メニューに追加]

固定ページから「お問い合わせ」を選んで、メニューに追加します。

メニューに追加

[メニューを保存]

(必要であれば)メニュー名を[長押し]-[移動]で順番変更してください。

メニューの保存

最後に

WordPress(ワードプレス)のお問い合わせフォームプラグイン「Contact Form 7(コンタクトフォーム7)」の設定方法をご紹介しました。

お問い合わせフォームのプラグインの中では一番使いやすいと思いますので、ぜひ上記を参考に導入してみてくださいね!

ABOUT ME
えりー
えりー
空創デザインオフィス」代表。 フリーランスデザイナーとして、web・グラフィックデザインを行う傍ら、ホームページや広告を作りたい人への支援、web・グラフィックデザイナーの育成、ブロガー・アフィリエイターの育成等を行っている。 →プロフィールお問い合わせ空創デザインオフィス
error: Content is protected !!