WordPressで問い合わせフォームを設置する方法【初心者向け】
WordPressで作成したサイトに「お問い合わせフォームを設置する方法」を初心者向けに解説した記事です。今回は【Contact Form 7】という有名なプラグインを使った方法を紹介します。フォームのカスタマイズも簡単に可能です。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
サイトを運営していく上であったら便利な機能の1つに、問い合わせフォーム機能があります。
ブログやサイトにお問い合わせフォームがあることで仕事につながったり、ユーザーの満足度アップにつながるかもしれません。
WordPressではプラグインを活用することによって、簡単にオリジナルフォームを設定できます。
今回は、有名なContact Form 7というプラグインを使って問い合わせフォームを設定する方法をお教えします。
目次
田島メンター！！よく会社案内とかのサイトにお問い合わせフォームってあるじゃないですか〜。あれってWordPressでも設置できたりしないですか〜？
できるよ。プラグインを使えばね。
なんていうプラグインですか？
Contact Form 7だよ！
プラグインを設定する
Contact Form 7をインストール・設定しましょう。
これは公式プラグインなので、プラグイン検索から設定可能です。
やり方がわからない場合は、WordPressプラグインのインストール方法の記事をご覧ください。
問い合わせフォームを設定する
Contact Form 7 を有効化すると、ダッシュボードに「お問い合わせ」項目が追加されます。
この画面で、投稿フォームを設定します。
複数の投稿フォームを作ることができます。
フォームの編集画面を開くと、このように表示されます。
ここで好みのタグを追加することで、フォームの内容を変えることができます。
また、フォームに表示する文章も自由に変更できます。
デフォルトの画面の表示は、この画像の内容です。
フォームに項目を追加する
フォーム設定画面の右側に追加できるタグの一覧があるので、追加したいものをクリックします。
すると、ポップアップパネルが表示されますので、必須項目かどうかなどをチェックして、「タグの挿入」をクリックします。
タグの前に文言などを追加します。
この変更を「保存」を押して反映させると、このように表示が変わります。
これで、フォームの設定ができました。
タグは細い設定が可能です。
公式ページに詳しい解説が掲載されていますので、参考にしてください。
フォームをページに追加する
フォームは、設定するだけではサイトに反映されません。
最後に、フォームをページに反映させる必要があります。
まず、「問い合わせ」という固定ページを作成します。
固定ページの作成方法は、WordPressで固定ページを作成する方法を参考にしてください。
固定ページの準備ができたら、追加したいコンタクトフォームのページを開きます。
そこに表示されている、コンタクトフォームのショートコードをコピーしてください。
それを、固定ページの任意の部分に貼り付けます。
ブロックエディタの場合：
WordPress 5.0から標準のエディタがブロックエディタになりました。
ブロックエディタの場合は、ショートコードブロックを挿入して下記のように貼り付けます。
旧エディタの場合：
WordPress 5.0以前のエディタでは、下記のように挿入します。
そしてページを更新すると、問い合わせページが作成できました。
今回は固定ページに追加しましたが、投稿記事や、テキストウィジェットにも同じく追加できます。
また、問い合わせフォームだけでなく、アンケートやクイズなど、さまざまな応用が可能です。
無料で簡単にアレンジできるので、ぜひオリジナルコンテンツを作成してみましょう。
WordPressのカスタマイズをもっとしたい場合は、WordPressのウィジェットを編集する方法もご覧ください。
こんなに手軽に設置できるんですね♪
そうだね。いろいろアレンジすることもできるから、Contact Form 7を使う場面ってかなり広そうだね♪
はい、そうですね！
WordPressを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
WordPressでのサイト制作を学習していて、このように思ったことはありませんか？
テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。
まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。
