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

Privacy Preference Center

Treść banner z cookies

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.

google analitycs

Close your account?

Your account will be closed and all data will be permanently deleted and cannot be recovered. Are you sure?