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 #

1. Iść do Kontakt > Dodaj nowy.
2. Wprowadź nazwę formularza.
3. Skonfiguruj ustawienia i atrybuty formularza.
4. 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:

1. Nawigować do ElementsKit > Widżety z panelu WordPress.
2. Znaleźć Formularz kontaktowy 7 widget z listy i włącz widget.
3. 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 #

1. Typografia: Ustaw typografię tekstu etykiety.
2. Kolor: Wybierz kolor tekstu etykiety.
3. Margines: Dostosuj margines etykiety pola formularza.
4. Wskazówka: Możesz także zmienić typografię i kolor symbolu zastępczego.

Wejście #

1. Wyściółka: Dostosuj wypełnienie pola wejściowego.
2. Szerokość: Można dostosować szerokość pola wejściowego.
3. Wysokość: Możesz zmienić wysokość pola wejściowego.
4. Margines dolny: Zmień margines na dole pola wejściowego.

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

7. Typ tła: Wybierz typ koloru tła (kolor klasyczny lub gradientowy).
8. Kolor: Wybierz kolor tła pola wejściowego.
9. Promień granicy: Ustaw promień obramowania pola wejściowego.
10. Typ obramowania: Wybierz typ obramowania pola wejściowego.
11. 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.

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

Sprawdź advanced features of ElementsKit 👇