Web

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

2020年9月5日

contactform7を簡単にカスタマイズする方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【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」があればインストールはバッチリ

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

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

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

コンタクトフォーム1

サイドバーの「お問い合わせ」の項目をクリックしたらすでに「コンタクトフォーム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)を使用」にチェックを入れる

画面の下へスクロールして、「メール(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

すると、「ありがとうございます。メッセージは送信されました。」と表示されたら送信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

プロジェクト名は自由に決めてください。今回は「お問い合わせ自動返信」をそのまま英語にして「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;

// メール送信
MailApp.sendEmail({
to: email,
subject: subject,
body: body
});
}

自動返信に必要な返信先メールアドレスとお名前、お問い合わせ内容をフォームの回答から取得、メール送信しているというシンプルな内容です!

「保存」を忘れずにクリック

入力ができたら「保存」を忘れずにクリックしましょう。

次に、このスクリプトを実行するタイミング(トリガーといいます)を指定します。

「時計」マークの現在のプロジェクトのトリガーをクリック

メニューの「時計」マークの現在のプロジェクトのトリガーをクリック。

「トリガーを追加」をクリック

また、画面が遷移して左下にある「トリガーを追加」をクリックします。

「フォーム送信時」に変更

ポップアップが表示されて「contact-auto-reply のトリガーを追加」(ご自身で付けたプロジェクト名が入ります)とでてきます。

イベントの種類を選択を「フォーム送信時」に変更。

最後に保存ボタンを押して完了です。

アカウントの認証画面が表示される場合がありますが、スプレッドシートへの追記やメール送信といった許可を求めているのです。すべて許可で問題ないです。

⑤:Googleフォームのコードを固定ページへ貼り付け

後は、作成したGoogleフォームのコードを固定ページへ貼り付けましょう!

右上の「送信」ボタンをクリック

先ほど作成したGoogleフォームのページへ戻り、右上の「送信」ボタンをクリック。

フォームを送信

すると「フォームを送信」というポップアップが表示されますので、送信方法の「HTML形式」を選択します。

サイズはそのままでも良いのですが、高さを調整するとスクロールすることなく表示されます。今回は高さを900ピクセルで設定

最後に「コピー」をクリック。

コピーしたコードを貼り付ければOK

そして、WordPressを開いて、メニューのタグから「固定ページ」を選択。「ショートコード」にて先ほどコピーしたコードを貼り付ければOKです!

⑥:Googleフォーム動作確認

Googleフォームでも正しくメールが届くか動作の確認をしましょう!

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

「回答を記録しました。」と表示されたら送信OK

すると、「回答を記録しました。」と表示されたら送信OKです。

Googleフォームの方がメールの内容がシンプル

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

Googleフォームの方がメールの内容がシンプルなので見やすいです。

Googleフォームでのお問い合わせページ作成は以上

スプレッドシートにもちゃんとお問い合わせ内容が連携されています!

Googleフォームでのお問い合わせページ作成は以上です。

まとめ

WordPressで簡単にお問い合わせページが作れる、【Contact Form 7】と【Google フォーム】のカスタマイズ方法でした!

少しボリュームが多いですが、自分のサイトに合った方法でお問い合わせページを作ってもらえれば良いかと思います。

【Contact Form 7】を使うべき人

  • プラグインで簡単にお問い合わせページを作りたい
  • GASなどのプログラミング言語を使いたくない

【Google フォーム】を使うべき人

  • サイトの表示速度を遅くしたくない
  • お問い合わせ内容をまとめたい(スプレッドシートと連携)

以上です、みなさんのサイト制作に少しでも役立てれば幸いです。

-Web

© 2021 気ままにWeb