# WordPressでコンタクトフォームを設置したいならこれ!!Contact Form 7のインストール方法

URL: https://webrandum.net/contact-form-7/
公開日: 2017-01-04
更新日: 2020-04-11
カテゴリー: コーディング
タグ: ContactForm7, WordPress, WordPressプラグイン
出典: Webrandum（著者: サイトウ マサカズ）

そういえばこのブログ…お問い合わせフォーム無いな。

それどころかアバウトページもカテゴリ一覧ページもサイトマップも本当に何も無い！

まだ始めて間もないから仕方ないと言ってしまえばそれまでですが、流石に作っていこうという事で少しづつ作っています。

というわけで今回はWordPressプラグインを使用してお問い合わせフォームを設置します。

プラグインといえば以前「[WordPressを初めて最初に導入したプラグイン達](https://webrandum.net/wordpress-first-plugins/)」という記事を投稿した事があるので便利なプラグインを色々見てみたい方は是非そちらもご覧ください。

[WordPressのプラグインはどれを入れたら良い？とりあえず最初に導入をオススメする...](https://webrandum.net/wordpress-first-plugins)

## 使用するのはContact Form 7

今回はContact Form 7というWordPressプラグインを使用してお問い合わせフォームの設置を行います。

WordPressにお問い合わせフォームを追加するプラグインは他にも色々あるのですが、このプラグインは充実したお問い合わせフォームを簡単に作って設置できる。その上国産のプラグインという事で圧倒的な人気を誇っています。

ちなみにContact Form 7の[公式サイトはこちら](http://contactform7.com/ja/)

[Contact Form 7](http://contactform7.com/ja/)

## インストール

それでは早速インストールしてみましょう。

### 管理画面からインストールする方法

WordPress管理画面の「プラグイン」メニューの「新規追加」をクリックして、右上の検索バーで「Contact Form 7」と検索します。

![ContactForm7_インストール](https://webrandum.net/mskz/wp-content/uploads/2017/01/contctform7_install.png)

いかにも国産という感じの富士山のアイコンが目印です。

「今すぐインストール」をクリックしてインストール。その後ボタンが「有効化する」に変化するのでそのボタンをクリックして有効化すれば完了です。

### Zipファイルをアップしてインストールする方法

Zipファイルをアップロードしてインストールしたい場合は[WordPress.orgのPlugin DirectoryのContact Form 7のページ](https://wordpress.org/plugins/contact-form-7/)へ行き、ダウンロードボタンを押してContact Form 7のZipファイルをダウンロードします。

[appbox wordpress contact-form-7]

ZipファイルをダウンロードしたらWordPressの管理画面の「プラグイン」メニューの「新規追加」をクリックして上部にある「プラグインのアップロード」からZipファイルをアップロードしてインストール、有効化すれば完了です。

![WordPress_プラグイン_アップロード](https://webrandum.net/mskz/wp-content/uploads/2017/01/WordPress_plugin_upload.png)

## お問い合わせフォームを作成する

さてプラグインの導入が完了したらお問い合わせフォームを作成していきましょう。

WordPress管理画面のサイドバーに新しく「お問い合わせ」という項目が増えているのでそこをクリックします。

クリックしたら下の画像のような画面になります。

インストール時点で既に1つサンプルのフォームが作成されてますね。

1から作成する場合は上の「新規追加」ボタンから作成が可能ですが、今回は既に作成されている「コンタクトフォーム1」を編集して使用する事にしましょう。

![ContactForm7_一覧](https://webrandum.net/mskz/wp-content/uploads/2017/01/contactform7_list.png)

「コンタクトフォーム1」の上にマウスカーソルを持ってくると「編集」というリンクが現れるのでそれをクリックして、フォームの編集を行います。

### フォーム

![ContactForm7_フォーム設定](https://webrandum.net/mskz/wp-content/uploads/2017/01/contctform7_form.png)

まず初めに表示されるのは「フォーム」タブです。

必要そうな項目は既に入っていますね。

新たに項目を追加したい場合は上の方にあるボタンをクリックして必要事項を入力するだけの簡単な作業で追加できます。

ちなみに僕の場合は「メッセージ本文」を「本文」、「題名」を「件名」に表記を変更しました。

特に意味はありません。好みの問題です。

項目の追加が完了したら上の方の「メール」タブをクリックして次の項目に移動しましょう。

### メール

![ContactForm7_メール設定](https://webrandum.net/mskz/wp-content/uploads/2017/01/contactform7_mail.png)

お次は「メール」タブです。ここではお問い合わせフォームから発信されたメッセージが、どのメールにどんな形で送信されるのかを設定する事ができます。

「送信先」には自分のメールアドレスを入力して他は初期設定のままで大丈夫でしょう。

ちなみにタグの部分にはそれぞれお問い合わせフォームで入力された内容が入ります。

- [your-name]→お名前

- [your-email]→メールアドレス

- [your-subject]→題名

- [your-message]→本文

### メッセージ

![ContactForm7_メッセージ設定](https://webrandum.net/mskz/wp-content/uploads/2017/01/contactform7_message.png)

「メッセージ」タブでは、基本的に送信ボタンの下に表示されるメッセージの設定が可能です。

なんかもうデフォルトの設定で充分すぎる気がしますね。

何かこだわりがある方は変更してみましょう。

僕はこのままで行く事にしました。

最後に「その他の設定」というタブがありますが、ここはちょっとマニアックな設定になると思いますので今回は割愛します。

全ての設定が完了したら右の方にある「保存」ボタンを押して保存しましょう。

## 固定ページにフォームを表示させる

さてフォームの設定が終わり、保存が完了したらタイトルの下にあるショートコードをコピーしましょう。

(ちなみにタイトルは分かりやすいようにContactに変更しました)

![ContactForm7_ショートコード](https://webrandum.net/mskz/wp-content/uploads/2017/01/contact-form_shortcode.png)

固定ページを作成してそこにショートコードをペーストするだけでページにお問い合わせフォームが表示されます。

本当に簡単に表示させれましたね。

![ContactForm7_ページ表示](https://webrandum.net/mskz/wp-content/uploads/2017/01/contctform7_page.png)

使用しているテーマによって表示が変わるので調整してみましょう。

僕の使用しているテーマだとボタンが中央揃えになっていたのでCSSで調整しました。

![ContactForm7_Style変更](https://webrandum.net/mskz/wp-content/uploads/2017/01/contaactform_before_after.jpg)

ちなみに固定ページじゃなくて記事内に表示させる事も可能です。

記事内に表示させたい場合は記事内にショートコードをペースとするだけ。

(↓こんな感じになります)

[contact-form-7 id=”253″ title=”Contact”]

## さいごに

めちゃくちゃ簡単にお問い合わせフォームが作成できましたね。

注意点としましては、プラグインを削除したり無効化したりするとショートコードがただの文字列になってしまうという点です。まあこのプラグインを削除したりしない限り大丈夫ですけどね。

あと「メール」の送信先をきちんと設定しておかないと折角送ってもらったメッセージにも気がつく事ができません。念のためテストしておいた方がいいでしょう。

ちなみに僕もテストで1回お問い合わせフォームを使用してみました。

![ContactForm7_テスト送信](https://webrandum.net/mskz/wp-content/uploads/2017/01/contactform_test.png)

ちゃんとメールきてますね。よかったよかった。

作成したお問い合わせページは[こちら](https://webrandum.net/contact/)になります。