ブログを始める

【AFFINGER5】お問い合わせフォームの設置方法【画像で解説】

2020年11月20日

AFFINGER5でお問い合わせフォームをするのは簡単です。

プラグイン「Contact  Form 7」を使って設置する方法を解説します。

画像付きなので、初心者でも5分で設置できますよ。

お問い合わせフォームの設置ってめんどくさそう
5分で簡単に設置できますよ。

 

 

手順は以下の通りです。

ポイント

  • プラグイン「Contact  Form 7」をインストールする。
  • 固定ページを作る。
  • 固定ページをサイトに設置する。
画像を使って解説していきますよ。

スパム対策についても解説します。

 

 

 

 

お問い合わせフォームを設置する

お問い合わせフォームは、プラグインを使って設置しましょう。

ここではフッターに設置するやり方を解説します。

 

手順は以下の通りです。

ポイント

  • プラグイン「Contact  Form 7」をインストールする。
  • 固定ページを作る。
  • 固定ページをサイトに設置する。

 

 

 

プラグインをインストール

プラグイン「Contact  Form 7」をインストールしましょう。

「プラグイン」→「新規追加」と進み検索しましょう。

お問い合わせ1

 

 

富士山の絵のプラグイン「Contact  Form 7」インストール→有効化(activate)します。

お問い合わせ2

 

 

「Contact  Form 7」をインストールすると、ダッシュボードに「お問い合わせ」が出現します。

「お問い合わせ」から新規追加します。

デフォルトでフォームが入力されているので、そのままで大丈夫です。

好きなタイトルにして「保存」をクリックします。(タイトルは変えなくても大丈夫です。)

お問い合わせ3

 

 

ショートコードをコピーしましょう。

お問い合わせ4

 

 

 

 

固定ページを作る

「固定ページ」→「新規追加」と進んでください。

お問い合わせ5

 

 

本文に先ほどコピーしたショートコードを貼り付けます。

お問い合わせ10

 

 

 

 

 

固定ページを設置する

出来上がった固定ページを設置します。

ダッシュボードから、「外観」→「メニュー」と進んでください。

お問い合わせ6

 

「フッター(フッター用メニュー)」を選択して、「お問い合わせ」にチェックを入れて「メニューに追加」をクリックします。

お問い合わせ7

 

ヘッダーに設置したい場合は、「ヘッダー(ヘッダー用メニュー)」を選択して下さい。「

 

これで、フッターにお問い合わせフォームを設置できました。

以下の通り、フッターに「お問い合わせ」が出現しています。

お問い合わせ11

 

クリックすると以下のお問い合わせフォームに移動します。

 

 

きちんと動作するか試してみましょう。

 

お問い合わせ8

 

 

 

 

 

注意点:スパム対策をしよう

問い合わせフォームを設置すると、英語のスパムメールが届くようになります。

届いたメールを削除するのも大変なので、スパム対策をしておきましょう。

 

「reCAPTCHA」というプラグインがおすすめです。

以下の手順で設定できます。

  • 「reCAPTCHA」をインストールする
  • reCAPTCHAのサイトから「サイトキー」と「シークレットキー」を取得して、プラグイン「reCAPTCHA」に設定する。
  • 「サイトキー」と「シークレットキー」を「Contact  Form 7」にも設定する。

 

 

 

 

Contact  Form 7の設定

「お問い合わせ」→「インテグレーション」と進み、セットアップしましょう。

お問い合わせ12

 

 

 

 

「サイトキー」、「シークレットキー」を入力するだけです。

お問い合わせ13

 

 

 

 

まとめ

お問い合わせフォームを設置する手順は以下の通りです。

ポイント

  • プラグイン「Contact  Form 7」をインストールする。
  • 固定ページを作る。
  • 固定ページをサイトに設置する。

プラグイン「reCAPTCHA」などを使ってスパム対策もしっかりやりましょう。

  • この記事を書いた人

よーやん

副業ブロガー【経歴】東京薬科大学→薬局 ●副業ブログで収益6桁。●ブログで生活にゆとりができました。 ●生活の軸をブログにシフト中。●ブログ・SEO・アフィリエイト研究

-ブログを始める
-

© 2021 YOYAN BLOG Powered by AFFINGER5