コピペでWordPressにフォームを作成!Contact Form 7の使い方|カスタマイズ方法とコードまで配布

  • このエントリーをはてなブックマークに追加

WordPressをただの情報発信ツールとしてだけでなくマーケティングで活用をするのならば、問い合わせフォームは必ず必要になってきます。

とりあえずのフォームならば無料で外部に作れるフォームアンサーとかありますが、やはり一番ベストなのはウェブサイト内にフォームを設置することです。

もちろん!WordPress内に自作や有料のフォーム作成ができるメルマガシステムなどを使ってフォームを作成するのも可能ですが多少なりともHTMLやCSSなど専門的な知識がないと綺麗に作れなかったりします。

しかし、Contact Form7(コンタクトフォーム)というプラグインを使えば、専門知識がなくても簡単にある程度綺麗な問い合わせフォームや診断フォームなど何でも作れます。

そこで、ここではcontact foamの使い方と設定方法。

だけではなく、オシャレなフォームを作るためのカスタマイズの仕方までご紹介していこうと思います。ただフォームを設置するだけじゃなくてどうせならばユーザービリティーの高いフォームを作りたいかたも是非ご覧になってください。

1.「Contact Form 7」をインストールする

「Contact Form 7」と入力するとたくさんの似たようなプラグインが出てきますが、以下のようにContactForm7と表記されているものを選択してください。

間違えてインストールしないように注意してください。


  ※プラグインのインストール方法を知らない方に関しては、WordPressプラグインの取扱説明書~インストール・有効化・停止・削除~の記事をご覧になってください。毎度のことですが、インストールしたら「有効化」するのを忘れないようにしましょう。

インストールが完了し有効化をしたらフォームを設置していきましょう。

2.フォームの設置方法

それでは、早速Contact Form 7でフォームを作っていこうと思います。まずは基本的な設置方法について解説をしていきたいと思います。

有効化をしたら管理画面の左側のメニュー欄に「お問い合わせ」というメニューが表示されますので、この「お問い合わせ」をクリックしていきましょう。 

クリックすると上記の画面が出てきますので、「コンタクトフォーム1」と書いてあるところに、ショートコードの列の赤枠の部分にコードがありますのでそのコードをコピーしてください。

ACTION

❶管理画面左側の お問い合わせ をクリック。
❷ショートコードをコピーする。

以上の作業が終了したら・・・・実際に貼り付けていきましょう。

 基本的に問い合わせフォームは、投稿ではなく固定ページで表示するのがベターなので、上記の管理画面の「固定ページ」をクリックして、「新規追加」をクリックしてください。

ACTION

❶固定ページをクリックする
❷新規追加をクリックする

すると、まいどおなじみの新規固定ページを追加する画面に移動します。
 

今回の事例では、問い合わせフォームのみをいれていくので、とりあえずでいいのでまずは上の図のように入力していきましょう。

ACTION

❶タイトル欄に「お問い合わせフォーム」と入力してください。
❷このテンプレートではパーマリンクの変更ができるのでパーマリンクも変更しましょう。ローマ字で入力をするのがベストです。
❸先ほどコピーしたショートコードを貼り付けます。フォームの上に文章をいれる場合はショートコードの上に、下に文章をいれる場合は下に入力してください。

以上必要情報を入力したら 公開 ボタンをクリックして公開していきましょう。
公開が完了したら実際に確認して見ましょう。
 

今回はフォームのショートコードだけを表示する設定をしたので、シンプルですが上記のようなフォームが表示されています。

フォーム自体もデフォルトの設定のままのフォームにになっていて典型的な問い合わせフォームになっていますね。

もし、更に詳細なフォームにしたりシンプルなフォームにしたいのならば、「タグ」使って追加していくのですが後に図解で解説していきます。

 

2.お問い合わせフォームの詳細設定

さて、お問い合わせフォームは設置できましたが、この状態だとユーザーからはフォームに入力することができますが、自動返信メールの設定や入力されたフォーム内容をあなたのメールアドレスに届ける設定などをしておいたほうがいいです。

この設定をしておかないと、せっかく問い合わせフォームを作ったのに・・・

・あなたの元に入力内容が届かない。
・自動返信メールに必要項目がはいっていない。

という事態になりかねないので必ず設定をしておきましょう。

それでは、管理画面にある


 
「お問い合わせ」をクリックし作ったフォームを選択します。※この場合はコンタクトフォーム1です。

ACTION

❶お問い合わせをクリック
❷編集したいフォームタイトルをクリック

クリックすると・・・ 

上記の画面が出てきます。

タイトル下に フォーム|メール|メッセージ|その他の設定 と4つの項目があります。今回はフォーム内容はそのままでいきます。

2-1.メールの設定

まずは問い合わせフォームの自動返信と入力内容をあなたのメールに届ける設定をしていきたいと思います。
この設定は必ずしておいてください。


 
では、上のキャプチャ画像の赤枠の部分の「メール」をクリックしてください。

ACTION

❶コンタクトフォームの編集画面を開く
❷メールのボタンをクリック

そうすると以下の画面に移動します。
 
ページの全体を見るとわかりますが、ここでは主に2つの設定ができます。

・メール・・・・フォーム入力内容をあなたに届ける設定
・メール(2)・・入力したユーザーに自動返信するメールの設定

です。

まずは、上の部分のユーザーからの問い合わせなどがあった際にあなたのメールに届ける設定をしていきましょう。


 

設定内容 ❶送信先・・日常確認するあなたのメールアドレスを入力
❷送信元・・わかりやすい送信者名(あなたの名前・企業名・ブログ名など)
❸題名・・・件名を入力(問い合わせをいただきましたなど)
❹追加ヘッダー・・メールの返信の時に装飾などのラインなどが表示することができます。ここの部分は任意で入力してください。
❺メッセージ本文・・表示させたい内容を入力(フォームの項目を追加しない限りはデフォルトのままでオッケー)

一度ここまで設定をしたものを確認をしたいのならば保存をクリックして確認してみましょう。(しなくてもかまいません)ここでは、わかりやすくするためにフォームに入力した事が自分の設定したメールボックスに届くかどうか試してみます。

では、実際に問い合わせフォームを開いて項目を入力していきましょう。


 
上記のように適当に必要事項を入力して「送信」ボタンをクリックします。

送信ができたら「ありがとうございます。メッセージは送信されました。」という表示がされてフォームの入力内容が送信されます。それでは!!設定したメールボックスを開いてみてください。届いているのか確認してください。

参考までに、届いたものを載せておきますね。

このように、さきほどあなたがテストで送ったメールが届いていれば無事設置完了です。

しつこく言いますが、これはユーザーがフォームに入力した内容をあなたに届ける設定です。もし、表示を変えたいのならば先ほどの設定を編集して貰えば可能です。

2-2.メールの設定

それでは、これは個人的には必ず設定しておきたい自動返信メールの設定の解説をしていきたいと思います。
先ほどの続きの、メール(2)の部分を編集していきます。※もし現在開いていない場合は2-1からやり直してください。


 
まず、上の画像にあるようにメール(2)の下にある

□メール(2)を使用

のボックスをチェックを必ずいれてください。

ここにチェックをいれないと設定欄が出てきません。チェックをいれたら下記のような画面が出てきますので、順に説明していきます。  

それでは、それぞれ順番に解説をしていきたいと思います。

設定内容

❶送信先・・ユーザーメールアドレスなので入力・変更は不要です。
❷送信元・・あなたの問い合わせ用のアドレスを入力してください。
❸題名・・自動で返信したい内容の件名を入力「お問い合わせ受け付けました。」
❹ 追加ヘッダー・・任意
❺ メッセージ本文・・お客様に自動で返信したい内容を入力します。
⑥ファイル添付・・ファイルを添付したい場合はここをつかいますが、あまり必要ではないと思うのでここでは割愛します。

入力したら、一番下にある「保存」のボタンをクリックします。


 

「保存」をクリックすると、赤枠の欄にまたコードがでてきますが、これを貼り付けましょうという意味ではありません。すでに貼り付けているはずなので特に変更をする必要はありません。

2-3.その他の設定は何に使うのか?

その他の設定って?と思われるかもしれませんが、この機能は意外と使えるので必要ならば活用してください。

例えば、問い合わせはどうやってブログに流入して問い合わせに至ったのか?何パーセントが問い合わせに至るのか?を計測することができるGoogleアナリティクスのトラッキングコードなどを設置することができます。

その他の設定のボタンをクリックしてください。
 

上記の赤枠のところに必要なコードを入力するだけです。他にもこちらのページで使えるコードを紹介しているので是非試してみてください。

2-4.フォームの項目を増やす

先程もお話したように、Contactfoam7は問い合わせフォームだけでなく、あなた次第でアンケートフォームにも診断フォームとしても使えます。

そのため色んな項目を追加したりできます。

主に以下の項目が追加できます。

 

電話番号やURLなどはわかりやすいので、それ以外のものを簡単に図で解説していきましょう。

2-4-1.ドロップダウンメニュー 

ドロップダウンメニューとは上記のようなものですが、上の事例の場合は、ドロップダウンメニューをクリックしてから以下のように設定しています。
 

2-4-2.チェックボックス 

チェックボックスは上記のようにチェック項目として表示されるものです。この場合の設定は以下のようにしています。

 2-4-3.ラジオボタン

先程のチェックボックスが○になって一方に既にチェックが入っている状態をラジオボタンと言います。この項目も下記と同じような設定でいいです。 

2-4-4.承認確認

利用規約など、フォームに入力する方に何らかの確認をしてもらうための項目です。設定をすると上のようにチェックボックスがはいります。設定はそのままでも特に問題なく稼働します。

3.コピペで使えるフォームのカスタマイズ

そして、最後にフォームそのもののカスタマイズについても例を出しましょう。

そのままコピペして使っていただいても結構です。参考にしてご自身でカスタマイズしてもいいでしょう。

3-1.フォーム内にプレースホルダーを挿入 

よく、上のようにフォーム内に説明文や例文があってカーソルを合わせると消えるようなフォームがありますが、これを実装する方法はそれほど難しくはありません。

<p>お名前 (必須)<br />    [text* your-name placeholder “例)ラブ部”] </p>

この赤の部分を追加するとフォーム内に入力した文字が表示されます。

3-2.確認画面をつける

Contact Form7は、フォーム入力して送信後に確認ページに移動はしないのですが、もし移動をしたいのならば、Contact Form 7 add confirmのプラグインを追加していきましょう。

プラグインのインストールと設定に関してはコチラのページの通りに設定をしてください。

3-3.デザインカスタマイズテンプレート 

Contact formはデフォルトで設定をするとシンプルすぎて逆に見にくいですよね。そこで、上記のようにカスタマイズしていきましょう。レスポンシブ対応した全画面で表示できるフォームとボタンにボックスを追加しました。(※ボックスは別の設定です。)

以下のCSSをスタイルシートの最下部に貼り付けてるだけで結構です。

/*contact7フォーム*/.wpcf7 input[type=”text”],.wpcf7 input[type=”email”],.wpcf7 input[type=”url”],.wpcf7 textarea {width: 100%;padding:10px;border-radius: 4px;border: 1px solid #ddd;}/*contact7送信ボタン*/.wpcf7-submit {width:100%;padding:15px;border-radius:10px;-webkit-border-radius: 10px;  -moz-border-radius: 10px;border: none;box-shadow: 0 3px 0 #ddd;background: #eee;transition: 0.3s;}.wpcf7-submit:hover {background: #ddd;transform: translate3d(0px, 3px, 1px);-webkit-transform: translate3d(0px, 3px, 1px);-moz-transform: translate3d(0px, 3px, 1px);}

これでお問い合わせページのデザインができました。後はご自身で色々デザインをカスタマイズしてみるといいでしょう。

さいごに

さて、いかがでしたでしょうか?

contactfoamは問い合わせフォームとしても、アンケートやクイズでもあなた次第で使いこなすことができるはずです。

また、最近では決済フォームにもなるPaypalプラグインとも連動できますので、あなた次第でどのようにも使うことができるはずです。

といきなりやる前にまずは、ここでかいせつしている基本的な使い方と設定方法をマスターしてからやったほうが使いこなせるのでまずは今回の記事を読んでつかいこなせるようにしてください。

  • このエントリーをはてなブックマークに追加
Comment form