【初心者必見】contactform7を簡単にカスタマイズする方法

こんにちは、ワタルです。

今回はWordPressで簡単にお問い合わせページが作れる、【Contact Form 7】というプラグインのカスタマイズ方法をまとめてみました。

また、今回の【Contact Form 7】はプラグインなのでサイトの表示速度が遅くなる可能性もあります。

プラグインを一つでも減らしたい方のために、【Google フォーム】を使ってお問い合わせページを作成する方法もまとめています。

この記事は以下のような人におすすめ！

簡単にお問い合わせページを作りたい
Contact Form 7をカスタマイズしたい
Contact Form 7を使って必要最低限の項目だけ作りたい
Google フォームでお問い合わせページを作りたい

それではさっそくやってみましょう！

カスタマイズ後の完成形を確認しよう

まず最初に完成形を確認しましょう！

どのようなデザイン・見た目になるのか最初に知ることで、これからお問い合わせページを制作する作業がスムーズに進みます。

【Contact Form 7】をカスタマイズしたデザイン

【Google フォーム】をカスタマイズしたデザイン

【Contact Form 7】をカスタマイズする方法

Contact Form 7をカスタマイズする方法はたくさんありますが、今回は簡単なお問い合わせページを作っていきます。

①：Contact Form 7のメリット・デメリット

まずは、メリット・デメリットをしっかりと把握しましょう。

メリット

HTMLやCSSの知識がなくても簡単にお問い合わせページが作れる。

1番のメリットはこの点だと思います。

HTMLやCSSなどのコーディングの知識がなくてもある程度、見た目の整ったフォームが作れます。

最初にcontact form 7でフォームを作った時はあまりの簡単さに感動しました！

デメリット

スパムメールが届くことがある。
スパムメールを防ぐ機能はついていますが、絶対に届かない様にすることはできません。フォームを設置する以上、仕方のないことかもしれません。

②：【Contact Form 7】のインストール・有効化

次にContact Form 7のインストールと有効化にする方法です。

「ダッシュボード」→「プラグイン」→「新規追加」→「検索」で【Contact Form 7】と入力→「インストール」→「有効化」

「インストール済みプラグイン」に「Contact Form 7」があればインストールはバッチリです！

サイドバーに「お問い合わせ」の項目も追加されてますね！

③：【Contact Form 7】のフォームタブ設定

サイドバーの「お問い合わせ」の項目をクリックしたらすでに「コンタクトフォーム1」が作られているので今回はこれをカスタマイズして利用します。

「編集」をクリック、フォームの名前を「お問い合わせフォーム」に変更。

初期状態のフォームをカスタマイズします。

コード内ではHTMLが利用でき、[]で閉じられているタグには、サイト上ではチェックボックスなどが表示されます。

④：【Contact Form 7】のメールタブ設定

Contact Form 7のフォームタブ設定で作成した項目に入力された内容は、メールタグを使って取得することができます。

まずは運営者に対して、問い合わせがあったことを知らせるメールを設定しましょう。

「送信者」にはお知らせメールを受け取るメールアドレスを入力。（今回は、「kimamaniweb@gmail.com」）

「送信元」送信元メールアドレスを送信者のメールアドレスにするため、「[your-name] < [your-email] >」に変更。（今回は、「[your-name] wordpress@ohnishi-wataru.com」）

※< [your-email] >の部分は「〇〇〇〇@ドメイン名」で問題ないはずです。もしここでエラーがでしたら、こちらのサイトを参考に解決してみてください。

「題名」は「お問い合わせフォーム」からに変更。

「メッセージ本文」は基本的にはそのままで問題ないです、変更するとしたらメール本文末尾の、最後のどこから送信されたのかがわかるメッセージを変更すると良いでしょう。

以下に参考の例を記載します。

参考

差出人: [your-name] <[your-email]>
題名: [your-subject]

メッセージ本文:
[your-message]

------
このメールは kimamaniweb(気ままにWeb)のお問い合わせフォームから送信されました

⑤：【Contact Form 7】の返信用メール設定

Contact Form 7のフォームタブ、「メール(2)」でお問い合わせをしたお客様に返信する用のメールを設定します。

画面の下へスクロールして、「メール(2)を使用」にチェックを入れる。

「送信元」運営者のメールアドレスを入力します。（今回は、「気ままにWeb wordpress@ohnishi-wataru.com」）

「題名」は「お問い合わせありがとうございます」に変更。

「追加ヘッダー」Reply-To: のあとに続くメールアドレスは、このメールの返信先アドレスです。

「メッセージ本文」は問い合わせをした内容が確認できることと、問い合わせをしてくれたことに対するお礼の文章を記入しましょう。

以下に参考の例を記載します。

参考

【送信先】　[your-email]

【送信元】　[your-name] <wordpress@ohnishi-wataru.com>

【題名】　お問い合わせありがとうございます

【追加ヘッダー】　Reply-To: kimamaniweb@gmail.com

【メッセージ本文】

[your-name]様

お問い合わせありがとうございます。
このメールは自動返信メールです。

お問い合わせ内容を確認して、運営者の大西がご連絡を差し上げます。

---------------------
差出人: [your-name] <[your-email]>
題名: [your-subject]

メッセージ本文:
[your-message]

---------------------
このメールは kimamaniweb(気ままにWeb)のお問い合わせフォームから送信されました

---------------------

ご不明な点がございましたら、このメールにご返信ください。

==============================
気ままにWeb
ohnishi-wataru.com

運営者：大西彌（ohnishi wataru）

そのほか、contactform7のメッセージタブ設定で、様々な状況で用いられるメッセージを編集できます。

今回は特に変更する必要がないのでここの設定はしません。

設定が終わったら「保存」をクリックします。

⑥：【Contact Form 7】のショートコードを固定ページへ貼り付け

上部にあるショートコードをコピーして、「お問い合わせページ」へ貼り付け。

固定ページで事前に「お問い合わせ」用のページを作成しておいてください。

本文に先ほどコピーしたショートコードを貼り付けます。

ビジュアルエディタ、テキストエディタのどちらでもショートコードは機能します。

「更新」を押して保存。

実際にページで確認するとお問い合わせフォームが作成されています。

すごく簡単にお問い合わせフォームが作れましたね！

このようにWordPressのプラグインである【Contact Form 7】を使用すると手軽にお問い合わせフォームが作れますが、入力項目を増やしすぎないように注意しましょう。

せっかくお問い合わせをしてくれるユーザーが、入力項目が多いため面倒くさくなり辞めてしまう可能性もあるためです。

⑦：【Contact Form 7】動作確認

最後に正しくメールが届くか動作の確認です。

実際のお問い合わせページへいき、必要な箇所を入力して「送信」しましょう。

すると、「ありがとうございます。メッセージは送信されました。」と表示されたら送信OKです。

メールでも確認するとちゃんと届いてますね！

Contact Form 7でのお問い合わせページ作成は以上です。

【Googleフォーム】をカスタマイズする方法

次にGoogle フォームをカスタマイズする方法です！

プラグインではなく自分でお問い合わせフォームを作りたい方や、普段からGoogle フォームを使用している方にはおすすめの方法です。

①：Googleフォームのメリット・デメリット

Google フォームでの実装についても、メリット・デメリットを把握しましょう。

メリット

HTMLやCSSの知識がなくても簡単にお問い合わせページが作れる。

1番のメリットはこの点だと思います。

HTMLやCSSなどのコーディングの知識がなくてもある程度、見た目の整ったフォームが作れます。

最初にcontact form 7でフォームを作った時はあまりの簡単さに感動しました！

デメリット

デフォルトで自動返信ができない

Googleフォームのデメリットはデフォルトで自動返信ができないことです。

ですが、こちらは自分で実装すれば問題なく解決できます！

GAS(Google Apps Script)という、プログラミング言語を使用しています。

今回はコピペするだけで実装できるうようになっているので必要な方は是非、自動返信の実装をしてみましょう！

②：Googleフォーム画面を作成

最初にGoogleフォーム画面を作成していきましょう。

こちらのURLにアクセスしてください。その後、「Google フォームを使ってみる」をクリックしましょう。

まだ何もフォームを作成していないので何もない状態です、「新しいフォームを作成」の空白をクリックします。

今回は、

①お名前　　　　　：記述式 ※必須
②ごメールアドレス：記述式 ※必須
③題名　　　　　　：記述式
④お問い合わせ内容：段落

としました。「段落」にすることで何行でも記入が可能になります。

※ここの設定で一点だけ注意点！

各項目の右下にある縦3つに並んでる点をクリックします。さらに「回答の検証」というのが表示されるのでクリック。

すると、お問い合わせ時のルール設定ができます。

「お名前」の項目は、テキスト、次を含むでOK
「メールアドレス」の項目は、テキスト、メールアドレスでOK

こうすることで間違って「お名前」にメールアドレスを入力したり、「メールアドレス」にお名前を入力するなどのミスが防げます。

フォーム画面が「デフォルトの紫色では味気ないな〜」と感じたら上部にある「テーマをカスタマイズ」をクリックしてテーマオプションで変更できます。

テーマの色や背景色、フォントスタイルまで変更できるのでサイトの雰囲気にあったデザインに変更しましょう！

また、「テーマをカスタマイズ」の右にある目のマーク「プレビュー」で実際に表示されるフォーム画面も確認できます。

フォーム画面の設定はこれで完了です！

③：Googleフォームとスプレッドシートの連携方法

次はGoogle フォームとスプレッドシートの連携方法についてです。

「回答」のタブをクリックします。
右側、緑色のスプレッドシートアイコン（スプレッドシートの作成）をクリック。

新しいスプレッドシートを作成にすでにチェックが入っていると思います。
ここでついでにフォームの名前も変更しましょう。例:お問い合わせフォーム（回答）

「作成」をクリックすると自動的にスプレッドシートに遷移しましたね！

フォームの名前も変更されているのを確認できたと思います。

Google フォームとスプレッドシートの連携方法はたったこれだけです、簡単ですね！

④：Googleフォームで自動返信を追加

Googleフォームで自動返信ができるようにして、デメリットを解消です。

コピペするだけで問題ないのでさくっと作りましょう！

上部にある「ツール」タブから「スクリプトエディタ」をクリック。

すると、GASを記入するエディタ画面に遷移します。

プロジェクト名は自由に決めてください。今回は「お問い合わせ自動返信」をそのまま英語にして「contact_auto_reply」にしました。

エディタ内に、下記のコードをコピペするだけでOKです。

GAS

function onFormSubmit(e) {
// フォームの回答を取得
var name = e.namedValues['お名前'][0];
var email = e.namedValues['メールアドレス'][0];
var title = e.namedValues['題名'][0];
var message = e.namedValues['お問い合わせ内容'][0];

// 自動返信メール件名
var subject = 'お問い合わせいただきありがとうございました。';

// 自動返信メール本文
var body = name + '様\n' +
'\n' +
'この度はお問い合わせいただき、誠にありがとうございました。' +
'\n' +
'後日、担当よりご連絡させていただきますので\n' +
'よろしくお願い申し上げます。\n' +
'\n' +
'─────────────────────────\n' +
'ご送信内容の確認\n' +
'─────────────────────────\n' +
'\n' +
'【お名前】\n' +
name + '\n' +
'\n' +
'【メールアドレス】\n' +
email + '\n' +
'\n' +
'【題名】\n' +
title + '\n' +
'\n' +
'【お問い合わせ内容】\n' +
message;