アフィリエイトの問い合せ・特典請求はContact Form 7でコピペ作成

アフィリエイトの問合せ・特典請求はContact Form 7でコピペ設定

情報商材アフィリエイトサイトでは一般的なお問い合わせページに加えて、推奨商材購入者に向けた特典請求フォームが必要になります。

WordPressではお馴染みの「Contact Form 7」プラグインを使うことになりますが、今回はコピペで簡単にお問い合わせや特典請求のフォームを作成することができる手順をご紹介します。

定番プラグインなので既にお使いの方も多いかと思いますが、ご一読いただければ意外と知らなかった機能があるかもしれません。

Contact Form 7のインストール

Contact Form 7のインストール

WordPress管理画面から「プラグイン」→「新規追加」を選択し、検索窓から「Contact Form 7」を検索してください。
表示されたContact Form 7の「いますぐインストール」ボタンを押します。

「このプラグインをインストールしてもいいですか?」というダイアログボックスがポップアップしますので、「OK」ボタンを押します。
次に「プラグインを有効化」をクリックしてインストールを完了します。

同じ手順で画像認証用プラグイン「Really Simple CAPTCHA」もインストールします。

Really Simple CAPTCHAのインストール

お問い合わせ・特典請求フォームを作成

当アフィリ課のお問い合わせフォームを完成形として作成していきます。特典請求フォームも同様のレイアウトです。

コンタクトフォームを追加
インストール完了後、管理画面の「お問い合わせ」→「新規追加」にアクセスし、「コンタクトフォームを追加」ページにある「デフォルトの言語を使用する (日本語)」下の「新規追加」ボタンをクリックします。

コンタクトフォームを追加:フォーム

コンタクトフォームを追加ページにアクセスすると、「フォーム」「メール」「メッセージ」「その他の設定」タブメニューがあります。

なお、ここでは「メッセージ」には触れませんので、あなたのサイトに相応しいと思われる文章に変更してください。
私の場合は「メッセージが正常に送信された」メッセージのみ「送信完了。送信控えをお送りしました。届かない時はメールアドレス記入ミスの可能性があります。再度お問い合わせください。」と変更し、それ以外はそのまま使っています。
コンタクトフォームを追加
「フォーム」メニューから始めます。
先ずはこのコンタクトフォームにタイトルを付けます。
運営者用なので、「my-contact」「tokuten」や日本語名で「お問い合わせフォーム」など分かりやすい任意のタイトルを付けます。

次にHTMLを記入します。
フォームの本文欄にコピペしてください。

<div class="my-contact-box">
<dl class="contact">
<dt><strong>お名前(ハンドル可)</strong> </dt>
<dd>[text* your-name 30/]</dd>
<dt><strong>メールアドレス</strong></dt>
<dd>[email* your-email 30/]</dd>
<dt><strong>当ブログを知った<br />きっかけ</strong>(任意)</dt>
<dd>[radio kikkake use_label_element "検索" "Twitter" "Facebook" "メルマガ" "その他"]</dd>
<dt><strong>お問い合わせ件名</strong> </dt>
<dd>[text* your-subject 30/]</dd>
<dt><strong>お問い合せ内容</strong></dt>
<dd>[textarea* your-message 30x10]</dd>
<dt><strong>画像認証</strong></dt>
<dd>[captchac captcha-909 size:m]
[captchar captcha-909 30/]
<p>スパムメール防止のため、ご協力ください。
上記の英数字を大文字小文字を区別して半角で入力してください。</p></dd>
</dl>
<p class="aligncenter">[submit " お問い合わせ送信 "]</p>
</div>
[response]
  • 4行目と10行目の「text」は半角の「text」に書き換えてください。
  • 入力必須項目には「email*」のように「*」が付いています。「*」を外すと必須ではなくなります。
  • [email* your-email 30/]の「30/」は記入欄のサイズです。「30/」を外すか適時数字を変更してください。
  • 13~19行目では同時にインストールした画像認証「Really Simple CAPTCHA」を呼び出しています。
  • 最終行の[response]は送信ボタンを押した時に表示されるメーセージ用のショートコードです。
<div class="my-contact-box">
<dl class="contact">
<dt><strong>お名前(ハンドル可。必須)</strong></dt>
<dd>[text* your-name]</dd>
<dt><strong>メールアドレス (必須)</strong></dt>
<dd>[email* your-email]<br />
こちらのメールアドレス宛てに返信させていただきます。</dd>
<dt><strong>決済番号(必須)</strong></dt>
<dd>[text* your-number]</dd>
<dt><strong>決済完了日時(必須)</strong></dt>
<dd>[text* your-buy]</dd>
<dt><strong>当ブログを知ったきっかけは?</strong></dt>
<dd>[radio kikkake use_label_element "検索" "Twitter" "Facebook" "メルマガ" "その他"]</dd>
<dt><strong>画像認証</strong></dt>
<dd>
[captchac ninsyo size:m]
[captchar ninsyo]
スパムメール防止のため、ご協力ください。<br />
上記の英数字を大文字小文字を区別して半角で入力してください。</dd>
<dt><strong>管理人へのコメント</strong></dt>
<dd>[textarea your-message]</dd>
</dl>
<p class="aligncenter">[submit " 特典を請求する "]</p>
</div>
[response]
  • 4、9,11行目の「text」は半角の「text」に書き換えてください。
  • 入力必須項目には「email*」のように「*」が付いています。「*」を外すと必須ではなくなります。
  • 14~19行目では同時にインストールした画像認証「Really Simple CAPTCHA」を呼び出しています。
  • 最終行の[response]は送信ボタンを押した時に表示されるメーセージ用のショートコードです。

コンタクトフォームを追加:メール

フォームの次はメールタブをクリックします。
コンタクトフォームを追加:メール
初期値のコードを消し、下記に書き換えます。

送信元
アフィリ課 <info@example.com>
*「アフィリ課」はあなたのお名前かブログ名、「info@example.com」はあなたのメールアドレスを記入。
サーバによってはこの形式が無効になる場合がありますので、その際はカギ括弧も加えたまま<info@example.com>のメールアドレスのみ記入。
送信元の名前がないと支障はありませんが、メールの送信者名が「WordPress」になる場合があります。
送信元
[your-name] <[your-email]>
題名
[your-subject]
メッセージ本文
------------------------------
[your-subject]
------------------------------
●投稿日時
[_date] [_time]
●お名前
[your-name]
●認知媒体
[kikkake]
●メールアドレス
[your-email]
●お問い合せ内容
[your-message]

------------------------------
●REMOTE_ADDR
[_remote_ip]
●問い合わせページアドレス
[_post_url]
------------------------------

  • [_date] [_time]は投稿日時、[_remote_ip]は送信者のIPアドレス、[_post_url]は送信ページアドレスを取得します。
  • 契約サーバにより稀に情報が取得できない場合がありますので、その際は該当箇所が空白になります。
    適時不要な項目を削除してください。
送信元
アフィリ課 <info@example.com>
*「アフィリ課」はあなたのお名前かブログ名、「info@example.com」はあなたのメールアドレスを記入。
サーバによってはこの形式が無効になる場合がありますので、その際はカギ括弧も加えたまま<info@example.com>のメールアドレスのみ記入。
送信元の名前がないと支障はありませんが、メールの送信者名が「WordPress」になる場合があります。
送信元
[your-name] <[your-email]>
題名
特典請求を受け付けました。
*任意の題名を記入。
メッセージ本文
------------------------------
特典請求がありました。
------------------------------
●投稿日時
[_date] [_time]
●お名前
[your-name]
●メールアドレス
[your-email]
●注文ID or決済番号
[your-number]
●決済完了日時
[your-buy]
●認知媒体
[kikkake]
●管理人へのコメント
[your-message]

------------------------------
●REMOTE_ADDR
[_remote_ip]
●特典請求ページアドレス
[_post_url]
------------------------------

  • [_date] [_time]は投稿日時、[_remote_ip]は送信者のIPアドレス、[_post_url]は送信ページアドレスを取得します。
  • 契約サーバにより稀に情報が取得できない場合がありますので、その際は該当箇所が空白になります。
    適時不要な項目を削除してください。

コンタクトフォームを追加:メール(2)

上記の「コンタクトフォームを追加:メール」はアフィリエイトサイト運営者宛のメールです。
メール(2)機能で、連絡をいただいた方にも同時に送信控えメールを送ることができます。
コンタクトフォームを追加:メール(2)

メール (2) を使用
チェックを入れます。
送信先
[your-email]
送信元
アフィリ課 <info@example.com>
*「アフィリ課」はあなたのお名前かブログ名、「info@example.com」はあなたのメールアドレスを記入。
サーバによってはこの形式が無効になる場合がありますので、その際はカギ括弧も加えたまま<info@example.com>のメールアドレスのみ記入。
送信元の名前がないと支障はありませんが、メールの送信者名が「WordPress」になる場合があります。
題名
お問い合わせありがとうございます。
*任意の題名を記入。
メッセージ本文
[your-name] 様。
この度は、●●へのお問い合わせありがとうございました。
内容を確認し、折り返しご連絡させていただきますので、しばらくお待ちください。
------------------------------
送信内容控え
------------------------------
●投稿日時
[_date] [_time]
●お名前
[your-name] 様
●お問い合わせ件名
[your-subject]
●認知媒体
[kikkake]
●メールアドレス
[your-email]
●お問い合せ内容
[your-message]
------------------------------
アフィリ課
http://afirika.net/
------------------------------
  • 「●●へのお問い合わせ」の●●はあなたのブログ名を記入。
  • 下部シグナチャー(署名)はあなたのブログ名とそのアドレスに書き換えてください。
    この辺の文言は自由に変更してください。
メール (2) を使用
チェックを入れます。
送信先
[your-email]
送信元
アフィリ課 <info@example.com>
*「アフィリ課」はあなたのお名前かブログ名、「info@example.com」はあなたのメールアドレスを記入。
サーバによってはこの形式が無効になる場合がありますので、その際はカギ括弧も加えたまま<info@example.com>のメールアドレスのみ記入。
送信元の名前がないと支障はありませんが、メールの送信者名が「WordPress」になる場合があります。
題名
特典請求を受け付けました。
*任意の題名を記入。
メッセージ本文
[your-name] 様。
この度は、特典請求ありがとうございます。
ご購入を確認でき次第、特典を送付させていただきますので、しばらくお待ちください。
------------------------------
送信内容控え
------------------------------
●投稿日時
[_date] [_time]
●お名前
[your-name] 様
●メールアドレス
[your-email]
●決済番号
[your-number]
●決済完了日時
[your-buy]
●認知媒体
[kikkake]
●管理人へのコメント
[your-message]

------------------------------
アフィリ課
http://afirika.net/
------------------------------

  • 下部シグナチャー(署名)はあなたのブログ名とそのアドレスに書き換えてください。
    この辺の文言は自由に変更してください。

忘れずに下部にある「保存」ボタンを押して、これまでの登録データを保存します。

コンタクトフォームの保存

保存後、発行されたショートコードをコピーし、後述するお問い合わせ用の固定ページに貼り付けます。

コンタクトフォームを追加:その他の設定

Contact Form 7で作成したフォームは、通常「送信」ボタンを押すと、Ajaxによりページ遷移せずに送信が完了しますが、別ページで送信完了のサンクスページを設けたり、Googleアナリティクスでコンバージョン設定を行う際には「その他の設定」を利用します。

その他の設定欄に下記コードを入力し、「保存」ボタンを押します。

on_sent_ok: "location.replace('http://example.com/thanks');"

「http://example.com/thanks」は実際のページアドレスを記入してください。
お問い合わせ者の送信が完了した時点で、指定アドレスにページが移動します。

ページ遷移せずに送信完了を明示化する方法

上記「コンタクトフォームを追加:その他の設定」を使用しない方法です。

Contact Form 7はAjax機能でページ遷移しないまま送信が完了するため、ユーザーによっては入力した内容が正常に送信完了したかどうかはっきり分からないことがあります。
そのため、送信完了後に問い合わせフォームを消すことで送信完了を明確に知らせることができます。

「コンタクトフォームを追加:フォーム」で紹介した1行目のmy-contact-boxクラスを定義します。
WordPressテーマのstyle.cssに下記を追加するだけです。

.sent .my-contact-box{
    display: none;
}

送信が完了すると問合せフォームは消え、送信完了のメーセージが同一ページに表示されます。

送信完了のメーセージ

CSSの追加

「コンタクトフォームを追加:フォーム」のCSSを定義します。
上記の「.my-contact-box」は省いていますので、適時追加してください。
下記のCSSを参照し、WordPressテーマのstyle.cssに追記します。

dl.contact dt{
	clear: left;
	float: left;
	width: 5em;
	white-space: nowrap;
 	padding: 8px 0.5em;
	}
dl.contact dd{
	margin-left: 0;
	padding: 8px 0.5em 8px 5em;
	}
.my-contact-box p.aligncenter{
	text-align: center;
	}
@media screen and (max-width:960px) { 
	dl.contact dt{
		float: none;
		width: 5em;
		white-space: nowrap;
 		padding: 8px 0em;
		}
	dl.contact dd{
		margin-left: 0;
		padding: 8px 0em 8px 0em;
		}
}

お問い合わせ・特典請求の固定ページ作成

WordPress管理画面「固定ページ」→「新規追加」を選択し、新規ページを作成します。

お問い合わせ用の固定ページ作成

本文欄に先ほどのショートコードを貼り付けて新規ページを作成します。


以上でContact Form 7の設定は完了です。

項目名を適時変えるだけでお問い合わせや特典請求以外のフォームにも活用することができます。

シェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*