WordPress お問い合わせフォームの送信後にカスタムJavaScriptを実行する

Last Updated:2023年10月27日| | コメントを残す

WordPressで問い合わせフォームを送信した後にカスタムJavaScript(JavaScript)を実行する必要がある場合があります。 使用するコンタクトフォームプラグインが提供する機能を使用して、カスタムJSコードを実行できます。

WordPress お問い合わせフォームの送信後にカスタムJavaScriptを実行する

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フックからカスタムスクリプトを実行できます。

WPFormsプラグイン

見てみると、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コードを適切に適用してください。

参照


コメントを残す

コメント

割引ニュース
DiviレイアウトAI発売記念割引!
AIで画像、テキスト、コーディング、フルページレイアウトを生成可能
ベストセラー WordPress テーマDivi
0
仕事
0
시간
0
0
期間限定
You This Coupon Code in Checkout
Click the code to Copy