Tutorial: jak dodać formularz Contact Form 7 w kreatorze stron Elementor

Zwykle właściciel strony potrzebuje jakiegoś formularza do interakcji z odwiedzającymi i użytkownikami. Jednym z najlepszych jest formularz Contact Form 7.

Jest to prosty i elastyczny widżet formularza dla feedbacków. W tym tutorialu pokażę Ci jak dodać formularz Contact Form 7 na stronę WordPress z pomocą wtyczki JetElements do kreatora stron Elementor. Postępuj zgodnie z pokrokowymi instrukcjami, a zobaczysz że instalacja formularza jest naprawdę łatwa!

Dodajemy formularz Contact Form 7 w kreatorze stron Elementor

1. Zaloguj się do WordPress panelu admina i przejdź do Strony > Wszystkie strony.
2. Wybierz potrzebną stronę i kliknij opcję Edytuj z pomocą kreatora stron Elementor.
3. Aby dodać formularz kontaktowy na dole strony, przewiń ją w dół i dodaj nową sekcję.
4. Dostosuj jej wygląd w menu po lewej stronie. Możesz edytować trzy sekcje: Układ, Styl i Zaawansowane.
5. W sekcji Styl można wybrać typ tła, a następnie wybrać i przesłać do niego zdjęcie z Biblioteki multimediów.
6. Za pomocą sekcji Zaawansowane można zastosować niestandardowe wypełnienie do swojej sekcji.
7. Następnie przejdź do pola wyszukiwania elementów, znajdź widżet  formularz Contact Form 7 i upuść go w obszarze sekcji.
8. Po lewej stronie na karcie Zawartość można wybrać jeden z istniejących formularzy kontaktowych z listy rozwijanej. Należy pamiętać, że można wcześniej utworzyć szablon formularza kontaktowego za pomocą wtyczki formularz Contact Form 7.

   
9. Aby dostosować jego styl, przejdź do sekcji Styl. Zawiera wszystkie rodzaje ustawień dostosowywania dla formularza kontaktowego.

   
   

10. Zacznijmy od stylizacji tekstów formularza, aby wyglądali bardziej czytelnie.
    Najpierw wybierz odpowiedni kolor za pomocą Próbnika kolorów.
11. Aby dostosować typografię, włącz tą opcję, przełączając ją na "tak".
12. Teraz możesz zobaczyć dodatkowe ustawienia, w których można wybrać wymagany rozmiar fontu, rodzinę fontów i jego wagę.
13. Poniżej można również dostosować powiadomienia o błędach podczas wypełniania i wysyłania formularzy. Wystarczy wybrać kolor powiadomienia, zmienić font i zastosować własne wartości, w tym margines i wyrównanie.
14. W bloku Kontrola wybierz tryb normalny i zmień kolor zastępczy.
15. Kolejnym krokiem jest zmiana wypełnienia - po prostu wprowadź potrzebne wartości w pikselach w odpowiednich polach.
16. Można również zmieniać wartości marginesów w taki sam sposób, jak marginesy wypełnienia.
17. Następnie wybierz typ obramowania i wprowadź niestandardową szerokość obramowania. Ponadto możesz zmienić kolor obramowania.
18. Następnie przełącz opcję Box Shadow na "tak". Dostosuj kolor cienia, jego przezroczystość, rozkład cieni i pozycję cienia.
19. Teraz dostosuj przycisk przesyłania.
20. Zmień kolor w normalnym trybie i włącz opcje typografii tekstów przycisków.
    Kontynuuj zmianę rozmiaru fontu, rodziny fontów, wagi fontu i wartości wypełnienia.
21. Można również ustawić niestandardowe obramowanie, aby kąt małego i gładkiego przycisku był zgodny z określonym rodzajem obramowania.
22. Teraz wróćmy do początku zakładki. Zmień ustawienia przycisku w bloku Hover, w tym kolory przycisków.
23. Ostatnim krokiem jest dostosowanie stylu alertu.
24. W tym miejscu możesz zmienić opcje typowania alertów, zastosować niestandardowy promień obramowania w polu alertu i zmienić kolory alertów.
25. Teraz Twój nowy formularz kontaktowy jest gotowy i można dodawać moduł nagłówków tuż nad nim, aby utworzyć nagłówek, który zachęci odwiedzających do korzystania z formularza.
26. Przejdź do panelu Elementy i wyszukaj widżet Nagłówki.
27. Upuść go na miejsce, do którego chciałbyś dodać nagłówek.

    
28. Zastąp domyślny tekst w sekcji Treść przez swoje treści.
29. Przejdź do sekcji Styl i zmień kolor tekstu nagłówka, wyrównanie i dodaj inne ustawienia stylu.
30. Możesz również dostosować typografię tekstu nagłówka według swoich życzeń i potrzeb.

Tworzenie responsywnych stron: jakie masz opcje? [Darmowa e-książka]

Klikając przycisk akceptujesz Politykę prywatności i Regulamin korzystania z serwisu TemplateMonster.

* * *

Gotowe! Właśnie stworzyliśmy nowy formularz kontaktowy za pomocą modułu JetElements formularz Contact Form7. Zapisz zmiany i przejdź do swojej strony, aby zobaczyć wyniki.

Ten artykuł został przetłumaczony z angielskiego. Oryginał można znaleźć tutaj: How to Add Contact Form 7 Using JetElements Add-on for Elementor – Tutorial.