本記事にピッタリな方
- ブログにお問い合わせフォームがあった方が良いって聞いた
- 作り方が分からないので教えて
- かんたんだと嬉しい
記事の信頼性
- 私はブログ歴2年以上でして、ブログ収益月間500万円以上を得ています。
ゆくゆくは企業から仕事の依頼がくるかも。
マジですか！すぐやり方を教えてください！
本記事の内容
前半
後半
今回はプラグイン有りVer、無しVerの2パターンの作り方を紹介いたしますね。
- Contact From7(プラグイン有り)
- Googleフォーム(プラグイン無し)
どちらも使った経験がありますが、とっても簡単に使えますよ。
ちなみにお問い合わせフォームが必要な理由は下記でして
- ユーザーに安心感を与える
- ユーザーにサイト内の誤りを指摘してもらえる
- 企業などから仕事の連絡がくる
- Googleの審査基準の1つとされている
- Googleが重要視する『信頼性』にかかわっている
など実はめちゃくちゃ重要なんです。
例えばあなたが企業に質問をしたいのに、お問い合わせフォームが無かったら困りますよね。
SNSやコメントはどうなのという話もありますが、登録していない人もいますしコメントが公開されてしまうのがイヤな方もいます。
なので本記事を見ていただいて、お問い合わせフォームをサクッと作っちゃいましょう!
プラグイン有り:Contact Form7
初めはプラグイン『Contact Form7』から。
デザインがちょっと古いのが玉にキズですが、WordPressならこのプラグインが一番簡単です。
では早速作り方を解説していきますね。
まずはプラグイン『Contact Form7』を『インストール』→『有効化』してください。
①お問い合わせフォーム用の固定ページを作成する。
- お問い合わせフォーム名を入力する(お問い合わせフォームなど)
- パーマリンクを設定する(contact-usなど)
- 『公開』をクリックする。
②『Contact Form7』の設定画面から、赤線部のショートコードをコピーする。
③お問い合わせフォーム用の固定ページにショートコードを貼り付ける。
④プレビュー画面。
これで完成です。一度自分で送ってテストしましょう。
問題なければグローバルナビ、フッター等にお問い合わせフォームの固定ページを設置してくださいね。
ちなみにメールの送り先を変えたい場合は、メールタブ内の『送信先』のアドレスを変更してください。
※デフォルトではWordPress初期設定時のアドレスになっています。
Contact Form7のおすすめカスタマイズ2つ
基本はデフォルトで問題ないですが、おすすめのカスタマイズを紹介いたしますね。
項目は2つです。
- スパム対策
- 自動メール返信
それでは見ていきましょう。
その1:スパム対策
Contact Form7を設置するとスパムメールが来る可能性が出てくるので対策しましょう。
Googleの『reCAPTCHA』と本プラグインを関連付けられます。
reCAPTCHAとは
ぐにゃぐちゃした文字を入力するやつとか、ブロック内の『信号機』や『横断歩道』を選択させるやつです。
ちなみに今回おすすめするのは『reCAPTHAv3』は
スパムと思われるものに対してのみ、セキュリティが発生するスグレモノです。
なのでスパム対策しつつもユーザーフレンドリーなんですよ。
さっそく説明しますね。
※前準備としてGoogleアカウントを作成しておいてください。
それではGooglereCAPTCHAのサイトを開きましょう。
①赤枠内『管理コンソール』をクリックする。
②ログイン後の画面。
- ラベル→サイト名がおすすめ。
- reCAPTCHAタイプ→『v3』を選択する。
- ドメイン→サイトのドメイン名を入力する(http://www.は不要)
- GoogleアカウントのメールアドレスになっているのでそのままでOK。
- reCAPTCHA利用条件に同意する→チェックする。
- アラートをオーナーに送信する→チェックする。
②送信後、下記画面が現れるので『サイトキー』『シークレットキー』を控えておく。
管理画面内の歯車マークをクリックすれば見られます。
③ダッシュボードに戻る。
- お問い合わせのreCAPTCHA内『インテグレーションのセットアップ』をクリックする。
④サイトキー、シークレットキーを入力後、変更を保存する。
以上でreCAPTCHAの設定は完了です!
その2:自動メール返信
自動メール返信は『ちゃんと届いていますよ～』とユーザーに安心感を与える役割をしています。
やり方を説明いたしますね。
①メールタブ内の『メール(２)を使用』をチェックする。
②下記参照。
- 題名→お問い合わせを受け付けました等に修正
- メッセージ本文→赤枠内のような文言を添える
最後に保存をすればオッケーです。
Contact Form7のお問い合わせ内容カスタマイズ4つ
次ははContactForm7のお問い合わせ内容カスタマイズです。
おすすめを4つ紹介いたしますね。
- ドロップダウンメニュー
- チェックボックス
- ラジオボタン
- ファイル添付
うまく使うとユーザーフレンドリーなお問い合わせフォームができますよ!
ちなみに正しく使うための行程が２つあります。
1.ユーザー側に見えるようにする設定
2.あなたが受け取ったメールに見えるようにする設定
ユーザー側に見えるようにする設定。
- 各項目を設定する。
- 『フォーム』内にタグが自動的に設置される。
- フォーム内に各項目を設置すると『メールタブ』内に自動的にショートコードが現れる。
- 『メッセージ本文内』にショートコードをコピペする。
この作業をやらないと『問い合わせフォームでは受け付けたけど、あなた側に正しく表示されない』現象がおこります。
それではおすすめを紹介していきますね。
ドロップダウンメニュー
ドロップダウンは選択肢が多い時に有効です。
『フォーム』内の『ドロップダウンメニュー』をクリックしてください。
設定は２つです。
- オプション→ドロップダウンメニューの選択肢を作成する。
- 空の項目を先頭に挿入する→チェックする(誤クリック時の修正に便利)
『タグを挿入』をクリック後、前述した『あなたが受け取ったメールに見えるようにする設定』を忘れないでくださいね。
完成すると下記になります。
チェックボックス
チェックボックスは複数回答可能な選択肢を作るときに有効ですよ。
設定は2つです。
- オプション→チェックボックスの選択肢を作成する。
- 個々の項目をlabel要素で囲む→チェックを入れる。
ちなみに『チェックボックスを排他化する』は複数選択できなくなるのでチェックしなくてオッケーです。
設定後は下記になります。
ラジオボタン
ラジオボタンは複数選択ができない分チェックボックスより劣るので、見た目が好きなら設置しましょう。
- オプション→ラジオボタンの選択肢を作成する。
- 個々の項目をlabel要素で囲む→チェックする。
完成図はコチラ。
ファイル添付
お問い合わせに画像などのファイル添付をしてほしい場合に有効です。
『ファイル』タブをクリックしてください。
設定は２つです。
ファイルサイズの上限
制限は特に決まっていませんが、あまりに多すぎるとサーバー負担が大きくなってしまうので5MBくらいでじゅうぶんです。
入力の仕方は
5mb
です。
受け入れ可能なファイル形式
アップロード指定できる形式
jpg、jpeg、png、gif、pdf、doc、docx、ppt、pptx、odt、avi、ogg、m4a、mov、mp3、mp4、mpg、wav、wmv
入力の仕方は
jpeg|gif|ipg
と拡張子と拡張子の間を『|』で区切ります。
そのあとショートコードをコピペするんですが、場所がいままでと違いまして
下記の『ファイル添付』内です。
完成図は下記です。
プラグイン無し:Googleフォーム
次はGoogleフォームでのお問い合わせの作り方です。
コチラの方がデザインは今風ですね。
プラグインを使わないので、不具合やサイトスピードに良い影響があるかもしれません。
それでは説明していきますね。まずGoogleフォームのサイトへ移動しましょう。
※前準備としてグーグルアカウントを作成しておいてください。
ステップ1:Googleフォームにログインする
①『Googleフォームを使ってみる』をクリックする。
②Googleアカウントにログイン後、Googleフォームの初期画面。
ステップ2:Googleフォームの設定方法
フォームの項目はいろいろ作れますが、とりあえず下記があれば十分です。
- お名前
- メールアドレス
- お問い合わせの種類
- 題名
- お問い合わせの内容
早速設定していきましょう。
①フォーム名とお名前欄の設定。
- 『お問い合わせ』と入力する。
- 『お名前』と入力する。
- 『記述式』を選択する。
- 『必須』を選択する。
- アイコンをクリックする。
②メールアドレス欄の設定。
- 『メールアドレス』と入力する。
- 『記述式』を選択する。
- 『必須』を選択する。
- アイコンをクリックする。
③お問い合わせの種類欄の設定。
- 『お問い合わせの種類』と入力する。
- 『ラジオボタン』を選択する。
- 『ご意見・ご相談』と入力する。
- 『お仕事のご相談』と入力する。
- 『その他』と入力する。
- 『必須』を選択する。
- アイコンをクリックする。
④題名欄の設定。
- 『題名』と入力する。
- 『記述式』を選択する。
- アイコンをクリックする。
※ココは必須にしなくてもOK。
⑤お問い合わせの内容欄の設定。
- 『お問い合わせの内容』と入力する。
- 『段落』を選択する。
- 『必須』を選択する。
⑥一番上に戻り、デザインの設定をする。
- アイコンをクリックする。
- テーマの色やフォントを選択する。
- 『送信』をクリックする。
ステップ3:Googleフォームをサイトに表示
①ステップ1の最後で『送信』をクリックすると下記画面になる。
- ＜＞をクリックする。
- 赤枠内をクリックする。
- 『コピー』をクリックする。
②お問い合わせフォーム用の固定ページを作成する。
- お問い合わせフォーム名を入力する
- パーマリンクを設定する。
- 『テキストモード』にする。
- 前項でコピーしたHTMLを貼り付ける。
- 『公開』をクリックする。
その後は『ダッシュボード』→『外観』→『メニュー』から、グローバルナビ等にお問い合わせフォーム用の固定ページを組み込みましょう。
以上で基本設定は終了です。
Googleフォームのちょっとしたカスタマイズ
基本設定だけでも特に問題はありませんが、これから説明するカスタマイズを実行すれば、スクロールバーが無くなって見やすくなりますよ。
変更するとこんな感じになります。
やり方を紹介しますね。
Googleフォーム用の固定ページを開き、テキストモードにします。
下記のコードがでるので、赤字部分に変更しましょう。
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeP0l67D45t7yYWhB3cUii8c7NAgzi9KwXWLLpW8oVyt5aZ4g/viewform?embedded=true" width="640" height="1300" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" frameborder="no">読み込んでいます…</iframe> |
※前半部分は皆違うので全コピペはNGです。
ポイントは2つです。
scrolling="no" frameborder="no"を加える(スクロールバーを消す)
height値を1300にする(見切れを防ぐ)
以上で見やすくなりました。
まとめ:サクッとお問い合わせフォームを作りましょう
本記事をまとめます。
おすすめのお問い合わせフォームの作り方は下記2つです。
プラグイン有り:Contact Form7
プラグイン無し:Googleフォーム
どちらでもOKですよ。
お問い合わせフォームはユーザーファーストの観点から必須です。
本記事を見ていただいてサクッと作ってくださいね。
今回は以上です。
