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 を有効化すると、ダッシュボードに「お問い合わせ」項目が追加されます。
この画面で、投稿フォームを設定します。
複数の投稿フォームを作ることができます。
フォームの編集画面を開くと、このように表示されます。
ここで好みのタグを追加することで、フォームの内容を変えることができます。
また、フォームに表示する文章も自由に変更できます。
デフォルトの画面の表示は、この画像の内容です。
[PR] WordPressで挫折しない学習方法を動画で公開中
フォームに項目を追加する
フォーム設定画面の右側に追加できるタグの一覧があるので、追加したいものをクリックします。
すると、ポップアップパネルが表示されますので、必須項目かどうかなどをチェックして、「タグの挿入」をクリックします。
タグの前に文言などを追加します。
この変更を「保存」を押して反映させると、このように表示が変わります。
これで、フォームの設定ができました。
タグは細い設定が可能です。
公式ページに詳しい解説が掲載されていますので、参考にしてください。
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか？
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
フォームをページに追加する
フォームは、設定するだけではサイトに反映されません。
最後に、フォームをページに反映させる必要があります。
まず、「問い合わせ」という固定ページを作成します。
固定ページの作成方法は、WordPressで固定ページを作成する方法を参考にしてください。
固定ページの準備ができたら、追加したいコンタクトフォームのページを開きます。
そこに表示されている、コンタクトフォームのショートコードをコピーしてください。
それを、固定ページの任意の部分に貼り付けます。
ブロックエディタの場合：
WordPress 5.0から標準のエディタがブロックエディタになりました。
ブロックエディタの場合は、ショートコードブロックを挿入して下記のように貼り付けます。
旧エディタの場合：
WordPress 5.0以前のエディタでは、下記のように挿入します。
そしてページを更新すると、問い合わせページが作成できました。
今回は固定ページに追加しましたが、投稿記事や、テキストウィジェットにも同じく追加できます。
また、問い合わせフォームだけでなく、アンケートやクイズなど、さまざまな応用が可能です。
無料で簡単にアレンジできるので、ぜひオリジナルコンテンツを作成してみましょう。
WordPressのカスタマイズをもっとしたい場合は、WordPressのウィジェットを編集する方法もご覧ください。
こんなに手軽に設置できるんですね♪
そうだね。いろいろアレンジすることもできるから、Contact Form 7を使う場面ってかなり広そうだね♪
はい、そうですね！
WordPressを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
WordPressでのサイト制作を学習していて、このように思ったことはありませんか？
テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。
まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
