Contact Form7の使い方ーWordPressプラグイン【初心者向け】
WordPressに問い合わせフォームを設置できるプラグイン【Contact Form7】の使い方を初心者向けに解説した記事です。1:フォームの内容を設定する、2:メールを設定する、3:フォームを表示するページを作るの順番で紹介。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
WordPressのプラグインの使い方を初心者向けに紹介する記事です。
今回は、WordPressに問い合わせフォームを設置できるプラグイン、Contact Form7の使い方を紹介します。
なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

田島メンター!!お客様から問い合わせフォームのあるサイトを作りたいっていう案件がきたんですけど・・・

問い合わせフォームだったらWordPressでも作れるよ。

え、そうなんですか。

うん、プラグインを使えばね♪
Custom Field Templateとは
問い合わせフォームを簡単にWordPressに追加できるプラグインです。
項目も全てカスタマイズできるので、初心者でも簡単にオリジナルのフォームを作成することが可能です。
プラグインをインストールする
このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。
インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。
プラグインを有効化すると、ダッシュボードに「問い合わせ」というリンクが増えています。
それでは、プラグインを設定していきましょう。
最低限必要な3つのステップを紹介します。
- 1:問い合わせフォームの内容を設定する
- 2:メールを設定する
- 3:問い合わせフォームを表示するページを作る
[PR] WordPressで挫折しない学習方法を動画で公開中
1:問い合わせフォームの内容を設定する
コンタクトフォームの設定画面を見てみましょう。
左側の設定エリアに書かれた内容が、コンタクトフォームに表示される内容です。
これを、好きな項目にアレンジしていきます。htmlで装飾することも可能です。
このコンタクトフォームは、下記のようなルールで記載されています。
お名前 (必須)<br />…フォーム上で表示される文字(<br />は改行記号)
[text* your-name]…入力フォームの形式ショートコードと、タグの識別ID
入力フォームの形式は、たくさんあります。追加する場合は、まず右のプルダウンをクリックします。
すると、入力フォームの設定項目が表示されるので、必要に応じてカスタマイズします。
(選択項目などの場合は、ここで入力)
必須項目にしたい場合は、チェックボックスにチェックを入れましょう。
この時、ショートコードが生成されます。入力フォームで表示される用と、入力フォームの内容を知らせるメールで使用する用の2パターンがあります。
コードの設定ができたら、フォーム入力エリアに記入しましょう。
これを繰り返し、カスタマイズしていきます。
2:メールを設定する
引き続き、手順1と同じ画面からメールの設定をします。この設定をしないと、せっかく送信された問い合わせフォームが行方不明になってしまうので要注意です。
このメールは、問い合わせフォームが送信されたら、その内容を送信するためのものです。問い合わせフォーム設定エリアの下に、メール設定エリアがあります。
まずは、問い合わせフォームの送信を知らせるメールの内容を決めます。HTML方式にチェックが入っていないので、普通に文章を書く感覚で記述できます。
フォーム内容を引用したい箇所に、タグを記入しましょう。
ここまで設定ができたら、ページ右上にある保存ボタンを押しましょう。
そこに表示されるショートコードを控えておいてください。
3:問い合わせフォームを表示するページを作る
問い合わせフォームを設置するページを準備しましょう。
フォームを表示したい場所に、先ほどコピーしたショートコードを貼り付けるだけでOKです。
好きな場所に表示できるので、ブログ投稿の末尾に記入したり、テキストウィジェットを利用してサイドバーに表示したりとアレンジ可能です。
実際に設置するとこうなります。
今回の記事は以上です。
WordPressの他のプラグインを使ってみたい場合は、Quick Cacheの使い方も合わせてご覧ください。

単純なフォームだけじゃなくて、チェックボックスとかも設置できるのっていいですね♪

そうだね。要望に応じて設置場所を変更できるのも良いね♪

そうですね〜♪
[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。