PR

ContactForm7に確認画面とサンクスページ(完了画面)を追加する

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

Contact Form 7に確認画面とサンクスページ(完了画面)を追加する

WordPressプラグイン「Contact Form 7 Multi-Step Forms」を使って、メール送信時の確認画面とサンクスページ(完了画面)を追加する方法をご紹介します。

Contact Form 7 は、問い合わせフォームを簡単に設置できるWordPressの定番プラグインですが、メールフォームに入力した内容を確認するための機能や、送信後にサンクスページ(完了画面)へ移行する機能がありません。

Contact Form 7に確認画面や完了画面を追加するなら、プラグイン等を使う必要があります。

以前は「Contact Form 7 add confirm」を使っていましたが、6年以上更新されていないので、今回は別のプラグイン「Contact Form 7 Multi-Step Forms」を使って、メールフォームに確認画面と完了画面を追加してみます。

Contact Form 7の基本的な使い方や各種設定方法については、以下の記事をご覧ください。

参考記事 Contact Form 7の使い方と設定方法

スポンサーリンク

Contact Form 7 Multi-Step Formsをインストール

では、Contact Form 7 Multi-Step Formsをインストールしましょう。ダッシュボード左の「プラグイン」→「新規追加」から「Contact Form 7 Multi-Step Forms」で検索してください。

Contact Form 7 Multi-Step Forms インストール

プラグインが表示されたら、インストールして有効化します。

Contact Form 7 Multi-Step Forms 有効化

続いて「Never miss an important update」というメッセージが表示されます。

ここで「許可して続ける」オプトインを選択すると、セキュリティやアップデートの情報を受け取ることができます。ちなみに、オプトインとは同意したユーザーに対して広告宣伝等のメールを送ることです。

オプトインするなら「許可して続ける→」をクリックします。許可しない場合は「スキップ」してください。どちらを選んでもプラグインは使えます。

Contact Form 7 Multi-Step Forms オプトイン

プラグインを追加すると、Contact Form 7のフォーム編集画面に「multistep」「multiform」「previous」のボタンが追加されます。

フォーム編集画面にボタン追加

Contact Form 7 入力フォーム作成

では、Contact Form 7 Multi-Step Formsを使って、確認画面と完了画面を追加してみましょう。

まずはContact Form 7 で入力フォームを作成してください。

Contact Form 7  メールフォーム作成

続いて、入力フォームの最後に「multistep」タグを挿入します。タグを挿入したい位置で「multistep」をクリックしてください。

multistepタグ挿入

multistepタグの設定

「フォームタグ生成: multistep」が開くので、タグの内容を設定していきます。

まずは入力画面を最初のステップにするため「First Step」をチェックします。「Next Page URL」は確認画面のURLとなります。ここでは「mail-confirmation」としました。

multistepタグ設定

「Insert Tag」をクリックすると、フォームの最後に[multistep multistep-737 first_step “mail-confirmation”]というタグが追加されるので、いったん「保存」しましょう。

確認画面用のタグ追加

後ほど確認画面を表示するための固定ページを作成します。URLは「Next Page URL」で入力した通りにしてください。

スポンサーリンク

Contact Form 7 確認画面用フォーム作成

次にContact Form 7で、確認画面用のフォームをもう一つ作成します。

左メニューの「コンタクトフォーム」に戻って新しいフォームを作成しますが、ここでは「新規追加」ではなく、入力フォームを「複製」してください。

contactform7 入力フォーム複製

確認画面で入力した内容を表示させるには「multiform」タグを使いますが、各入力項目のタグを1つずつ作成するのは面倒なので、入力フォームを複製して項目を書き換えたほうが簡単です。

例:[text your-name]なら[multiform your-name]に変更する

「multiform」タグを使う

続いて、フォームの最後に「戻る」ボタンと完了画面に推移するタグを挿入します。

「送信」ボタンの前に「Previous」タグを追加して、「前に戻る」ボタンを追加します。

「Previous」ボタンを追加

Labelに「入力画面に戻る」と入力して、「Previous」タグを作成します。

作成したタグ[previous “入力画面に戻る”]を確認したら「Insert Tag」をクリックして、タグを挿入します。

「Previous」タグを作成

送信タグの下に「multistep」タグを追加して、メール送信と完了画面のURLを設定します。

[multistep]タグを追加

「Last Step」は必ずチェック、「Send Email」をチェックをすると、確認画面の送信ボタンからメールが送信されます。

「Next Page URL」は完了ページのURLになります。ここでは「thanks-page」としました。

作成したタグ[multistep multistep-91 last_step send_email “thanks-page”]を確認したら、「Insert Tag」をクリックしてください。

[multistep]タグ作成

送信ボタンの前後に「Previous」と「multistep」タグを追加したら「保存」してください。

メールフォーム保存

入力内容の確認ページ作成

最後に確認ページと完了ページを作成しましょう。WordPressダッシュボードの左メニュー「固定ページ」→「新規固定ページを追加」に進みます。

入力内容の確認ページ作成

続いて、確認ページ用に作成したフォームのショートコードをコピーします。

確認ページフォームのショートコードをコピー

固定ページの本文にショートコードを貼り付けます。タイトルは「お問い合わせ内容の確認」にしました。

パーマリンクはmultistepタグを設定したときに「Next Page URL」で入力したURLと同じ「mail-confirmation」にしてください。

確認ページの作成

確認ページの内容を確認したら「公開」します。固定ページのURLが間違っていると、確認画面に飛ばないので注意してください。

問い合わせ内容の確認ページ公開

スポンサーリンク

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

最後に完了画面(サンクスページ)を作成します。確認ページと同じく「新規固定ページを追加」してください。内容はシンプルなもので構いません。

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

タイトルは「お問い合わせありがとうございます」にしました。

パーマリンクはmultistepタグ作成時の「Next Page URL」で入力したURLと同じ「thanks-page」にしてください。

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

ページの文章はこんな感じです。適宜手を加えて、自分好みのサンクスページに仕上げてください。

お問い合わせありがとうございます。ご記入していただいた情報は無事に送信されました。

担当の者から折り返しご連絡差し上げますので、しばらくお待ち下さい。

<span style="font-weight:bold; color:#ff0000; font-size:1.6em;">確認のため、お客様に自動返信メールをお送りしております。</span>

<a href="https://hogehoge.com/">トップページに戻る</a>

メール送信の流れ 確認画面と完了画面

では、実際にメールを送信してみましょう。まずはメールフォームから内容を入力して、送信ボタンをクリックします。

contactform7 メールフォームに入力

確認画面に移動しました。メールフォームに入力した内容が表示されていますね。ここで「入力画面に戻る」か「送信」します。

contactform7 確認画面表示

確認画面からサンクスページ(完了画面)に移動して、メールが送信されたことを知らせています。

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

Contact Form 7 の送信完了メッセージはボタンの下に表示されて見づらいのですが、サンクスページに移動させるとメールの送信完了がひと目でわかるようになります。

スポンサーリンク

確認画面やサンクスページに飛ばない

確認画面やサンクスページ(完了画面)に飛ばない場合は、フォームタグ生成の「Next Page URL」に入力したURLと、固定ページのURLが一致していない可能性があります。

「Next Page URL」で入力したURL

サンクスページのURL

フォームタグのURLと、確認画面やサンクスページ(完了画面)のURLが正しく設定されているかどうか確認してください。

自動送信メールが届かない

Contact Form 7 Multi-Step Formsをインストールすると、自動送信メールの設定が変わります。

自動送信メールを入力フォームに設定している場合は、複製した確認画面のフォームにも自動送信メールの内容が複製されているので、この問題は起こりません。

もし確認画面のフォームを新規で作成した場合は、もう一度自動送信メールを設定する必要があります。

スポンサーリンク

送信後のフォームに前回の入力内容が残る

メールフォームに入力内容が残っていると、個人情報保護の面で問題が生じます。

メールフォームに入力内容が残る

確認画面のフォームでmultistepのタグを作成するときは「Last Step」にチェックを入れないと、フォームに前回の入力内容が残ったままになります。

multistepタグ作成 Last Stepにチェック

multistepで生成されたタグに「last_step」が入っているかどうかを確認してください。

プラグインで確認画面とサンクスページを作ろう

Contact Form 7 は基本的に入力画面だけしかないので、確認画面と完了画面があるとメール送信のステップがわかりやすくなります。

Contact Form 7 の確認画面は、プラグインを使って追加するのが一番簡単です。

Contact Form 7 Multi-Step Forms は設定もそれほど難しくないし、HTMLやCSSを追記すれば表示やデザインのカスタマイズも可能です。

完了画面(サンクスページ)も、ページの作成と簡単なコードの追加だけで実現できます。どちらもそれほど難しくないので、ぜひチャレンジしてみてください。

その他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をコピーしました