WordPress Redirect To Thank You Page 將訪客在聯絡表單填寫完成以後，轉向特定的感謝頁面，除了可以表達對訪客的感謝，也可以發揮流量成果檢視效果。
在 WordPress Contact Form 7 Redirect – 表單傳送後轉址頁面設定這一篇文章，我們分享過如何在 Contact Form 7 聯絡表單的設計中，將訪客填寫完成的動作轉向指定的頁面。不過這個 on_sent_ok 語法在 2017 年底，Contact Form 7 官方已經捨棄不用。因此，今天將跟大家分享在不透過外掛程式的協助下，簡單編輯佈景主題的檔案，也可以達成聯絡表單填寫完成以後，轉向自訂的感謝頁面，如果需要還可以套用 Google Analytics 追蹤碼，來記錄感謝頁面的流量記錄。
WordPress Redirect To Thank You Page
- Contact Form 7 是一款非常受歡迎的聯絡表單外掛程式，這一款外掛程式原本就設計有表單傳送後的顯示資訊，在表單傳送後在聯絡表單的頁面顯示一串通知訊息文字。
- 如果想要將聯絡表單完成以後的轉向自訂的感謝頁面，Contact Form 7 官方提供了新的辦法，可以讓我們透過修改佈景主題來達成這項任務。
佈景主題修改的方法
- 整個修改的過程會在子佈景主題下建置，因此，請先確認網站已經正確建置好子佈景主題了。
- 複製佈景主題的 footer.php 檔案到子佈景主題資料夾，透過文字編輯軟體（例如：Notepad ++）編輯 footer.php 檔案，請找到 <?php wp_footer(); ?> 字串，在這字串前填入以下語法。
|
1 2 3 4 5 |
<script> document.addEventListener( 'wpcf7mailsent', function( event ) { location = 'http://example.com/'; }, false ); </script> |
- 上面程式語法的 http://example.com/ ，記得替換成自己自訂的感謝頁面網址，例如：https://yourdomain.com/thank-you-page/。
- 編輯完成以後存檔上傳，訪客在聯絡表單填寫完成傳送以後，就會自動轉向這個我們自訂的感謝頁面。
- 另外一個方法是，如果您本來就已經有一些自定義的設計程式碼，在子佈景主題的 functions.php 檔案裡面，那麼可以不需要再複製 footer.php 檔案到子佈景主題，可以透過編輯在子佈景主題的 functions.php 檔案中，加入下列語法，也可以有同樣的效果。
|
1 2 3 4 5 6 7 8 9 10 11 |
function cf7_footer_script(){ ?> <script> document.addEventListener( 'wpcf7mailsent', function( event ) { location = 'http://example.com/'; }, false ); </script> <?php } add_action('wp_footer', 'cf7_footer_script'); |
- 上述的兩種方法都可以在表單填寫完成以後，自動轉向我們自訂的感謝頁面，大家可以選擇適合自己的使用模式套用即可。
結論
由於 Contact Form 7 聯絡表單外掛程式，官網維護的某些程式碼停止使用，趁著這個機會修改相關設定，也同時分享給需要的朋友。還是同樣的建議，使用任何外掛程式，透過對外掛程式官網提供的文件閱讀，是解決問題最好的途徑。