ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > WordPress > Contact Form 7でお問い合わせ機能を実装しよう

Contact Form 7でお問い合わせ機能を実装しよう

Web制作

2022/07/20

2023/07/24

contact-form-7
この記事では、WordPressのプラグイン「Contact Form 7」を使用して、お問い合わせ機能を実装する方法について解説します。
この記事で身につく内容
  • WordPressでお問い合わせ機能を実装する方法

案件が取れなくて悩んでいるあなたへ

プログラミング案件獲得のために必要なスキルは、単に技術力だけではありません。営業力、コミュニケーション力、人脈などの幅広いスキルや要素が求められてきます。

営業からライティング、SEOまで学べるフリーランス特化型プログラミングスクールZeroPlusで、フリーランスエンジニアに必要なすべてを手に入れませんか?

  • またゼロからやり直さないといけないの?
  • 本当にフリーランスになれるの?

といった不安にも、超フレンドリーな相談員が親切に相談にのります。スクール以外のご質問もOK!

\お申し込みは30秒で終わります。/

まずは無料で相談してみる

新しい一歩を、今踏み出してみませんか?

はじめに

コーポレートサイトやランディングページなど、多くのサイトの目的やサイトにある機能として「お問い合わせ用のフォーム」というのがあります。

今回は、お問い合わせフォームをWordPressのプラグインを使用して実装する方法を解説していきます。

プラグインを使ってフォーム機能を実装する理由

お問い合わせなどのフォームを作成する際には、次のようにいくつかやり方があります。

  • GoogleFormなどの外部サービスを利用する
  • PHPなどのプログラムを自分で記述して作成する
  • WordPressのプラグインを使用する

などなど、いろいろなやり方があります。

それぞれメリットデメリットがありますが、WordPressのプラグインを利用する特性として、次の3つが挙げられます。

  • セキュリティ面がある程度保障されている
  • 難易度が比較的低い
  • ただし、カスタマイズ性が下がる

フォームには個人情報を入力することが多いですが、慣れていない人がフォームを自作するとセキュリティ周りに不安を抱えることになります。その点、プラグインを利用すれば、対策されていることが基本ですので、安心できます。

GoogleFormなどの外部サービスを利用するのも手ですが、外部サービスがダウンした時に影響を受けるリスクも抱えることになります。(2021年12月にAWSという有名なサービスがダウンして、多くの被害が出ました。)

その点を踏まえると、フォームを実装する選択肢の一つとして、WordPressのプラグインを利用するというのは有効な選択肢といえます。

 

ContactForm7を使う

今回はフォームのプラグインとして「ContactForm7」というものを使っていきます。

ContactForm7は、日本語のフォーム作成プラグインです。有名で使いやすいプラグインのため、使用する際やエラーが発生したとき、カスタマイズをしたい時に多くの参考記事があります。

ContactForm7の基本的な使い方

まずは、CotactForm7の基本的な使い方から解説していきます。

  1. CotactForm7をインストール・有効化する

  2. サイドバーに現れる「お問い合わせ」を選択する

  3. 新規追加を選択する

  4. コンタクトフォームの名前をつける

  5. コードを記述する(※記述方法は後述します

  6. 「保存」ボタンを選択する

  7. ショートコードをコピーして、固定ページや投稿ページなどに貼り付ける

フォーム用のコードを書く

CotactForm7において、書き換える部分としては、

  • ユーザーが入力するinput, textareaタグ
  • 送信ボタン(inputタグ)

が主となります。

使用するエリアとして、次のボタンを使ってタグを書き換えていきます。

例えば、次のinputタグをCotactForm7用に書き換えていきます。

<input type="text" class="contact_form_input" />

type属性に注目するとtype="text"となっているので、フォーム編集画面の「テキスト」というボタンを使います。

  1. 「テキスト」ボタンを選択する

  2. 入力欄の名前、クラス属性など必要な項目を入力する

    ※入力欄の名前は任意で、例えば「お名前」を入力する箇所なら「your-name」のようにする。

  3. HTMLタグを、出力されたタグに置き換える

このようにして、各タグを書き換えていきます。

各種タグについてはこちらのサイトが参考になります。

 

さいごに

今回は、CotactForm7について扱ってきました。

冒頭でも触れた通り、さまざまなフォームの実装方法があり、それぞれ一長一短ですので、選択肢の一つとして、提案・使用ができると良いでしょう。

また、CotactForm7は他のプラグインと合わせることで、さらに拡張できたりもするので、必要に応じて調べてみても良いと思います。

\ 学んだことをSNSでシェアしよう /

おすすめのタグ

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから