PR

Contact Form 7 プラグインで完了画面(サンクスページ)に移動させる方法

スポンサーリンク
スポンサーリンク

Contact Form 7 完了画面(サンクスページ)作成

WordPressにメール送信フォームを設置できる「Contact Form 7」で、プラグインを使ってサンクスページ(送信完了画面)に移動させる方法をご紹介します。

今回は、メール送信後のアクションを追加できるプラグイン「Redirection for Contact Form 7」を使って、完了画面(サンクスページ)を表示させてみました。

ContactForm7はバージョン5.4からJavaScriptが大幅に変更されたため、以前のリダイレクト用コード追記ではサンクスページに遷移しないことがあります。

送信後にサンクスページへ飛ばすなら、プラグインの利用をオススメします。

スポンサーリンク

ContactForm7は送信完了がわかりにくい

Contact Form 7 は、WordPress上で簡単にお問い合わせフォームが作れる便利なプラグインですが、送信完了がわかりにくいという欠点があります。

デフォルト状態のContact Form 7は、送信ボタンを押しても確認画面や完了画面に遷移せず、送信ボタンの下に「あなたのメッセージは送信されました」と表示されるだけです。

これでは送信されたかどうかわからないし、スマホでは下にスクロールしないと、メッセージを見落とすこともあります。

Contact Form 7 送信完了メッセージ

このメッセージ表示をやめて完了画面(サンクスページ)に飛ばすと、明らかに違うページに遷移するので、送信完了したことがわかりやすくなります。

完了画面(サンクスページ)を作成する

では、Redirection for Contact Form 7をインストールして、完了画面(サンクスページ)を表示させてみましょう。

その前に完了画面を作成しないといけないので、固定ページに新規追加します。

ちゃんと送信完了したことがわかればいいので、内容はシンプルなもので構いません。「送信が完了しました。ありがとうございます。」程度の文章で十分です。

contactform7 サンクスページ

メールを送信すると、こんな感じでサンクスページが表示されます。

contactform7 サンクスページ

このページは内容がないので、テーマのSEO設定等で「noindex」にして、検索エンジンにインデックスされないようにしましょう。

GoogleやYahooでリスティング広告等を運用されている方は、サンクスページを到達目標に設定すると、コンバージョン計測に使うことができます。

スポンサーリンク

Redirection for Contact Form 7の使い方

では、Redirection for Contact Form 7を使って、サンクスページを表示させましょう。

Redirection for Contact Form 7は、メール送信後のアクションを追加できるプラグインで、今回はリダイレクトを追加してサンクスページを表示させました。

このプラグインは日本語化されていませんが、使い方はそれほど難しくありません。

プラグインのインストール

まずはプラグインをインストールします。

ダッシュボードからプラグイン新規追加に進み、「Redirection for Contact Form 7」と検索して「今すぐインストール」→「有効化」します。

Redirection for Contact Form 7 インストール

続いて「重要な更新を逃さないように、セキュリティと更新通知、freemius.com とセンシティブではない診断トラッキングをオプトインしてください。」と表示されますが、ここは「スキップ」します。

Redirection for Contact Form 7 セキュリティと更新通知

続いてRedirection for Contact Form 7を他のツールと連携させたり、便利な機能を追加できる有料アドオンが表示されます。

ここでは不要ですが、興味があれば使ってみてください。

Redirection for Contact Form 7 アドオン

Contact Form 7にActionsを追加

次にContact Form 7のフォーム編集に進みます。サンクスページを追加するフォームを選んでください。

Redirection for Contact Form 7 編集フォーム

Redirection for Contact Form 7をインストールすると、フォームの編集画面に「Actions」というタブが追加されます。

Redirection for Contact Form 7 Action追加

「Choose Action」から追加するActionsを選びます。サンクスページを追加する場合は「Redirect」を選択します。

Action選択

「Add Action」をクリックすると、新しいActionが追加されました。

Action追加

Actionを編集してサンクスページ追加

「New Action」をクリックすると、Actionを編集できます。

Action編集

続いてActionの設定項目を入力していきます。ここでは「Select a page」だけ設定すればOKです。Action名は「Rule Title」で変更できます。

「Select a page」をクリックすると、リダイレクト先の固定ページを選ぶことができます。作成したサンクスページのタイトルを選んでください。

リダイレクト先固定ページ選択

リダイレクト先をURLで指定する場合は「Use custom URL」をオンにして「Use external URL」を入力します。

リダイレクト先をURLで指定

最後に「保存」をお忘れなく。これでサンクスページの表示設定が完了しました。

完了画面(サンクスページ)の表示

あとはテストメールを送信して、Contact Form 7から固定ページの完了画面(サンクスページ)にリダイレクトされるかをチェックしてください。

完了画面(サンクスページ)が表示されたらOKです。

サンクスページ表示

以前はリダイレクト用コードを追記してサンクスページに飛ばしていましたが、ContactForm7のバージョン5.4からJavaScriptが大幅に変更されたため、遷移しなくなりました。

Contact Form 7のサンクスページ表示は、プラグインの利用が一番簡単ですよ。

ContactForm7の使い方やカスタマイズ方法を紹介しています。よかったらこちらもどうぞ・・・

Contact Form 7の使い方と設定方法
WordPressサイトの問い合わせフォーム設置プラグイン「Contact Form 7」をご紹介します。Contact Form 7は簡単な初期設定とショートコードを追加するだけで問い合わせフォームが設置できる定番プラグインです。
',b.captions&&s){var u=J("figcaption");u.id="baguetteBox-figcaption-"+t,u.innerHTML=s,l.appendChild(u)}e.appendChild(l);var c=J("img");c.onload=function(){var e=document.querySelector("#baguette-img-"+t+" .baguetteBox-spinner");l.removeChild(e),!b.async&&n&&n()},c.setAttribute("src",r),c.alt=a&&a.alt||"",b.titleTag&&s&&(c.title=s),l.appendChild(c),b.async&&n&&n()}}function X(){return M(o+1)}function D(){return M(o-1)}function M(e,t){return!n&&0<=e&&e=k.length?(b.animation&&O("right"),!1):(q(o=e,function(){z(o),V(o)}),R(),b.onChange&&b.onChange(o,k.length),!0)}function O(e){l.className="bounce-from-"+e,setTimeout(function(){l.className=""},400)}function R(){var e=100*-o+"%";"fadeIn"===b.animation?(l.style.opacity=0,setTimeout(function(){m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e,l.style.opacity=1},400)):m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e}function z(e){e-o>=b.preload||q(e+1,function(){z(e+1)})}function V(e){o-e>=b.preload||q(e-1,function(){V(e-1)})}function U(e,t,n,o){e.addEventListener?e.addEventListener(t,n,o):e.attachEvent("on"+t,function(e){(e=e||window.event).target=e.target||e.srcElement,n(e)})}function W(e,t,n,o){e.removeEventListener?e.removeEventListener(t,n,o):e.detachEvent("on"+t,n)}function G(e){return document.getElementById(e)}function J(e){return document.createElement(e)}return[].forEach||(Array.prototype.forEach=function(e,t){for(var n=0;n","http://www.w3.org/2000/svg"===(e.firstChild&&e.firstChild.namespaceURI)}(),m.passiveEvents=function i(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t)}catch(n){}return e}(),function a(){if(r=G("baguetteBox-overlay"))return l=G("baguetteBox-slider"),u=G("previous-button"),c=G("next-button"),void(d=G("close-button"));(r=J("div")).setAttribute("role","dialog"),r.id="baguetteBox-overlay",document.getElementsByTagName("body")[0].appendChild(r),(l=J("div")).id="baguetteBox-slider",r.appendChild(l),(u=J("button")).setAttribute("type","button"),u.id="previous-button",u.setAttribute("aria-label","Previous"),u.innerHTML=m.svg?f:"<",r.appendChild(u),(c=J("button")).setAttribute("type","button"),c.id="next-button",c.setAttribute("aria-label","Next"),c.innerHTML=m.svg?g:">",r.appendChild(c),(d=J("button")).setAttribute("type","button"),d.id="close-button",d.setAttribute("aria-label","Close"),d.innerHTML=m.svg?p:"×",r.appendChild(d),u.className=c.className=d.className="baguetteBox-button",function n(){var e=m.passiveEvents?{passive:!1}:null,t=m.passiveEvents?{passive:!0}:null;U(r,"click",x),U(u,"click",E),U(c,"click",C),U(d,"click",B),U(l,"contextmenu",A),U(r,"touchstart",T,t),U(r,"touchmove",N,e),U(r,"touchend",L),U(document,"focus",P,!0)}()}(),S(e),function s(e,a){var t=document.querySelectorAll(e),n={galleries:[],nodeList:t};return w[e]=n,[].forEach.call(t,function(e){a&&a.filter&&(y=a.filter);var t=[];if(t="A"===e.tagName?[e]:e.getElementsByTagName("a"),0!==(t=[].filter.call(t,function(e){if(-1===e.className.indexOf(a&&a.ignoreClass))return y.test(e.href)})).length){var i=[];[].forEach.call(t,function(e,t){var n=function(e){e.preventDefault?e.preventDefault():e.returnValue=!1,H(i,a),I(t)},o={eventHandler:n,imageElement:e};U(e,"click",n),i.push(o)}),n.galleries.push(i)}}),n.galleries}(e,t)},show:M,showNext:X,showPrevious:D,hide:j,destroy:function e(){!function n(){var e=m.passiveEvents?{passive:!1}:null,t=m.passiveEvents?{passive:!0}:null;W(r,"click",x),W(u,"click",E),W(c,"click",C),W(d,"click",B),W(l,"contextmenu",A),W(r,"touchstart",T,t),W(r,"touchmove",N,e),W(r,"touchend",L),W(document,"focus",P,!0)}(),function t(){for(var e in w)w.hasOwnProperty(e)&&S(e)}(),W(document,"keydown",F),document.getElementsByTagName("body")[0].removeChild(document.getElementById("baguetteBox-overlay")),w={},h=[],o=0}}})
タイトルとURLをコピーしました