Jak dostosować swój formularz kontaktowy 7 Styl w łatwy sposób?
Opublikowany: 2022-04-10Formularz kontaktowy to bardzo ważny element każdej strony internetowej. Używamy ich do zbierania i udostępniania różnego rodzaju informacji, dlatego musimy dbać o to, aby wyglądały tak samo dobrze jak reszta naszej witryny . Formularz kontaktowy, który jest zbyt prosty, ze stylem, który po prostu wydaje się nie pasować do strony, nie może wzbudzić w użytkownikach poczucia zaufania, a szkoda byłoby stracić odbiorców właśnie wtedy, gdy chcieli krok dalej i zostaw część swoich danych w swoim formularzu kontaktowym.
Bardzo popularnym sposobem tworzenia formularza kontaktowego jest wtyczka Contact Form 7 , praktyczne i łatwe w użyciu narzędzie, które często jest dołączane bezpłatnie do wielu motywów WordPress, które umożliwia łatwe tworzenie wszelkiego rodzaju formularzy kontaktowych . Wtyczka ta obejmuje wszystkie techniczne aspekty tworzenia formularza kontaktowego – aby go wystylizować, potrzebujesz dodatkowych umiejętności lub innej wtyczki.
W tym artykule pokażemy Ci, jak łatwo możesz dopasować formularze kontaktowe do wyglądu Twojej witryny za pomocą bezpłatnego narzędzia .
Bądź na bieżąco, aby dowiedzieć się więcej o:
- Używanie dodatków Qi dla Elementora do stylizowania formularzy kontaktowych
- Ustawianie stylu formularza kontaktowego
Qi Addons for Elementor to darmowa, bogata w funkcje wtyczka, która zawiera 60 widżetów i zawiera widżet Contact Form 7 , który został specjalnie stworzony, aby pomóc Ci w stylizacji formularzy. Wtyczka wymaga zerowej znajomości kodowania i dosłownie każdy może z niej wygodnie korzystać. Nie daje Ci możliwości tworzenia formularza kontaktowego, ale jeśli korzystasz z wtyczki Contact Form 7, dzięki Qi będziesz mógł dostosować i przeprojektować swoje formularze w taki sposób, aby idealnie pasowały do stylu Twojej witryny.
Dodatki Qi do Elementora są łatwe w instalacji i konfiguracji, a procedura jest prawie taka sama, jak w przypadku każdej innej wtyczki.
Po zainstalowaniu przejdź do strony, na której znajduje się formularz kontaktowy, który chcesz stylizować, i wybierz jego edycję w Elementorze.
Następnie wpisz Contact Form 7 w polu wyszukiwania w menu po lewej stronie, aby znaleźć widżet Contact Form 7.
Teraz, gdy już go otrzymasz, kliknij go i najedź na miejsce, w którym chcesz umieścić formularz kontaktowy .
Formularz, który dodajesz w ten sposób, jest formularzem utworzonym za pomocą wtyczki Contact Form 7, ten widżet ma na celu pomóc Ci w stylizacji formularza, nie możesz za jego pomocą utworzyć formularza . Więc teraz masz swój formularz kontaktowy umieszczony tam, gdzie chcesz, i możesz zobaczyć ustawienia widżetu Formularz kontaktowy 7 w menu po lewej stronie.
Pierwsza zakładka w menu daje Ci możliwość wyboru typu formularza kontaktowego, który chcesz umieścić na stronie . Do wyboru mamy trzy opcje – Formularz kontaktowy 1, Newsletter i Skontaktuj się z nami, możesz oczywiście wybrać dowolny z formularzy, które wcześniej stworzyłeś dla swojej witryny. Pokażmy teraz, w jaki sposób dostosowaliśmy formularz Skontaktuj się z nami w naszej witrynie.
Aby otworzyć opcje stylizacji formularza, kliknij kartę Styl .
Pierwsza opcja odnosi się do typografii etykiet , gdzie możesz ustawić czcionkę, rozmiar czcionki, odstępy między słowami etykiety, styl czcionki, odstępy między literami w słowach i wspaniałe jest to, że widzisz wszystkie zmiany żyj natychmiast, aby nie robić nic na ślepo .
Na poniższym obrazku możesz dokładnie zobaczyć, jak nasze wybory odbiły się na typografii etykiety.
Kolejna opcja dotyczy koloru etykiety .
Możesz stworzyć swój własny odcień, w zależności od Twoich potrzeb. Do naszej etykiety wybieramy ciemnoniebieski, ponieważ pasuje on do koloru tła strony.
Teraz, gdy już masz ustawiony styl etykiety, następne ustawienia odnoszą się do stylu wprowadzania .
Będziesz mieć tutaj również podobne opcje – możesz wybrać styl, rozmiar i kolor czcionki wejściowej typografii . Możesz także ustawić kolor tła pola wejściowego, jeśli nie chcesz, aby było ono białe, jak to jest domyślnie. Znajdziesz tu również ustawienia dostosowywania stylu obramowania pól wejściowych i możesz wybierać między pełnymi, przerywanymi, rowkowanymi, kropkowanymi, podwójnymi lub brakami, a dla każdej z opcji możesz wprowadzić dodatkowe korekty.
Możesz także ustawić różne style, gdy pola wejściowe są aktywne . Wszystkie te same opcje są do Twojej dyspozycji, ale zostaną zastosowane tylko wtedy, gdy pola wejściowe są aktywne.
Kolejne ustawienia odnoszą się do stylu pola wyboru . Ten drobny element jest bardzo ważny w formularzu kontaktowym i powinien wyglądać schludnie i łatwo dostępny, ponieważ jest to krok, w którym oferujesz wybór użytkownikom swojej witryny.
Dzięki Qi z łatwością sprawisz, że ten element będzie wyglądał idealnie. Możesz ustawić rozmiar wejściowy pola wyboru , możesz zostawić mniej lub więcej odstępu między dwoma polami wyboru , jak również między polami wyboru i innymi polami wejściowymi . Na poniższym zdjęciu wyraźnie widać, jak nasze wybory wpływają w tym przypadku na formularz kontaktowy:
Kolejne ustawienia, o których warto wiedzieć, to ustawienia stylu przycisku .
Możesz zmienić kolor tła przycisku, ustawić obramowanie wokół przycisku w innym kolorze i stylu (jednolity, przerywany lub kropkowany). Możesz także zmienić kolor tekstu na przycisku , wybierając żądany kolor w opcji Kolor przycisku. Wszystkie zmiany są widoczne od razu, dzięki czemu łatwo zrozumiesz, które z ustawień odnosi się do którego elementu formularza kontaktowego.
Jeśli chcesz, aby styl przycisku zmieniał się po najechaniu kursorem, kliknij kartę Aktywne i dostosuj ustawienia – możesz dostosować kolor najechania przycisku, kolor tła najechania przyciskiem, kolor obramowania przycisku itp.
Jeśli jesteś zadowolony z wyglądu formularza kontaktowego, możesz teraz dostosować odstępy, otwierając ustawienia w zakładce Styl odstępów . Tutaj możesz dostosować odstępy dla każdego elementu formularza kontaktowego.
Ustawienia stylu globalnego odnoszą się do stylu wyrównania formularza kontaktowego. Możesz wybrać wyrównanie do lewej, do środka i do prawej.
Ustawienia stylu błędu pozwalają kontrolować styl komunikatu o błędzie, który jest wyświetlany, gdy ktoś nie wpisze poprawnych danych w formularzu. Możesz łatwo ustawić pozycję komunikatu o błędzie, typografię i kolor.
Ustawienia stylu odpowiedzi umożliwiają dopracowanie szczegółów odpowiedzi wstawianych do formularza kontaktowego. Możesz kontrolować czcionkę, kolor czcionki, ustawić dopełnienie odpowiedzi i margines odpowiedzi oraz rodzaj obramowania.
Tak wygląda nasz formularz po wysłaniu przez kogoś wiadomości:
I tak po prostu masz na swojej stronie elegancki formularz kontaktowy, gotowy do pracy dla Ciebie.
Zawijanie wszystkiego w górę
Wspaniałą rzeczą w Qi Addons for Elementor jest to, że możesz zobaczyć wszystkie zmiany, które wprowadzasz na żywo, dzięki czemu możesz szybko przechodzić przez różne opcje i nauczyć się ich intuicyjnie używać. Chociaż dodawanie formularzy kontaktowych nie jest szczególnie kreatywnym zadaniem, ta wtyczka pozwala być kreatywnym nawet w tym przypadku. Wygląd Twoich formularzy kontaktowych może mieć ogromny wpływ na to, jak postrzegają Cię Twoi użytkownicy, a jeśli uda Ci się zapewnić ten sam standard również w tym dziale, będzie to ogromny plus dla Twojej strony internetowej, Twojej marki i Twojej firmy.
Mamy nadzieję, że ten artykuł był pomocny. Jeśli Ci się spodobało, zapoznaj się również z niektórymi z tych artykułów!
- Najlepsze wtyczki WordPress Like Button, które warto mieć
- 4 proste sposoby tworzenia przycisków WordPress
- Wskazówki dotyczące projektowania przycisków: jak uzyskać kliknięcia od odwiedzających