暇人北っちの趣味ブログアフィリエイト。

ギター、ゲーム、アニメ。やりたいことに時間とお金を使おう。

contact Form7の設定と使い方 ワードプレスお問い合わせフォーム作成

contact Form7の設定と使い方 ワードプレスお問い合わせフォーム作成

ブログにはお問い合わせページが付きもの。WordPressの場合はContact Form 7でお問い合わせページを簡単に作る事が出来るよ。

contact Form7の導入、インストール、設定までを1から説明するよ。

Contact Form 7とは

ワードプレスにお問い合わせを作ることの出来るプラグイン。それがContact Form 7。自由にカスタマイズも出来るので、ブログに合わせたお問い合わせページを作成することが出来るよ。

スクリーンショット 2013-04-26 20.19.21北っちは趣味ブログではこのcontact Form7を利用してる。設定は一回で済むから、綺麗なお問い合わせページを作っちゃいましょう!

Contact Form 7の導入方法

それでは一緒にContact Form 7をインストールしていくよー。

まずはあなたのワードプレス管理画面から左メニュー→「プラグイン」→「新規追加」をクリック。

Auto Post Thumbnail2

赤枠のところに「新規追加」があります。これをクリックします。

Auto Post Thumbnail3

検索欄にContact Form 7と入力。出来たら「プラグインの検索」をクリック。

注:Contact Form 7←この文をコピーして
貼り付けることをオススメします。

※スペースの違いとかで検索結果が出て来なかった時がありました。

Contact Form 7_1

このようにContact Form 7が表示されるので「いますぐインストール」をクリック。
Contact Form 7_3

インストールが出来たら、「プラグインの有効化」をクリック。

Contact Form 7_4

こうすると、左メニューに「お問い合わせ」というのが表示されたかな?ここをクリック。

Contact Form 7_5

「コンタクトフォーム1」をクリック。

Contact Form 7_6

これがContact Form 7の編集画面。ここをカスタマイズしていくんだけど・・・

「わかるか!!」ってなるよね。北っちは最初さっぱりわからなかった笑

なので、北っちが利用しいているカスタマイズコードを公開しておくよ。あなたがやるのは、これをコピーして貼り付けるだけ。

Contact Form 7_7

最初に「フォーム」というエリアにお問い合わせページに表示させる内容を作っていきます。ここに下の項目を全てコピーして、
貼り付けてください。

<p>お名前 (必須)<br />
[text* your-name akismet:author 30/30] </p>

<p>メールアドレス (必須)<br />
[email* your-email akismet:author_email 30/30] </p>

<p>タイトル<br />
[text* your-name akismet:author 50/50] </p>

<p>質問・相談内容<br />
[textarea your-message 35×20] </p>

<p>頂いたメールの引用について<br />
メール内容、名前、URLは引用してもよろしいでしょうか?
[radio radio-820 default:1 “すべてOK!” “イニシャル、ハンドルネームならOK” “だめ!”]</p>

<p>[submit “送信”]</p>

これだけでOK。これで北っちのお問い合わせページと同じような表示になるよ。

実際の表示。

ラジオボタンを作って、選択肢を用意しよう

上の画像の「頂いたメールの引用について」の部分。

3つ選択肢があって選べるようになってるよね。これはラジオボタンっていうのを用意してるんだよ。

作り方は簡単なので是非やってみよう。

フォームの画面の上にあるボタンから「ラジオボタン」をクリック。

こんな画面が表示されるよ。

名前はこのタグの名前。基本はそのままでいいけど質問1、質問2みたいに複数作る場合は名前をつけておくといいよ。

オプションの部分は質問の選択肢を記入するところ。1行に1つ、選択肢をいれること!

ここまで出来たら「タグを挿入」をクリック。

こんな感じになっていればOK。

お問い合わせメール、自動返信メールの設定

その後に来るのがメール。これはお問い合わせしてくれた人に確認として送るもの。確認用のメールってやつだね。

◆送信先

あなたのお問い合わせで使うアドレスを入力します。

◆メッセージ本文

基本的にそのままで、[radio-107]というショートコードだけコピーして貼り付け。

このショートコードはさっき作成したラジオボタンの名前なのであなたのコードを貼り付けてね。

メール(2)を設定する(自動返信用)

これはお問い合わせを頂いた時に自動返信を送るためのものです。

ここも設定しておくと読者さんにお礼のメールが届くので、設定しておくのがおすすめ。設定するのは3つ。

◆メール2を使う

まずはここにチェックを入れます。

◆送信先

[your-email]のまま。

追加ヘッダー

「Reply-To:あなたのメールアドレス」という風に記入。基本的には最初のメールの送信先で設定したアドレスと同じでOK。

◆メッセージ本文

ここはあなたの言葉で書くのがベスト。一応北っちの書いてある文章をここに載せとくねー。

北っちですm(_ _)m
お問い合わせありがとうございました!
頂きましたご質問には基本的に24時間以内に
お返事させて頂いておりますが都合により
お返事が遅れる場合もあります。
尚2日以上経ちましてもお返事が届かない場合は
うまくメールが届いていない可能性もあります。
その様な場合は再度違うメールアドレスにて
ご連絡頂けますと助かります。

どうぞご理解とご協力を宜しくお願い致しますm(_ _)m
*このメールは受付をお知らせする自動返信メールです。
このメールに対して返信頂いても私宛にメールは届きません。

このようにしています。これを名前だけ変更してコピペしてもらってもOK。ここまで出来たら、一番上の「保存」ボタンをクリックします。これで設定が保存されるよ。

赤枠のところをコピーしておいてください。これは後で使うのだ。

お問い合わせ記事を作る

設定が終わったら、お問い合わせの記事を作る必要があります。新規記事を投稿しよう。

記事のタイトルを「お問い合わせ」に。記事本文にはさっきコピーしておいた文章を貼り付ける。これでOK。このまま「公開」をクリック。これでお問い合わせページの完成。

ブログにお問い合わせがないと読者さんからの質問や相談があなたに届きません。ワードプレスはこの便利なプラグインがあるのでぜひ活用してみてね。

LEAVE A REPLY

*
*
* (公開されません)

Return Top