ElementsKit zawiera widżet Formularz kontaktowy 7, który uzupełnia funkcjonalność wtyczki do tworzenia formularzy. Możesz dostosować style formularza kontaktowego 7 za pomocą Elementora, wykorzystując w pełni funkcjonalność narzędzia do tworzenia stron.
Przeczytaj tę dokumentację, aby dowiedzieć się, jak utworzyć i dostosować formularz za pomocą Formularza kontaktowego 7 w Elementorze.
Warunek wstępny:
You need to have Zainstalowano wtyczkę Contact Form 7 na Twojej witrynie WordPress.
Create a form with Contact Form 7 #
Follow the below steps and create your desired form easily.
Step 1: Add New Contact Form #
- Iść do Kontakt > Dodaj nowy.
- Wprowadź nazwę formularza.
- Skonfiguruj ustawienia i atrybuty formularza.
- Kliknij na Ratować przycisk.

Krok 2: Uzyskaj formularz kontaktowy 7 w Elementorze #
Aby uzyskać formularz kontaktowy 7 na Elementorze, najpierw włącz widżet Formularz kontaktowy 7 ElementsKit, następnie otwórz edytor Elementor i przeciągnij i upuść widżet do obszaru projektu.
Włącz widżet Formularz kontaktowy 7 #
Aby włączyć widżet Tier treści:
- Nawigować do ElementsKit > Widżety z panelu WordPress.
- Znaleźć Formularz kontaktowy 7 widget z listy i włącz widget.
- Kliknij na ZAPISZ ZMIANY.

Przeciągnij i upuść widżet #
Następnie przeciągnij i upuść ElementsKit Formularz kontaktowy 7 widget do edytora Elementora.

Krok 3: Wybierz formularz do edycji w Elementorze #
Na tym etapie możesz wybrać formularz, który chcesz edytować. W tym celu możesz wybrać formularz z rozwijanej listy.
W Treść > Formularz kontaktowy 7 > Styl znajdziesz listę formularzy utworzonych za pomocą Contact Form 7. Wybierz formularz i przejdź do kolejnego kroku.
Krok 4: Dostosuj formularz kontaktowy 7 za pomocą Elementora #
Teraz możesz dostosować style etykiet, pól wejściowych i przycisku Formularza kontaktowego 7 za pomocą Elementora.
Etykieta #
- Typografia: Ustaw typografię tekstu etykiety.
- Kolor: Wybierz kolor tekstu etykiety.
- Margines: Dostosuj margines etykiety pola formularza.
- Wskazówka: Możesz także zmienić typografię i kolor symbolu zastępczego.

Wejście #
- Wyściółka: Dostosuj wypełnienie pola wejściowego.
- Szerokość: Można dostosować szerokość pola wejściowego.
- Wysokość: Możesz zmienić wysokość pola wejściowego.
- Margines dolny: Zmień margines na dole pola wejściowego.

- Wysokość obszaru tekstowego: W przypadku długiego pola tekstowego możesz zmienić jego wysokość.
- Wypełnienie obszaru tekstowego: Możesz także zmienić wypełnienie obszaru tekstowego.

- Typ tła: Wybierz typ koloru tła (kolor klasyczny lub gradientowy).
- Kolor: Wybierz kolor tła pola wejściowego.
- Promień granicy: Ustaw promień obramowania pola wejściowego.
- Typ obramowania: Wybierz typ obramowania pola wejściowego.
- Cień pudełka: Można ustawić cień pola dla pola wejściowego.
Możesz ustawić te atrybuty indywidualnie dla Normalna, Unosić się, I Tryby ostrości.

- Typografia: Ustaw typografię tekstu wejściowego.
- Kolor tekstu: Wybierz kolor tekstu wejściowego.
- Rozmiar czcionki zastępczej: Dostosuj rozmiar czcionki symbolu zastępczego.
- Kolor zastępczy: Wybierz kolor tekstu zastępczego.

Sprawdź advanced features of ElementsKit 👇
