WordPressで問い合わせフォームを設置する方法【初心者向け】

WordPressで作成したサイトに「お問い合わせフォームを設置する方法」を初心者向けに解説した記事です。今回は【Contact Form 7】という有名なプラグインを使った方法を紹介します。フォームのカスタマイズも簡単に可能です。

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

サイトを運営していく上であったら便利な機能の一つに、問い合わせフォーム機能があります。ブログやサイトにお問い合わせフォームがあることで仕事につながったり、ユーザーの満足度アップにつながるかもしれません。

WordPressではプラグインを活用することによって、簡単にオリジナルフォームを設定することができます。

 

今回は、有名なContact Form 7というプラグインを使って問い合わせフォームを設定する方法をお教えします。

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

 

大石ゆかり

田島メンター!!よく会社案内とかのサイトにお問い合わせフォームってあるじゃないですか〜。あれってWordPressでも設置できたりしないですか〜?

田島悠介

できるよ。プラグインを使えばね。

大石ゆかり

なんていうプラグインですか?

田島悠介

Contact Form7だよ!

 

プラグインを設定する

Contact Form 7をインストール・設定しましょう。

これは公式プラグインなので、プラグイン検索から設定可能です。

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

 

 

問い合わせフォームを設定する

Contact Form 7 を有効化すると、ダッシュボードに「お問い合わせ」項目が追加されます。

form1

 

この画面で、投稿フォームを設定します。

複数の投稿フォームを作ることができます。

form2

 

フォームの編集画面を開くとこのように表示されます。

form3
ここで好みのタグを追加することで、フォームの内容を変えることができます。また、フォームに表示する文章も、自由に変更することができます。

 

デフォルトの画面の表示は、この画像の内容です。

form4

 

 

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

フォームに項目を追加する

フォーム設定画面の右側に追加できるタグの一覧があるので、追加したいものをクリックします。

すると、タグが出力されますので、それをフォームの任意の位置に追加します。

form5

 

この変更を「保存」を押して反映させると、このように表示が変わります。

form6

これで、フォームの設定ができました。

タグは細い設定が可能です。公式ページに詳しい解説が掲載されていますので参考にしてください。

 

 

フォームをページに追加する

フォームは、設定するだけではサイトに反映されません。最後に、フォームをページに反映させる必要があります。

 

まず、「問い合わせ」という固定ページを作成します。

固定ページの作成方法は、WordPressで固定ページを作成する方法を参考にしてください。

 

固定ページの準備ができたら、追加したいコンタクトフォームのページを開きます。

そこに表示されている、コンタクトフォームのコードをコピーしてください。

form7

 

それを、固定ページの任意の部分に貼り付けます。

form8

 

そしてページを更新すると、問い合わせページが作成できました。
form9

 

今回は固定ページに追加しましたが、投稿記事や、テキストウィジェットにも同じく追加できます。

また、問い合わせフォームだけでなく、アンケートやクイズなど、さまざまな応用が可能です。
無料で簡単にアレンジできるので、ぜひオリジナルコンテンツを作成してみましょう。

WordPressのカスタマイズをもっとしたい場合は、WordPressのウィジェットを編集する方法もご覧ください。

 

大石ゆかり

こんなに手軽に設置できるんですね♪

田島悠介

そうだね。色々アレンジすることもできるから、Contact Form7を使う場面ってかなり広そうだね♪

大石ゆかり

はい、そうですね!

 

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