ワードプレスで自作テーマ作成-L25 お問合せページを作成する-

2020年2月26日

お問い合せフォーム

ワードプレスで自作テーマ作成シリーズ
今回は「L25 お問合せページを作成する」方法をご紹介します。

上記画像のようなお問い合せフォームになります。

今回はこちらのブログを参考にさせていただきました。

Contact Form 7をインストール

1. 管理画面の「プラグイン」→「新規追加」をクリックします。

2. 検索窓に「Contact Form 7」と入力し「今すぐインストール」をクリックし「有効化」ボタンをクリックします。

Contact Form 7のインストール

Contact Form 7の設定

1. 管理画面の「お問い合せ」→「新規追加」をクリックします。

Contact Form 7の設定

2. タイトルに「お問い合せ」と入力し、フォームに記入されている内容をすべて削除してください。

Contact Form 7の設定

3. そして以下のコードを張り付け保存をクリックします。

4. 以下のようなショートコードが生成されますので、それをコピーします。

Contact Form 7の設定

5. 固定ページなど、お問い合せフォームを表示させたい場所に張り付けてください。

固定ページにお問合せフォームを作る場合は管理画面の「固定ページ」→「新規追加」をクリックします。

固定ページの新規作成方法

6. タイトルに「お問い合せ」と入力し本文に先ほどのショートコードを張り付け保存をクリックしてください。

パーマリンクの変更も忘れずに。お問い合せ→contactなどに変更します。

お問い合せページ

お問い合わせフォームのメール設定

1. コンタクトフォームの編集画面の「メール」タブをクリックしてメールの設定をします。

お問い合せメール設定

例えば以下のように設定するといいかと思います。

 

■送信先:あなたがお問い合せを受け取るメールアドレス

■送信元:[your-name] <ワードプレスのメールアドレス>

■題名:ブログからお問い合せがありました(任意のものを入力)

■追加ヘッダー:Reply-To: [your-email](変更しない)

■メッセージ本文:

差出人: [your-name]
メールアドレス: [your-email]

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


このメールは 【あなたの会社名またはブログ名等】 (あなたのサイトアドレス) のお問い合わせフォームから送信されました

 

2. 下にスクロールすると「メール(2)を使用」と出てきますのでそれにチェックをいれます。これを設定することでお問い合せをしてくれた方に「お問い合せありがとうございました。」のような自動返信メールをすぐに送ることができます。

お問い合せメール設定

例えば以下のように設定するといいかと思います。

 

■送信先:[your-name]

■送信元:あなたの会社名やブログ名等 <ワードプレスのメールアドレス>

■題名:【自動返信】お問い合せありがとうございます

■追加ヘッダー:Reply-To: example@example.com(変更しない)

■メッセージ本文:

この度はお問い合せありがとうございます。
お問い合せ内容確認後、48時間以内にお返事をいたします。(任意のものを入力)

お名前: [your-name]
メールアドレス: [your-email]

メッセージ本文:
[your-message]


このメールは【あなたの会社名またはブログ名等】 (あなたのサイトアドレス) のお問い合わせフォームから送信されました

 

3. ここまで入力したら最後に保存をクリックしてください。

③style.cssの編集

「style.css」に以下を記入してください。

③functions.phpの編集

ContactForm7は重いのでフォームを使用するページだけに読み込ませる制限をかけます。

以下のコードを「functions.php」の一番下に記入してください。

セキュリティを高める

スパムをブロックするため、Google推奨の「reCAPTCHA」というセキュリティをプラグインで導入し完成です。「reCAPTCHA」の導入方法はこちらの記事が参考になりました。

「reCAPTCHA」とその下のコンテンツの間にスペースが欲しくなる場合があります。その場合は、「style.css」に以下を記入してください。

\記事が役に立ったらシェアしてね/
★フォローする★

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です