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
- Zaloguj się do WordPress panelu admina i przejdź do Strony > Wszystkie strony.
- Wybierz potrzebną stronę i kliknij opcję Edytuj z pomocą kreatora stron Elementor.
- Aby dodać formularz kontaktowy na dole strony, przewiń ją w dół i dodaj nową sekcję.
- Dostosuj jej wygląd w menu po lewej stronie. Możesz edytować trzy sekcje: Układ, Styl i Zaawansowane.
- W sekcji Styl można wybrać typ tła, a następnie wybrać i przesłać do niego zdjęcie z Biblioteki multimediów.
- Za pomocą sekcji Zaawansowane można zastosować niestandardowe wypełnienie do swojej sekcji.
- Następnie przejdź do pola wyszukiwania elementów, znajdź widżet formularz Contact Form 7 i upuść go w obszarze sekcji.
- 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.
- Aby dostosować jego styl, przejdź do sekcji Styl. Zawiera wszystkie rodzaje ustawień dostosowywania dla formularza kontaktowego.
- Zacznijmy od stylizacji tekstów formularza, aby wyglądali bardziej czytelnie.
Najpierw wybierz odpowiedni kolor za pomocą Próbnika kolorów. - Aby dostosować typografię, włącz tą opcję, przełączając ją na "tak".
- Teraz możesz zobaczyć dodatkowe ustawienia, w których można wybrać wymagany rozmiar fontu, rodzinę fontów i jego wagę.
- 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.
- W bloku Kontrola wybierz tryb normalny i zmień kolor zastępczy.
- Kolejnym krokiem jest zmiana wypełnienia - po prostu wprowadź potrzebne wartości w pikselach w odpowiednich polach.
- Można również zmieniać wartości marginesów w taki sam sposób, jak marginesy wypełnienia.
- Następnie wybierz typ obramowania i wprowadź niestandardową szerokość obramowania. Ponadto możesz zmienić kolor obramowania.
- Następnie przełącz opcję Box Shadow na "tak". Dostosuj kolor cienia, jego przezroczystość, rozkład cieni i pozycję cienia.
- Teraz dostosuj przycisk przesyłania.
- 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. - Można również ustawić niestandardowe obramowanie, aby kąt małego i gładkiego przycisku był zgodny z określonym rodzajem obramowania.
- Teraz wróćmy do początku zakładki. Zmień ustawienia przycisku w bloku Hover, w tym kolory przycisków.
- Ostatnim krokiem jest dostosowanie stylu alertu.
- W tym miejscu możesz zmienić opcje typowania alertów, zastosować niestandardowy promień obramowania w polu alertu i zmienić kolory alertów.
- 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.
- Przejdź do panelu Elementy i wyszukaj widżet Nagłówki.
- Upuść go na miejsce, do którego chciałbyś dodać nagłówek.
- Zastąp domyślny tekst w sekcji Treść przez swoje treści.
- Przejdź do sekcji Styl i zmień kolor tekstu nagłówka, wyrównanie i dodaj inne ustawienia stylu.
- 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.