[wp]CF7をこっそり仕込んでこっそり送信するギミック

送信の挙動はあるからバレるんだけどね。

フォームを見えなくする
フォームを指定できるようにする
埋め込む
こっそり送信
こっそりにならない
おまけ：DOMイベントを加える

フォームを見えなくする

CF7はこんな感じに。

[text* example00 "example"]
[hidden example01]
[hidden example02]
[hidden example03]
[hidden example04]
[submit]

全部hiddenにしたらCF7がアラートを吐いたんで、一つは必須のtextを作っておくのが無難。

input:hiddenも作れるんだけどどうせ他の要素が露出しちゃうから、ラッピングしてそっちのcssで非表示にすればいいですね。

フォームを指定できるようにする

ショートコードに「html_id」を足せば<form>にidを振れるので、明確に指定できるようにしておく。

エラー: コンタクトフォームが見つかりません。

埋め込む

なんでもいいですよ。

<div style="display:none;">
↓普通に埋め込む場合
<?php echo do_shortcode('エラー: コンタクトフォームが見つかりません。'); ?>
↓SCFで埋め込む場合
<?php echo do_shortcode(SCF::get('shortcode')); ?>
</div>

上記にある通り、こっそりやりたいから非表示にしておく。

こっそり送信

jQueryとかjsとかで、formを発火させることができる。

まずこれ。

$('button').on('click',function(){
    $('form#sample').submit();
})

遠隔で「submitを押す」んじゃなくて、「formをsubmitさせる」という感じですね。

次にこれ。

$('button').on('click',function(){
    $('form#sample input[type="submit"]').trigger('click');
})

submitをクリックしたことにする。

どっちでも送信はできるんだけど、「wpcf7mailsent」とかでDOMイベントを操作したい場合を踏まえて.trigger()で動かしたほうがいい。というか、.submit()じゃ動かなかった。

こっそりにならない

送信完了後、URLにタグがついちゃうんだよね。

https://example.com/#wpcf7-****-**

動作的にもなんか処理してるな―みたいな時間と再読み込み的なのが発生するのでよろしくないですね。

無理ですね。

おまけ：DOMイベントを加える

例えばリンクをクリックしたと思わせて、実は送信+リダイレクトっていう見せ方ができる。

本家の解説では、こうなる。

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    setTimeout( () => {
        location = 'http://example.com/';
    }, 3000 ); // Wait for 3 seconds to redirect.
}, false );
</script>

上記とこの解説を参考に、jQueryで書くとこう。

$(document).on('wpcf7mailsent','.wpcf7',function(){
    window.location.href = "http://example.com/";
})

色々できそうな感じがするんだけど、色々突っ込むと後で調整するときにしんどいのでおすすめできない。