Contact Form7の使い方ーWordPressプラグイン【初心者向け】

WordPressに問い合わせフォームを設置できるプラグイン【Contact Form7】の使い方を初心者向けに解説した記事です。1:フォームの内容を設定する、2:メールを設定する、3:フォームを表示するページを作るの順番で紹介。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

WordPressのプラグインの使い方を初心者向けに紹介する記事です。

今回は、WordPressに問い合わせフォームを設置できるプラグイン、Contact Form7の使い方を紹介します。

 

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

え、そうなんですか。

田島悠介

うん、プラグインを使えばね♪

 

Custom Field Templateとは

問い合わせフォームを簡単にWordPressに追加できるプラグインです。

項目も全てカスタマイズできるので、初心者でも簡単にオリジナルのフォームを作成することが可能です。

 

 

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

このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。

インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。

 

プラグインを有効化すると、ダッシュボードに「問い合わせ」というリンクが増えています。

contact1

それでは、プラグインを設定していきましょう。

最低限必要な3つのステップを紹介します。

  • 1:問い合わせフォームの内容を設定する
  • 2:メールを設定する
  • 3:問い合わせフォームを表示するページを作る

 

 

[PR] WordPressで挫折しない学習方法を動画で公開中

1:問い合わせフォームの内容を設定する

コンタクトフォームの設定画面を見てみましょう。

contact2

 

左側の設定エリアに書かれた内容が、コンタクトフォームに表示される内容です。

これを、好きな項目にアレンジしていきます。htmlで装飾することも可能です。

このコンタクトフォームは、下記のようなルールで記載されています。

お名前 (必須)<br />…フォーム上で表示される文字(<br />は改行記号)
[text* your-name]…入力フォームの形式ショートコードと、タグの識別ID

 

入力フォームの形式は、たくさんあります。追加する場合は、まず右のプルダウンをクリックします。

すると、入力フォームの設定項目が表示されるので、必要に応じてカスタマイズします。
(選択項目などの場合は、ここで入力)

 

必須項目にしたい場合は、チェックボックスにチェックを入れましょう。

この時、ショートコードが生成されます。入力フォームで表示される用と、入力フォームの内容を知らせるメールで使用する用の2パターンがあります。

contact3

 

 

コードの設定ができたら、フォーム入力エリアに記入しましょう。

これを繰り返し、カスタマイズしていきます。

contact4

 

 

 

2:メールを設定する

引き続き、手順1と同じ画面からメールの設定をします。この設定をしないと、せっかく送信された問い合わせフォームが行方不明になってしまうので要注意です。

このメールは、問い合わせフォームが送信されたら、その内容を送信するためのものです。問い合わせフォーム設定エリアの下に、メール設定エリアがあります。

 

まずは、問い合わせフォームの送信を知らせるメールの内容を決めます。HTML方式にチェックが入っていないので、普通に文章を書く感覚で記述できます。

フォーム内容を引用したい箇所に、タグを記入しましょう。

contact5

 

 

ここまで設定ができたら、ページ右上にある保存ボタンを押しましょう。

そこに表示されるショートコードを控えておいてください。

contact6

 

 

3:問い合わせフォームを表示するページを作る

問い合わせフォームを設置するページを準備しましょう。

フォームを表示したい場所に、先ほどコピーしたショートコードを貼り付けるだけでOKです。

 

好きな場所に表示できるので、ブログ投稿の末尾に記入したり、テキストウィジェットを利用してサイドバーに表示したりとアレンジ可能です。

実際に設置するとこうなります。
contact8

今回の記事は以上です。

 

WordPressの他のプラグインを使ってみたい場合は、Quick Cacheの使い方も合わせてご覧ください。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

そうですね〜♪

 

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