記事内に広告を含みます

【Contact Form7】お問合せフォームの作り方【WordPressプラグイン】

WordPressのContact Form7でお問合せフォームを作る方法

WordPressでお問合せフォームを作りたいカメ

WordPressでお問合せフォームを作りたい

WordPress(ワードプレス)でお問合せフォームを作るならContact Form7(コンタクトフォーム7)っていうプラグインを使うと比較的簡単に作ることができるよ

学び続けるウサギ

WordPressでお問合せフォームを作りたいカメ

そうなんだ〜! 便利なプラグインがあるんだね〜 早速作ってみる〜♪

「WordPress(ワードプレス)ブログにお問い合わせフォームを作りたい

 

「便利なプラグインを使って簡単にお問合せフォームを作りたい」

上記のように思われる方に役立つ記事になります。

今回はWordPress(ワードプレス)のプラグインのContactForm7を使用してお問い合わせフォームを作っていきたいと思います。

Contact Form7でのお問合せフォームの作り方

お問合せフォームの作成手順
  1. プラグインをインストール
  2. ショートコードをコピー
  3. ショートコードを貼り付け
  4. フォームを確認
  5. ページに表示させる

まずはWordPressのプラグインのContact Form 7をインストールしていきます。

①プラグインをインストール

Contact Form7でお問合せフォームを作る手順1

画面左側のメインナビゲーションのプラグイン新規追加Contact form7をインストールし有効化します。

Contact Form7でお問合せフォームを作る手順2

プラグインのインストール方法についてはWordPressのおすすめプラグイン一覧の記事を参考にしてみてください。

Contact Form7でお問合せフォームを作る手順3

インストールして有効化できたら左側のメニューバーにお問い合わせという項目がさりげなく追加されてますね。

②ショートコードをコピーする

Contact Form7でお問合せフォームを作る手順4

追加されたお問い合わせにカーソルを乗せてコンタクトフォームをクリックします。

Contact Form7でお問合せフォームを作る手順5

コンタクトフォーム1の編集をクリックしてタイトルを編集します(そのままでもOKです)。

Contact Form7でお問合せフォームを作る手順6

私の場合は「お問い合わせ」と変更して保存します。

自分用のWordPressサイトなどでしたらタイトルの名前は分かりやすければなんでも良いです。

クライアントワークなどで後から自分以外の方にフォーム内容を変更してもらいたい時などは、分かりやすい名前に変えておいた方が意思疎通がしやすくて良いですね。

Contact Form7でお問合せフォームを作る手順7

次に青色で表示されているショートコードをコピーします。

Contact Form7でお問合せフォームを作る手順8

コピーできたらメインナビゲーションの固定ページの欄の新規追加をクリックします。

③ショートコードを新規追加した固定ページに貼り付ける

Contact Form7でお問合せフォームを作る手順9

固定ページの新規追加ページにてブログのタイトルは「お問い合わせ」など見てわかるものにして、本文入力欄に先ほどコピーしたショートコードを貼り付けます。

Contact Form7でお問合せフォームを作る手順10

貼り付けたら下書き保存をします。

Contact Form7でお問合せフォームを作る手順11

右側に表示されてる固定ページの枠を選択してURLをクリックし、パーマリンクを「contact」と分かりやすく文字列を英字に変更して公開をクリックします。

公開確認画面で公開をクリックします。

Contact Form7でお問合せフォームを作る手順13

公開できたら固定ページを表示をクリックして確認してみます。

④お問い合せフォームの表示を確認する

Contact Form7でお問合せフォームを作る手順14

無事に固定ページのひとつとしてお問い合わせフォームを作ることができましたね。

宛先はデフォルトでWordPressを設定した時のメールアドレスに届く設定になっています。

Cocoon(コクーン)でのページデザインをすっきりさせる

テーマや目的にもよりますが、上記画像(WordPressテーマ:コクーン使用)のカラフルなCocoonのSNSボタン一覧などが「邪魔かな〜」と思ったのでいらない場合は消します。

「トップシェアボタン」と「ボトムシェアボタン」の固定ページのチェックマークを外して設定します。

①Cocoon設定→SNSシェア→表示ページ→固定ページのチェックマークを外す→変更をまとめて保存

②Cocoon設定→SNSフォロー→表示ページ→固定ページのチェックマークを外す→変更をまとめて保存

cocoon設定1

左側のメインナビゲーションのCocoon設定を選択し「SNSシェア」の項目をクリックします。

cocoon設定2

下の方にスクロールしていき表示ページ固定ページのチェックを外して、上部か下部にある変更をまとめて保存をクリックします。

cocoon設定3

同じ手順で「SNSフォロー」の項目も固定ページのチェックも外して変更をまとめて保存をクリックします。

cocoon設定5

確認してみるとお問い合せフォームがシンプルになりスッキリしましたね。

投稿者名を非表示にする

cocoonの投稿者名非表示1

送信ボタンの右下にある鉛筆マークの投稿者名を消したい場合は、管理画面左側のメニューバーのCocoon設定→「本文」のタブを選んで下の方へスクロールし、投稿情報表示設定 > 投稿関連情報にある、投稿者名の表示のチェックマークを外して変更をまとめて保存をクリックしてあげます。

cocoonの投稿者名非表示2

投稿日更新日も非表示にすることができます。

お問い合せフォームのページ(固定ページ)自体はできましたが、このままだと固定ページへのリンク自体がホームページにまだなくて表示されていない状態なのでメニューを作りお問い合わせフォームに遷移できるようにします。

⑤メニューを作りホームページにリンクを表示させる

メニューを表示させる位置を決める

cocoonのメニュー設定1

メインナビゲーションの外観からメニューを選択します。

cocoonのメニュー設定2

メニュー名を作成してメニューを表示させるメニューの位置を選択してメニューを作成をクリックします。

今回はホームページの一番下の方のフッターエリアに表示させたいと思います。

お問い合せフォームの固定ページをメニューに追加する

cocoonのメニュー設定3

そして左側のメニュー項目の選択欄から先ほど作った固定ページの「お問い合わせ」にチェックマークを入れてメニューに追加をクリックします(ない場合はすべて表示の項目から表示させます)。

cocoonのメニュー設定4

メニュー構造に「固定ページのお問い合わせ」が追加されたのでメニューを保存します。

cocoonのメニュー設定5

早速Webページ(ホームページ)を見てみるとフッターエリアにお問い合わせが表示されていますね。

これでお問い合わせのメニュー(リンク)をクリックすると、先ほど作ったお問い合わせの固定ページへ飛ぶことができるようになりました。

以上で設定は終了です。

PC版でフッターの「お問い合わせ」のリンクを中央に寄せたい場合は、Cocoon設定→フッター→フッター表示タイプでメニュー&クレジットを(中央揃え)を選んであげます。

他にもそれぞれお問い合せフォーム自体に、細かい設定をすることもできるので見ていきたいと思います。

Contact Form7の4つの設定タブ

Contact Form7のフォーム設定
Contact Form7の4つのタブ
  1. フォーム
  2. メール
  3. メッセージ
  4. その他の設定

Contact Form7では、「フォーム」「メール」「メッセージ(送信時などの文言変更)」「その他の設定」の4つのタブがありそれぞれ細かく設定することができますね。

①フォームの設定

Contact Form7のフォーム設定2

お問合せフォームの設定を変更したい場合は<label> </label>の中を変えることで変更できます。

Contact Form7でのルールとして[](角括弧)で囲われている部分に値が設定されているので、表示を変えたい時は[]の中を見て変えたりすることができます。

上部にある青枠で囲われているそれぞれの項目をクリックすることでそれぞれのテンプレートを編集でき自由に挿入できます。

すでに自分でコーディングしてデザインしている場合は、インプットタグなどの代わりとしてそれぞれ青枠の項目に変えてあげます。

項目名のすぐ右側に*(アスタリスク・上記参考画像で赤丸で囲まれた箇所)を入れると必須項目にすることもできます。

必須項目は入力されていないと送信できずエラー表示がでるようになります。

Contact Form7のタグ生成

フォームタグ生成

それぞれのテンプレートの項目タイプから「必須項目」にチェックを入れ名前をyour_emailなどに変えてタグを挿入をクリックし生成することもできます。

デフォルト値にテキストを入力し、下部のチェックボックスにチェックを入れることでプレースホルダーを作成することもできます。

Contact Form7のプレースホルダー生成

テキストエリアにプレースホルダーを設定

プレースホルダーで最初から例文などがあったほうがぱっと見でわかりやすいですね。

②メールの設定

Contact Form7のメール設定1
  • メール・・・・・WordPressサイトの管理者(自分)への設定
  • メール(2)・・お客様(WordPressサイトへ問い合わせた方)への設定

お問い合わせのメールが送信された時に自分への通知メールお問い合わせした方へ送られる確認メールを設定できます。

メールを送信→通知(メール)& 確認(メール(2))

メールとメール(2)がありそれぞれサイト管理者(自分)、問い合わせてくれた方(ユーザー / お客様)に向けたメール設定をすることができます。

少しややこしいですが、例えばチケットなどを申し込むと「受付しました。〜〜お待ち下さい。」などと申込と同時にメールが来るのがメール(2)で確認メールです。

なのでメッセージ本文などはそのWebサイトにあった文言に変えると良いですね。

「追加ヘッダー」は返信メールを受けて返信ボタンを押された時にメールアドレスがセットされるものなので削除して空欄でもOKです。

WordPressサイトの管理者(自分)に向けたメール設定

送信先(通知を受けたいメールアドレス)・送信元(タグでお客様が入力してくれた値など)・題名(お問い合わせのメールがありました。などの文言変更OK)などを設定することができます。

メールの設定パネルの上部あたりに、使用できる[]で囲われているメールタグの( [your-name] や [your-email] など)の項目が表示されているので、本文に挿入しながらカスタマイズしそれぞれ変更できます。

メール(2)・・自動返信メール設定

お客様(ユーザー)に向けた自動返信メールの設定

Contact Form7のメール設定2

メール設定の画面を下の方にスクロールするとメール(2)のチェックボックスが出てくるので、チェックすることでパネルを展開し設定できるようになります。

Contact Form7のメール設定3

送信先(そのままでOK)・送信元・題名・本文(お問い合わせありがとうございます。など)設定できます。

③メッセージの設定

メッセージの編集画面例

メッセージでは、さまざまな状況で入力されて表示されるメッセージを変更することができます。

変更されたメッセージ

「必須の項目を」を追加してみました

平文をメッセージ入力欄の中に入力して保存することで無事に適用されました。

状況一覧
メッセージが正常に送信された ファイルのアップロードがPHPのエラーにより失敗している
メッセージの送信に失敗した 入力された日付の形式が正しくない
入力内容に不備が見つかった 日付が最小制約日より小さい
送信がスパムと見なされた 日付が最大制約日より大きい
承諾が必要な項目が承諾されていない 入力された数値の形式が正しくない
入力必須の項目が入力されていない 数値が最小制約値より小さい
ユーザー入力が最大許容文字数を超える項目がある 数値が最大制約値より大きい
ユーザー入力が最小許容文字数に満たない項目がある クイズに対する正しい答えが入力されなかった
ファイルのアップロードが何らかの理由により失敗している 入力されたメールアドレスの形式が正しくない
アップロードされたファイルが許可されたファイル形式に適合しない 入力されたURLの形式が正しくない
アップロードされたファイルが大きすぎる 入力された電話番号の形式が正しくない

上記表のような状況になった時に、表示されるデフォルトのメッセージを変更することができて便利な機能ですね。

④その他の設定

その他の設定では、カスタマイズのためのコードを追加することができます。

あまり使うことはなさそうですね。

コンタクトフォームのデザインを変えたい場合

コンタクトフォーム(Contact form7)のデザインを変更したい場合はCSSを記述し、Contact Form7専用のクラス属性などを使ってデザインを変えることができます。

文字色、余白、送信ボタンの大きさなどを簡単に変えることができますね。

コンタクトフォーム全体のデザインを変更

/* コンタクトフォーム(Contact Form7)全体にスタイルを適用 */
.wpcf7 {
}

コンタクトフォーム全体の背景色などを変更したい場合は、上記のwpcf7というclass属性値を子テーマのスタイルシートもしくは、外観→カスタマイズ→追加CSSなどにセレクタとして指定し、変更したいプロパティ・プロパティ値をそれぞれ指定してあげます。

.wpcf7 {

background-color: #f7efd7; /* 背景色 */
color: #857a56; /* 文字色 */
border: 5px solid #bdb6a0; /* 枠線の太さ 形状 色 */
padding: 20px; /* 余白調整(上下左右) */

}

上述のようにCSSを適用すると下記のようにコンタクトフォーム全体のデザインを変更することができます。

Contact Form7全体にスタイル指定

左 :標準→右:スタイル指定

コンタクトフォームのフィールドなどを変更

それぞれコンタクトフォームの中のフィールドなどのみを変更したい場合は、下記のセレクタを使用します。

.wpcf7 input[type="text"], /* テキスト入力フィールド */
.wpcf7 input[type="email"], /* メールアドレス入力フィールド */
.wpcf7 textarea, /* 複数行テキスト入力エリア */
.wpcf7 input[type="submit"] /* ボタン入力フィールド */

{
background-color: #faf8f2; /* 背景色 */
}

一つのフィールドだけ変更

一つのフィールドだけ変更したい場合は、id(#〜)もしくはclass(.〜)をフィールドにつけてあげて変更します。

#form_btn {

background-color: #dbc07b; /* 背景色 */
color: #fcf6e6; /* 文字色 */
font-size: 100%; /* 文字の大きさ */
padding: 15px;/* 余白調整 */

}

id名などをつけたらあとは上述のように同じくプロパティを指定してCSSを記述してあげます。

送信ボタンを中央寄せにしたい

「ボタンの大きさを調整してから中央にちゃんとボタンが表示されない..orz…」ということがあったので解決方法を記述しておきます。

送信ボタンを<div>で囲んでclass属性などで中央寄せに設定し、ローダー(クリックすると送信時などにぐるぐる回るアイコン)を非表示などにすることで送信ボタンを中央寄せにできます。

ローダー

ローダー(wpcf7-spinner)

①ローダーを非表示にする場合

/* 送信ボタンを囲んで中央寄せにする */
.center {
text-align: center;
}
/* ローダーを非表示にする */ .wpcf7-spinner{
display:none;
}

②ローダーをブロック要素にする場合

/* 送信ボタンを囲んで中央寄せにする */
.center {
text-align: center;
} /* ローダーをブロック要素にして改行する */ .wpcf7-spinner{
display:block;
}

これでボタンを中央寄せにすることができました。

Contact Form7のボタンを中央寄せにする方法

左:before → 右:after

応答メッセージのスタイルを変更

/* 応答メッセージのスタイルを指定 */
.wpcf7-response-output {

}

応答メッセージのデザインを変えたい場合は、上記のクラスにスタイルを適用してあげます。

応答メッセージの表示される場所を変更

プレースホルダーの[response]をフォーム内の好きな箇所に設置(複数設置可)することで送信後に表示される応答メッセージの場所を変えることができます。

他にもよくわからなくなったらブラウザでソースを確認しながら試行錯誤すると理解しやすいです。

スパム対策の設定

GoogleサービスのreCAPTCHA(v3)と連携することもできるので、迷惑メール対策のプラグイン(Akismetなど)を入れてない場合は設定してあげましょう。

Googleアカウントを使用して作るのでアカウントをお持ちでない方はグーグルアナリティクスとサーチコンソールの設定方法の記事を参考にしてみてください。

Google analyticsとSearch Consosoleのカンタンな設定方法 【かんたん】グーグルアナリティクスとサーチコンソールの設定方法【WordPress】

Googleアカウントを登録してからこちらの「reCAPTCHAを設定」にて設定することができます。

reCAPTCHAを設定する手順

設定の手順
  • バージョン(v3)を選択
  • ドメインの追加でWebサイトであるWordPressのURLを登録
  • サイトキー(SITE KEY)シークレットキー(SECRET KEY)を取得

詳しいやり方はContact Form7でのreCAPTCHA設定方法の記事を参考にしてみてください。

contactform7でrecaptcha設定 【WordPress】Contact Form7でのreCAPTCHA設定方法

こちらを設定することで簡単にスパムボットを遮断することができるようになりますね。

まとめ:Contact Form7でラクラク・お問い合わせフォーム使おう!

コンタクトフォーム

今回はWordPress(ワードプレス)でContact Form7(コンタクトフォーム7)のプラグインを使ってお問合せフォームを作る方法をご紹介してきました。

プログラミング言語を使わなくてもプラグインを使えば簡単にWordPressサイトにてお問合せフォームができるところが便利で良いですね。

少しでも参考になりましたら幸いです。

お問い合わせフォームを作ったら「個人情報の扱い方」や「Googleアドセンスを使う」場合などに明記する為のプライバシーポリシーや、アフィリエイトをする場合は免責事項なども必須なので固定ページを作りましょう。

WordPressに元々ある「プライバシーポリシー」の固定ページを編集したり、設定→プライバシーの設定ページから新しく生成したり、すでに固定ページに作ったものがあればその固定ページを選択して変更することもできます。

プライバシーページの設定

プライバシー設定

設定→プライバシーのポリシーガイドからテキストテンプレートをコピーして編集することもできます。

参考 【雛形(ひな形)あり】プライバシーポリシーと免責事項の作り方エックスサーバー

上記のエックスサーバーのサイト記事がわかりやすいので参考にしてみてください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です