WordPressのテーマ「SWELL」でプラグイン「Contact Form 7」を利用した場合、お問い合わせフォームの送信後に「サンクスページ(送信完了画面)」を設定する方法をご紹介します。
例)URLアドレス遷移
お問い合わせフォーム
https://サイトドメイン/contact
お問い合わせフォームサンクスページ
https://サイトドメイン/contact/thanks
今回は、contact
から/contact/thanks
ページに画面遷移する方法で解説します。
目次
サンクスページの作り方
1. まず固定ページにサンクスページを作る
固定ページから新規作成で「お問合わせありがとうございました」などのサンクスページを作っておきます。
例)今回ページ属性の親を「お問合わせ」にしてみました。
![固定ページにサンクスページを作る](https://webnetamemo.com/wp3/wp-content/uploads/2023/10/contactform7-swell_3.jpg)
![固定ページにサンクスページを作る](https://webnetamemo.com/wp3/wp-content/uploads/2023/10/contactform7-swell_4.jpg)
https://サイトドメイン/contact/thanks
2. お問い合わせページからサンクスページへ遷移するよう設定
固定ページの「お問い合わせ」contact
ページに戻っていただき、カスタムCSS&JSの「JS用コード」エリアにコードを追加します。
![](https://webnetamemo.com/wp3/wp-content/uploads/2023/10/ceaa77731cdfae55471df10811355b0c-150x150.png)
SWELLではjavascriptがページごとに使えるエリアが設けてあります。JSプラグイン追加だったりfunctions.phpに書かなくて大丈夫です。
![](https://webnetamemo.com/wp3/wp-content/uploads/2023/10/contactform7-swell_1-1024x683.jpg)
![](https://webnetamemo.com/wp3/wp-content/uploads/2023/10/contactform7-swell_1-1024x683.jpg)
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'https://サイトドメイン/contact/thanks';
}, false );
location
にhttpからのご自身の画面遷移URLを設定してください。
![](http://webnetamemo.com/wp3/wp-content/uploads/2023/09/0d5e1cee09ee4b0a01d755040ab523e7-150x150.png)
![](http://webnetamemo.com/wp3/wp-content/uploads/2023/09/0d5e1cee09ee4b0a01d755040ab523e7-150x150.png)
![](http://webnetamemo.com/wp3/wp-content/uploads/2023/09/0d5e1cee09ee4b0a01d755040ab523e7-150x150.png)
これでサンクスページの設定はOKです。テスト送信を行ってみてください。
noindex,nofollowの設定
サンクスページはインデックス不要なので「noindex,nofollow」の設定をしておきます。
SWELL推奨の「SEO SIMPLE PACK」を利用している方は、「SEO SIMPLE PACK 設定」の「このページの”robots”タグ」で「noindex,nofollow」を選択してください。
![noindex,nofollowの設定](https://webnetamemo.com/wp3/wp-content/uploads/2023/10/contactform7-swell_2.jpg)
![noindex,nofollowの設定](https://webnetamemo.com/wp3/wp-content/uploads/2023/10/contactform7-swell_2.jpg)
以上です。ご参考ください。