WordPress

ContactForm7でサンクスページを設定する方法

コンタクトフォームではデフォルトではフォームを送信すると問い合わせページに以下のようなメッセージが表示されるだけ。

サンクスページは用意されていない。

そのため、サンクスページを設定する方法をまとめます。

固定ページ→「新規追加」でサンクスページを作成

以下のようなサンクスページを用意します。

コンタクトフォーム内の設定画面でコード追加

// contact form 7 で「送信する」を押した際にサンクスページにリダイレクトさせる
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'https://example.com/thanks/'; //サンクスページURL
}, false );
</script>

こちらのコードを下記のようにリダイレクトさせたいコンタクトフォームの編集画面で最後に追記いたします。

以上で完成。

問い合わせフォーム送信後、サンクスページに遷移いたします。

おまけ、テーマにSnowMonkeyを使用している場合

テーマにSnow Monkeyを使用している場合は、下記のアクションフックコードをmy_snow_monkeyに追加するだけでOKです。

// contact form 7 で「送信する」を押した際にサンクスページにリダイレクトさせる
add_action( 'wp_footer', 'add_thanks' );
function add_thanks() {
?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'https://example.com/thanks/'; //サンクスページURL
}, false );
</script>
<?php
}

以上です。

  • この記事を書いた人

コウダイ

文系・ノースキル・未経験・アラサー・地方住み・残業100時間超えの社畜ホテルマンから都内IT系上場企業のフルリモートWebエンジニアに転職した人。

都内IT系上場企業に勤務するWebエンジニア5年目|プログラミングスクールのテックキャンプ公式アンバサダー|新卒で手取り18万の地方ホテルマン6年→挫折→プログラミングを900時間勉強→転職活動100社以上応募→アラサー未経験から7ヶ月でフルリモートのWebエンジニアに転職し年収150万円UP|34歳2児のパパ|ブログ歴4年→月間6,000PV|エンジニア転職ノウハウ、プログラミング、Web制作、副業での稼ぎ方など、「時間や場所に縛られずに稼ぐ」方法を発信しています。

-WordPress