Pop-up WordPress formularz kontaktowy
Ostatnio jeden z gości zadał pytanie, jak utworzyć wyskakujący formularz kontaktowy? Proponuję stworzyć taki formularz za pomocą dwóch wtyczek Formularz kontaktowy 7 i Łatwy FancyBox.
Pierwsza rzecz, której potrzebujesz, jest zainstalowanie obu wtyczek. Po zainstalowaniu i aktywacji należy przejść do menu w panelu administracyjnym Łączność (CF7) i dostosować formularz. Proces instalacji jest dość prosty, pominę tę część samouczka, jeśli jest taka potrzeba, napisz do mnie w komentarzach, a ja uzupełnię tę lekcję. Po utworzeniu formularza wtyczka zaoferuje Ci krótki kod do wstawienia do artykułu. Będzie to wyglądać tak:
Po utworzeniu formularza musisz utworzyć stronę i wstawić do niej krótki kod formularza:
 |
|
Więc, formę mamy, pozostaje, aby pojawił się w wyskakującym oknie, Aby to zrobić, zastąp krótki kod formularza następującym kodem.
|
1 2 3 4 5 6 7 |
<a href="#contact_form_pop" class="fancybox">Открыть контактную форму</a> <div style="display:none" class="fancybox-hidden"> <div id="contact_form_pop"> [contact-form 1 "Contact form 1"] </div> </div> |
Przykład wstawiania kodu formularza:
Po wklejeniu kodu i zapisaniu strony, możesz kliknąć w link, wówczas w wyskakującym okienku otworzy się formularz kontaktowy.
Sprawdziłem kod na jednej z rozwijanych przeze mnie stron, wszystko działa poprawnie. Powodzenia w rozwijaniu strony.
- Podstawowy kurs projektowania stron internetowych;
- Układ stron;
- Ogólny kurs CMS WordPress oraz kontynuacja kursu dotyczącego tworzenia szablonów;
- Tworzenie stron internetowych w PHP.
Witam!
I jak dołączyć ten zaktualizowany kod formularza do przycisku. Przycisk w postaci obrazu lub komórki w menu nawigacyjnym.
Powiedz mi, Proszę!
Aby link wywołał formularz kontaktowy należy wpisać w nim kod jak na przykładzie “Przykład wstawiania kodu formularza:”. Możesz stylizować link za pomocą CSS, jak chcesz dla swojego projektu.
Siergiej trochę wyżej w kodzie jest przykład, Myślę, że jeśli zainstalujesz obie wtyczki i pójdziesz za przykładem, wszystko stanie się jasne. Jeśli nie rozumiesz, napisz, na której stronie musisz to zrobić i gdzie, Spróbuj pomóc.
Dziękuję Ci! Stało się
Bardzo się cieszę, że moja praca z wyskakującym formularzem kontaktowym nie poszła na marne.
Idealne rozwiązanie. Wystarczy zagłębić się trochę w styl samego formularza kontaktowego. Zrób jej porządek.
Tutaj głównym zadaniem było pokazanie jak osadzić formularz, a stylizacja form jest kolejnym krokiem i odbywa się w stylach (css).
Witam, powiedz mi, gdzie zmienić style? jak sprawić, by przycisk nie był tekstem?
Style motywów w WordPress są tutaj: /wp-content/themes/folder o nazwie theme/style.css.
Przycisk, a nie tekst w którym miejscu? W naszym przykładzie mamy przycisk przesyłania.
Z jakiegoś powodu nie działa w operze. Nic się nie dzieje po kliknięciu. W Chrome po ponownym kliknięciu nie ładuje formularzy, i samą stronę w tym wyskakującym okienku.
Zresetuj link w komentarzu, jeśli strona jest dostępna w Internecie, może pomóc.
Dzień dobry ! Podobał mi się artykuł. Ale formularz pojawia się raz. I wtedy wyskakuje cała strona!!!!!Pomoc!!!
Musisz zajrzeć do serwisu, tak trudno powiedzieć.
Była podobna usterka – rozwiązany przez zainstalowanie Easy FancyBox
Dzięki za wskazówkę! Myślę, że ta wtyczka działa lepiej, ponieważ miałem również problem opisany powyżej na niektórych stronach. Dodam to do lekcji.
Dzień dobry! Dzięki za świetny artykuł. I jak to zrobić, aby formularz pojawiał się po kliknięciu przycisku shortcode?
Aby formularz odpowiadał na przycisk, możesz po prostu stylizować link “Otwórz formularz kontaktowy”, lub alternatywnie, po prostu dodaj klasę class= do żądanego elementu”fantazyjne pudełko”.