2020.4.5 更新アイコン 2021.3.11
wordpress

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

  • php
  • WEB

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

ここではContact Form 7を使ったフォームの作り方を説明していきます。

 

手順

  1. 固定ページを作る
  2. プラグインのContact Form 7をインストールする
  3. phpファイルを作る
  4. ページへのリンクを作成

 

固定ページを作る

サイドメニューから、固定ページ > 新規追加でページを追加します。

パーマリンクを任意の名前で設定しておきます。お問い合わせページなので「contact」などで良いと思います。ここではcontact-testという名前をつけています。

 

プラグインのContact Form 7をインストールする

wordpressのプラグインより、新規追加でContact Form 7を検索してください。インストールしたら有効化します。

wordpressでお問い合わせページを作る手順〜導入編〜【Contact Form 7】

wordpressでお問い合わせページを作る手順〜導入編〜【Contact Form 7】

 

プラグインを追加すると、wordpressのサイドバメニューに「お問い合わせ」の項目が増えていますので、そこから新規作成してください。

タブが全部で4つ「フォーム」「メール」「メッセージ」「その他の設定」とあります。ここで項目の設定などを行っていきます。それぞれの設定内容をざっくり説明します。

 

フォーム

フォームの項目をここで設定します。デフォルトでは「お名前」「メールアドレス」「題名」「メッセージ本文」「送信ボタン」が設定してあります。

wordpressでお問い合わせページを作る手順〜導入編〜【Contact Form 7】

メール

お問い合わせページからメールを送信したユーザーに対して、自動で返信するメールの内容を設定します。

wordpressでお問い合わせページを作る手順〜導入編〜【Contact Form 7】

メッセージ

それぞれの状況に応じて表示させるメッセージを設定できます。

wordpressでお問い合わせページを作る手順〜導入編〜【Contact Form 7】

その他の設定

上記以外の設定をします。公式サイトで配布されているコードを追記すればカスタムできます。例えば、ログインしているユーザーだけがお問い合わせできるようにしたりなど。

 

phpファイルを作る

固定ページのスラッグと同じファイル名のphpファイルを作ります。

phpのファイル名は page-スラッグ名.php です。

 

作成したphpファイル内の表示したい箇所に以下のコードを記載します。ショートコードの部分には、先ほどContact Form 7で新規作成した際に生成されたものを入れます。

<?php echo do_shortcode('[ショートコード]');?><?php endif; ?>

 

wordpressでお問い合わせページを作る手順〜ページ作成編〜【Contact Form 7】

上記の画像を例にするとコードはこのようになります。

 

ページへのリンクを作成

ページへのリンクは以下のようにコードを書きます。

<a href="<?php echo site_url(); ?>/contact-test">お問い合わせ</a>

<?php echo site_url(); ?>というのが、現在のサイトのURLで、その下層ページなので、/contact-testと表記してあります。

 

<?php get_header(); ?>でヘッダー、<?php get_footer(); ?>でフッダーなどを読み込ませて、フォームの見た目はdivなどでクラス名をつけてcssで整えています。

 

最後に送信テストも忘れずに行いましょう。以上でお問い合わせページの作成は完了です。お疲れ様でした。

Share Please

Read this too