Czy chcesz dostosować formularz kontaktowy 7 za pomocą wtyczki Elementor's Essential Addons?
Formularz kontaktowy 7 jest jednym z WordPress wtyczki z najpopularniejszych konstruktorów formularzy. Jest całkowicie darmowy i możesz go użyć do stworzenia formularz kontaktowy na twojej stronie WordPress.
Możesz także tworzyć wiele rodzajów formularzy, takich jak formularz rezerwacji lub formularz przesyłania plików. Oferuje 14 rodzajów pól, z których możesz korzystać podczas tworzenia formularza.
Zobacz także: Jak używać widżetów/szablonów Elementora jako bloków Gutenberga
Jednym z typowych problemów z wtyczką formularza kontaktowego 7 jest jej proces dostosowywania. Formularz kontaktowy 7 używa domyślnego stylu twojego WordPress zaleta. Możesz użyć innego stylu, ale wymagane będą umiejętności CSS. Jeśli nie masz żadnych umiejętności CSS, możesz użyć modułu Niezbędne dodatki stylizować swoją formę.
Essential Addons to dodatek do Elementora, który usprawnia proces dostosowywania formularzy Contact Form 7 za pomocą Elementora. Elementor i Essential Addons to wtyczki freemium. Możesz użyć darmowych wersji obu do stylizowania formularzy Contact Form 7.
Jak stylizować formularz kontaktowy 7 za pomocą niezbędnych dodatków
Zanim zaczniesz stylizować formularze, upewnij się, że je zainstalowałeś Elementor et Niezbędne dodatki. Po zainstalowaniu i aktywacji utwórz nową stronę (Strony – > Dodaj) i edytuj go za pomocą Elementora.
Przed rozpoczęciem procesu dostosowywania ustaw układ strony, klikając ikonę koła zębatego w lewym dolnym rogu. Ustaw układ z menu rozwijanego.
Dodaj nową sekcję, klikając ikonę plusa w polu edycji i przeciągając widżet Formularz kontaktowy EA 7 z lewego panelu w edytorze.
Przejdź do lewego panelu i wybierz formularz, którego styl chcesz dostosować.
Po wybraniu formularza przejdź do zakładki Styl. Jak widać, możesz ustawić kilka opcji stylizacji. Oto typowe opcje stylizacji, które możesz ustawić.
- Szerokość formularza, wyrównanie i tło
Pod blokiem Kontener formularzy, kliknij selektor kolorów w sekcji Typ tła i ustaw żądany kolor tła formularza. Jako tła można użyć jednolitego koloru lub koloru gradientu.
Czytaj także: Elementor: Jak importować lub eksportować szablony
Aby ustawić wyrównanie formularza, po prostu wybierz preferowaną opcję wyrównania w sekcji Wyrównanie formularza.
Aby ustawić szerokość formularza, ustaw w polu wartość Maksymalna szerokość formularza Maksymalna szerokość formularza.
- Pole tła, szerokość obramowania i promień
Aby zdefiniować tło pól, szerokość i promień obramowania, możesz otworzyć sekcję Wejście i obszar tekstowy. Kliknij próbnik koloru pola Kolor tła ustawić tło.
Możesz także ustawić kolor tła pól w trybie debugowania, klikając zakładkę FOCUS.
Aby zdefiniować szerokość pól, możesz zdefiniować wartość w polach Szerokość wejściowa. W tej sekcji możesz również ustawić szerokość pola tekstowego w Szerokość pola tekstowego.
Aby ustawić promień obramowania, po prostu przejdź do edycji pola Promień granicy i ustaw preferowaną wartość granicy. Możesz także ustawić typografię (rodzina czcionek, rozmiar czcionki, styl czcionki) klikając ikonę ołówka w polu typografia.
- Etykiety
Essential Addons pozwala również dostosować styl etykiet formularzy. Możesz ustawić kolor tekstu, a także typografię. Aby to zrobić, otwórz opcję Etykiety. Ustaw kolor tekstu, klikając selektor kolorów w polu Kolor tekstu.
Aby ustawić typografię, kliknij ikonę ołówka na polu Typografia.
- przycisk Prześlij
Aby dostosować styl przycisku wysyłania, otwórz blok Umieść przycisk. Tutaj możesz ustawić wyrównanie przycisku, szerokość, kolor tła, kolor tekstu, promień obramowania oraz typografię.
- Komunikat o błędzie
Aby dostosować styl komunikatu o błędzie, możesz otworzyć blok Błędy. Możesz ustawić kolor tekstu komunikatu o błędzie, typografię, kolor tła błędu sprawdzania poprawności, kolor tekstu błędu sprawdzania poprawności itp.
Możesz ustawić kilka innych opcji stylizacji. Możesz bawić się lewym panelem, dopóki nie będziesz zadowolony ze stylu swojego formularza.
Możesz dodać kilka innych elementów do swojej strony, korzystając z dostępnych widżetów oferowanych przez Elementor i Essential Addons. Kiedy skończysz, kliknij przycisk PUBLISH u dołu lewego panelu, aby opublikować swoją stronę.
Integracja formularza ze zwykłą stroną
Po kliknięciu przycisku PUBLISH, Twoja strona kontaktowa została w zasadzie opublikowana. Sama strona jest obsługiwana przez Elementor. Jeśli wolisz dodać swoje formularz kontaktowy 7 na zwykłą stronę (stronę utworzoną za pomocą Gutenberga, domyślnego edytora WordPress), możesz zainstalować wtyczkę Bloki Elementora dla Gutenberga. Ta wtyczka przekształci szablon Elementora w blok Gutenberga.
Aby zarejestrować swoje formularz kontaktowy 7 jako szablon Elementora, kliknij przycisk strzałki obok przycisku OPUBLIKUJ / AKTUALIZUJ na lewym panelu i wybierz Zapisać jako szablon.
Nadaj szablonowi nazwę i kliknij przycisk REKORD.
Utwórz nową stronę (Strony – > Dodaj) i nadaj mu nazwę, taką jak „skontaktuj się z nami”, „kontakt” lub dowolną inną nazwę, którą lubisz.
Dodaj nowy blok i wybierz Biblioteka Elementora i wybierz właśnie utworzony szablon formularza kontaktowego.
A teraz właśnie spersonalizowałeś swój formularz Contact Form 7.
Pobierz Elementor Pro teraz !!!
Wnioski
Tutaj ! To wszystko w tym artykule, który pokazuje, jak dostosować formularz kontaktowy 7 za pomocą Essential Addons. Jeśli masz jakiekolwiek wątpliwości, jak się tam dostać, daj im znać w commentaires.
Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
