情報商材アフィリエイトサイトでは一般的なお問い合わせページに加えて、推奨商材購入者に向けた特典請求フォームが必要になります。
WordPressではお馴染みの「Contact Form 7」プラグインを使うことになりますが、今回はコピペで簡単にお問い合わせや特典請求のフォームを作成することができる手順をご紹介します。
定番プラグインなので既にお使いの方も多いかと思いますが、ご一読いただければ意外と知らなかった機能があるかもしれません。
目次
Contact Form 7のインストール
WordPress管理画面から「プラグイン」→「新規追加」を選択し、検索窓から「Contact Form 7」を検索してください。
表示されたContact Form 7の「いますぐインストール」ボタンを押します。
「このプラグインをインストールしてもいいですか？」というダイアログボックスがポップアップしますので、「OK」ボタンを押します。
次に「プラグインを有効化」をクリックしてインストールを完了します。
同じ手順で画像認証用プラグイン「Really Simple CAPTCHA」もインストールします。
お問い合わせ・特典請求フォームを作成
当アフィリ課のお問い合わせフォームを完成形として作成していきます。特典請求フォームも同様のレイアウトです。
インストール完了後、管理画面の「お問い合わせ」→「新規追加」にアクセスし、「コンタクトフォームを追加」ページにある「デフォルトの言語を使用する (日本語)」下の「新規追加」ボタンをクリックします。
コンタクトフォームを追加:フォーム
コンタクトフォームを追加ページにアクセスすると、「フォーム」「メール」「メッセージ」「その他の設定」タブメニューがあります。
なお、ここでは「メッセージ」には触れませんので、あなたのサイトに相応しいと思われる文章に変更してください。
私の場合は「メッセージが正常に送信された」メッセージのみ「送信完了。送信控えをお送りしました。届かない時はメールアドレス記入ミスの可能性があります。再度お問い合わせください。」と変更し、それ以外はそのまま使っています。
「フォーム」メニューから始めます。
先ずはこのコンタクトフォームにタイトルを付けます。
運営者用なので、「my-contact」「tokuten」や日本語名で「お問い合わせフォーム」など分かりやすい任意のタイトルを付けます。
次にHTMLを記入します。
フォームの本文欄にコピペしてください。
コンタクトフォームを追加:メール
フォームの次はメールタブをクリックします。
初期値のコードを消し、下記に書き換えます。
コンタクトフォームを追加:メール(2)
上記の「コンタクトフォームを追加:メール」はアフィリエイトサイト運営者宛のメールです。
メール(2)機能で、連絡をいただいた方にも同時に送信控えメールを送ることができます。
忘れずに下部にある「保存」ボタンを押して、これまでの登録データを保存します。
保存後、発行されたショートコードをコピーし、後述するお問い合わせ用の固定ページに貼り付けます。
コンタクトフォームを追加:その他の設定
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の設定は完了です。
項目名を適時変えるだけでお問い合わせや特典請求以外のフォームにも活用することができます。
-
1 -
-
-
-
-
