ContactForm7 – obsługa on_​submit po nowemu

Z końcem 2017 roku wtycz­ka ContactForm7 straci­ła dwa obsłu­gi­wa­ne zdarze­nia: "on_​sent_​ok" i "on_​submit". Zdarze­nia te progra­mo­wa­ło się w dodat­ko­wych ustawie­niach formu­la­rza. Określa­ły w jaki sposób ma się zacho­wać skrypt po wysła­niu formu­la­rza. Najczę­ściej przekie­ro­wy­wa­ło użytkow­ni­ka na inną stronę albo wysyła­ło infor­ma­cję do Google Analytics.

on_sent_ok: "ga( 'send', 'event', 'Contact Form', 'submit' );

Dostaw­ca wtycz­ki pisze na stronie, że można z tego korzy­stać, ale z czasem funkcja zniknie i może narobić nam kłopo­tów. W zamian dosta­je­my 5 zdarzeń obsłu­gi­wa­nych przed DOM Events

Lista stworzonych zdarzeń dla Contact Form 7 (ContactForm7) w DOM Events

• wpcf7invalid — urucho­mio­ny gdy wysył­ka formu­la­rza Ajax'em powio­dła się, ale wiado­mość nie zosta­ła wysła­na z uwagi na wadli­wie wypeł­nio­ne pola.
• wpcf7spam — urucho­mio­ny gdy wysył­ka formu­la­rza Ajax'em powio­dła się, ale wiado­mość nie zosta­ła wysła­na z uwagi na zauwa­żo­ny SPAM w treści lub nagłówkach.
• wpcf7mailsent — urucho­mio­ny gdy wysył­ka formu­la­rza Ajax'em powio­dła się, a wiado­mość zosta­ła wysłana.
• wpcf7mailfailed — urucho­mio­ny gdy wysył­ka formu­la­rza Ajax'em powio­dła się, ale nie udało się wysłać mejla.
• wpcf7submit — urucho­mio­ny gdy wysył­ka formu­la­rza Ajax'em powio­dła się nieza­leż­nie od innych zdarzeń.

Jak to obsłużyć?

Kod JavaScript z naszym zdarze­niem powinien znaleźć się w stopce strony (tak mówi dokumen­ta­cja). Sam umieści­łem go w nagłów­ku i też zadzia­łał. Warto jednak trzymać się dokumen­ta­cji, bo w przypad­ku kolej­nych zmian, znów mogą pojawić się problemy.

Są dwa sposo­by: ręczny (dla progra­mi­stów) i za pomocą plugi­nu (dla wszystkich).

Sposób ręczny:

1. Znajdź plik functions.php, który umiesz­czo­ny jest katalo­gu aktyw­ne­go szablo­nu strony
2. wstaw poniż­szy kod:

   <?php
   add_action( 'wp_footer', 'mycustom_wp_footer' );
   function mycustom_wp_footer()
   {
   ?>
   <script type="text/javascript">
       document.addEventListener( 'wpcf7mailsent', function( event ) {
           ga( 'send', 'event', 'Contact Form', 'submit' );
       }, false );
   </script>
   <?php
   }
   ?>

3. Z dodat­ko­wych ustawień formu­la­rza usuń linie mówią­ce o "on_​sent_​ok" lub "on_​submit".

Instalacja poprzez plugin

Jeżeli nie posia­da­my umięt­no­ści progra­mi­sty, to trzeba zainsta­lo­wać plugin, np. Custom CSS & JS. Następ­nie dodać wstaw­kę JS do stopki z tym kodem:

<script type="text/javascript">
    document.addEventListener( 'wpcf7mailsent', function( event ) {
        ga( 'send', 'event', 'Contact Form', 'submit' );
    }, false );
</script>

Ten kod spowo­du­je, że jeżeli mail zosta­nie wysła­ny, to google analy­tics zareje­stru­je akcję "submit" dla zdarze­nia "Contact Form". W ten sposób możemy śledzić każde zdarze­nie, ale nie tylko na potrze­by staty­styk. Nasz system może reago­wać na błędy i genero­wać komuni­ka­ty, urucha­miać inne skryp­ty czy wyłączyć domyśl­ne akcje.