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分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
フォームをページに追加する
フォームは、設定するだけではサイトに反映されません。
最後に、フォームをページに反映させる必要があります。
まず、「問い合わせ」という固定ページを作成します。
固定ページの作成方法は、WordPressで固定ページを作成する方法を参考にしてください。
固定ページの準備ができたら、追加したいコンタクトフォームのページを開きます。
そこに表示されている、コンタクトフォームのショートコードをコピーしてください。
それを、固定ページの任意の部分に貼り付けます。
ブロックエディタの場合：
WordPress 5.0から標準のエディタがブロックエディタになりました。
ブロックエディタの場合は、ショートコードブロックを挿入して下記のように貼り付けます。
旧エディタの場合：
WordPress 5.0以前のエディタでは、下記のように挿入します。
そしてページを更新すると、問い合わせページが作成できました。
今回は固定ページに追加しましたが、投稿記事や、テキストウィジェットにも同じく追加できます。
また、問い合わせフォームだけでなく、アンケートやクイズなど、さまざまな応用が可能です。
無料で簡単にアレンジできるので、ぜひオリジナルコンテンツを作成してみましょう。
WordPressのカスタマイズをもっとしたい場合は、WordPressのウィジェットを編集する方法もご覧ください。
こんなに手軽に設置できるんですね♪
そうだね。いろいろアレンジすることもできるから、Contact Form 7を使う場面ってかなり広そうだね♪
はい、そうですね！
WordPressを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
WordPressでのサイト制作を学習していて、このように思ったことはありませんか？
テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。
まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
