web-dev-qa-db-ja.com

送信前にContact Form 7の入力値を変更する

私は私のWordpressサイトでコンサルタント登録フォームを作成するためにContact Form 7とFlamingoを使っています。私のクライアントの要求によると、すべての送信には、送信日とそれを一意にするための乱数の組み合わせである登録コード（reg_code）が必要です。

そこで、私はCF7コードに "reg_code"というIDで隠し入力フィールドを追加しました。私の最初の試みでは、ユーザーが私のサイトにアクセスして隠しフィールドの値を生成された "reg_code"変数に設定した直後にJSを使用して "reg_code"変数を生成しました。 "reg_code"はCF7送信に正常に保存されましたが、場合によっては、ユーザーが最初の訪問時にフォームを送信しなかったが、数日後に "reg_code"の日付部分が正しくない場合がありました。最初の訪問時に生成され、ブラウザにキャッシュされました。

この問題を回避するために、 "reg_code"生成関数をJSからPHPに移動することにしました。手順は次のようになります。

  1. 送信ボタンがクリックされました
  2. Reg_codeを返すAJAX関数を呼び出すには、PHPを使用します。
  3. 返された結果にCF7値の隠しフィールド "reg_code"を設定してください
  4. FlamingoにすべてのCF7フィールドを保存する本当にCF7送信を実行する

これは、CF7送信イベントの前にAJAX呼び出しをトリガーする私のJSです。

$('.wpcf7-form').on('submit', function (e) {
    $.ajax({
        type: "post",
        dataType: "json",
        url: js_object.ajax_url,
        data: {
            action: "custom_reg_code",
        },
        success: function (response) {
            if (response.success) {
                $('#reg_code').val(response.data)
            }
            else {
                console.log('Something wrong')
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log('fail: ' + textStatus, errorThrown);
        },
        complete: function() {
        }
    })
})

私の結果：それは数回しか機能しません。 "reg_code"値を持つ提出物だけがあり、他のものは空の "reg_code"を持っています。

私の推測では、CF7送信イベントはAJAX呼び出しが完了するのを待ちません。デフォルトのCF7送信を停止するために上記のコードに e.preventDefault（） を追加しようとしましたが、成功しませんでした。私はまたCF7 eventListener "wpcf7submit"を試しましたが、それでもまだ運はありません。

最後に、質問は次のとおりです。入力フィールド値を変更するためにデフォルトのCF7送信イベントを一時停止してから送信プロセスを続行する方法はありますか。

どうもありがとうございました

plugin-contact-form-7
1
LocNguyen

あなたはあなたのAJAXの苦痛を保存して、PHPのあなたのフォーム内に隠しフィールドを配置することによってこれとは異なる方法で進むことができます。

プラグインを使った方法1

私は通常、Contact Form 7 Dynamic Text ExtensionプラグインをカスタムCF 7タグを作成するための簡単な方法として使用します。これにはまだ少しコーディングが必要です。遠くに行って自分のCF7タグをコーディングすることもできますが、まだ試したことはありませんが、この回答を編集することになるかもしれません。

このプラグインを使用すると、タグをCF7フォームに次のように配置できます。

[dynamichidden custom-reg-code “CF7_custom_reg_code”]

そしてCF7の管理者ページの電子メールペインに[custom-reg-code]を挿入します。

うまく機能させるには、文字列を生成するための一致するショートコードを自分で作成します。

function generateRandomString($length = 10) {
    return substr(str_shuffle(str_repeat($x='0123456789', ceil($length/strlen($x)) )),1,$length);
}

function wpse306816_CF7_custom_reg_code() {

    return date("Ymd") . generateRandomString();
}

add_shortcode('CF7_custom_reg_code', 'wpse306816_CF7_custom_reg_code');

乱数生成のための https://stackoverflow.com/a/13212994/6347850 へのハットチップ。

現在の日付と、フォームの送信済み電子メールで使用したり、他のCF7フィールドと同じようにFlamingoに保存したりできる乱数で構成された隠しフィールドがフォームに表示されます。

方法2、プラグインを使わずに

そしてちょっとした調査によれば、自分のCF7タグを書くだけのほうが簡単で、プラグインに煩わされないことがさらに簡単です。

CF7タグ[serial]を作成するには、wpcf7_initアクションフックのwpcf7_add_form_tag()を使用してタグの名前とそれを処理するコールバック関数の名前を渡して登録します。

add_action( 'wpcf7_init', 'wpse306816_CF7_add_custom_tag' );

function wpse306816_CF7_add_custom_tag() {
    wpcf7_add_form_tag(
        'serial',
        'wpse306816_CF7_handle_custom_tag' );
}

そしてあなたの場合は、コールバックは単にシリアル文字列値を返す必要があります。

function generateRandomString($length = 10) {
    return substr(str_shuffle(str_repeat($x='0123456789', ceil($length/strlen($x)) )),1,$length);
}

function wpse306816_CF7_handle_custom_tag( $tag ) {
    return date("Ymd") . generateRandomString();
}
1
Andy Macaulay-Brook