ContactForm7 – obsługa on_submit po nowemu

Z końcem 2017 roku wtyczka ContactForm7 straciła dwa obsługiwane zdarzenia: „on_sent_ok” i „on_submit”. Zdarzenia te programowało się w dodatkowych ustawieniach formularza. Określały w jaki sposób ma się zachować skrypt po wysłaniu formularza. Najczęściej przekierowywało użytkownika na inną stronę albo wysyłało informację do Google Analytics.

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

Dostawca wtyczki pisze na stronie, że można z tego korzystać, ale z czasem funkcja zniknie i może narobić nam kłopotów. W zamian dostajemy 5 zdarzeń obsługiwanych przed DOM Events

ContactForm7

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

  • wpcf7invalid — uruchomiony gdy wysyłka formularza Ajax’em powiodła się, ale wiadomość nie została wysłana z uwagi na wadliwie wypełnione pola.
  • wpcf7spam — uruchomiony gdy wysyłka formularza Ajax’em powiodła się, ale wiadomość nie została wysłana z uwagi na zauważony SPAM w treści lub nagłówkach.
  • wpcf7mailsent — uruchomiony gdy wysyłka formularza Ajax’em powiodła się, a wiadomość została wysłana.
  • wpcf7mailfailed — uruchomiony gdy wysyłka formularza Ajax’em powiodła się, ale nie udało się wysłać mejla.
  • wpcf7submit — uruchomiony gdy wysyłka formularza Ajax’em powiodła się niezależnie od innych zdarzeń.

Jak to obsłużyć?

Kod JavaScript z naszym zdarzeniem powinien znaleźć się w stopce strony (tak mówi dokumentacja). Sam umieściłem go w nagłówku i też zadziałał. Warto jednak trzymać się dokumentacji, bo w przypadku kolejnych zmian, znów mogą pojawić się problemy.

Są dwa sposoby: ręczny (dla programistów) i za pomocą pluginu (dla wszystkich).

Sposób ręczny:

  1. Znajdź plik functions.php, który umieszczony jest katalogu aktywnego szablonu strony
  2. wstaw poniższy kod:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <?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 dodatkowych ustawień formularza usuń linie mówiące o „on_sent_ok” lub „on_submit”.

Instalacja poprzez plugin

Custom CSS & JS
W czerwonej ramce jest pole wyboru miejsca dla kodu JS

Jeżeli nie posiadamy umiętności programisty, to trzeba zainstalować plugin, np. Custom CSS & JS. Następnie dodać wstawkę JS do stopki z tym kodem:

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

Ten kod spowoduje, że jeżeli mail zostanie wysłany, to google analytics zarejestruje akcję „submit” dla zdarzenia „Contact Form”. W ten sposób możemy śledzić każde zdarzenie, ale nie tylko na potrzeby statystyk. Nasz system może reagować na błędy i generować komunikaty, uruchamiać inne skrypty czy wyłączyć domyślne akcje.

Dodaj komentarz