Porady & Profesjonalne strony internetowe / usługi www

Jak dodać popup do formularza Contact Form 7?

Wpis jest polskim przekładem artykułu:
timersys.com/display-popup-submitting-cf7-form/
- z wolną interpretacją.


Czasami może zdarzyć się tak, że będziemy chcieli dodać popup do naszego formularza - czy to z zapytaniem o zapis do newslettera, czy po prostu z konkretną informacją. Wbrew pozorom możemy zrobić to w bardzo prosty sposób.

Potrzebne nam będą:
Popups - WordPress Popup
Contact Form 7

Po zainstalowaniu wtyczek czas na stworzenie popupa; powiedzmy, że chcemy stworzyć najprostszy, z zapisem do newslettera po prawidłowym wysłaniu formularza.

tworzenie popupa

Oczywiście takowy popup musimy(lub nie) ostylować po swojemu.

Następnie musimy ustawić ręczne wywołanie popupa poprzez wybranie opcji "Manual triggering" w zakładce "Display Options":

Po opublikowaniu popupa wracamy na listę i spisujemy jego ID(i upewniamy się, że jest włączony):

id aktywnego popupa

Teraz przechodzimy do samego formularza. Contact Form 7 tworzy standardowo jeden domyślny lub po prostu tworzymy takowy sami(w sieci znajdziecie tutoriale jak stworzyć odpowiednio formularz oparty o html - który CF7 bez problemu wspiera). Przechodzimy do zakładki "Ustawienia dodatkowe" - to tutaj odbywają się dodatkowe konfiguracje dla naszego formularza.

Należy mieć na uwadze fakt, że mamy dostępne dwie formy podłączenia:
on_sent_ok - po prawidłowym wysłaniu formularza
on_submit - po wysłaniu formularza(czyli po prostu po kliknięciu na przycisk "wyślij")

Który sposób wybierzemy zależy wyłącznie od naszej potrzeby. W tym przykładzie wykorzystamy prawidłowe wysłanie formularza.

Naszym kodem będzie:

on_sent_ok: "SPU.show(15);"

- pierwszy człon kodu jak widać jest warunkiem, a następny wywołaniem, który działa podobnie jak poniższy kawałek jQuery:

$('body').on('mailsent.wpcf7', function(){
       SPU.show( 15 );
       SPU.track( 15, false ); // śledzi wyrażenie , po ustawieniu na true będzie śledzić konwersję
});

W ustawieniach dodatkowych będzie to więc wyglądać w ten sposób:

ustawienia dodatkowe cf7

Więcej na temat dodatkowych ustawień możecie przeczytać na specjalnej podstronie dokumentacji. Znajdziecie tam również informacje jak włączyć "tryb demo", który bardzo pomaga przy tworzeniu i testowaniu złożonych formularzy.


Jest to oczywiście tylko jeden z przykładów. CF7 bardzo dobrze łączy się ze wszelkim kodem html/css/js i do tego w połączeniu z odpowiednią wtyczką Popups można stworzyć naprawdę potężne moduły.