WordPressで問い合わせフォームを送信した後にカスタムJavaScript（JavaScript）を実行する必要がある場合があります。 使用するコンタクトフォームプラグインが提供する機能を使用して、カスタムJSコードを実行できます。
WordPress お問い合わせフォームの送信後にカスタムJavaScriptを実行する
Contact Form 7プラグイン
CF7プラグインを使用する場合 Calling a JavaScript function on Contact Form 7 submission ドキュメントで提示するコードを適用できます。
document.addEventListener( 'wpcf7submit', function( event ) {
if ( '123' == event.detail.contactFormId ) {
// Your code here
}
}, false );「123」はフォームIDです。 適切に変更してください。
JavaScriptを読み込む
JavaScriptはWordPressでjsスクリプトファイルとスタイルシートを正しくロードする方法「を参照して読み込むことができます。この方法が望ましいが面倒な場合 WPコードなどのプラグインを使用して、フッタ領域にコードを追加することもできます。 GeneratePress テーマを使用している場合は、GPテーマが提供するElements機能を使用してフッター（wp_footerフック）にロードできます。
WPFormsプラグイン
WPFormsプラグインを使用している場合は、Form Pagesアドオンを使用してカスタムスクリプトを追加できます。 お問い合わせフォームを作成し、 設定 » 確認 (Confirmations)からテキストモードに切り替えてHTMLコードを追加し、wpforms_form_pages_footerフックからカスタムスクリプトを実行できます。
見てみると、Form PagesアドオンはWPForms Proプラン以上で提供されますね。 Form Pgaes アドオンの詳細については、「WPForms Form Pagesを使用して WordPressで簡単かつ迅速にFormランディングページを作成する「を参考にしてください。
使用するテーマ（チャイルドテーマを作成し、タスク）の関数ファイルに次の形式でスクリプトを追加できます。
function wpf_confetti_animation() {
?>
<script type="text/javascript">
//If the canvas ID does not exist on the page, this script will not run
if (document.querySelector( '#canvas' ) !== null) {
// Your code here
}
</script>
<?php
}
add_action( 'wpforms_form_pages_footer', 'wpf_confetti_animation', 1);Quformプラグイン
Quformを使用している場合は、quform：successStartというJavaScriptフックを使用できます。
jQuery(function ($) {
$('.quform-form-1').on('quform:successStart', function (e, form, confirmation) {
// Custom code
});
});上記の形式でカスタムコードを追加できます。
Formidable Forms プラグイン
手ごわいフォームを使用している場合は、成功メッセージの表示後にコールバックされるfrmFormCompleteイベントを利用できます。 Formidable Formsが提示する基本的なスクリプトです。
<script>
jQuery(document).ready(function($){
$(document).on( 'frmFormComplete', function( event, form, response ) {
var formID = $(form).find('input[name="form_id"]').val();
});
});</script>上記のjsコードを適切に適用してください。
コメントを残す