Jak utworzyć formularz kontaktowy Divi w WordPress
Opublikowany: 2022-01-20
Szukasz łatwego sposobu na utworzenie formularza kontaktowego Divi dla swojej witryny WordPress?
Divi to jeden z najpopularniejszych motywów WordPress na rynku. Jest wyposażony w przyjazny dla użytkownika kreator, który pozwala dostosować witrynę z poziomu interfejsu. Możesz dodać moduły strony, takie jak przycisk wezwania do działania, formularz kontaktowy i nie tylko.
Dzięki modułowi Divi Contact Form możesz tworzyć i wstawiać formularz kontaktowy bez żadnych usług stron trzecich. Jest to świetne, jeśli chcesz w łatwy sposób dodać podstawowy formularz kontaktowy do swojej witryny.
Będziesz jednak potrzebować potężnej wtyczki do tworzenia formularzy, takiej jak WPForms, do zaawansowanych funkcji, takich jak przesyłanie przez użytkowników, marketing e-mailowy i inne.
Dlatego Divi Builder jest również wyposażony w moduł WPForms, dzięki czemu możesz łatwo dodać profesjonalne formularze kontaktowe za pomocą kilku kliknięć.
W tym poście pokażemy Ci te dwie metody tworzenia formularza kontaktowego Divi w WordPress:
- Utwórz formularz kontaktowy za pomocą Divi Builder
- Utwórz kontakt Divi za pomocą WPForms
Tworzenie formularza kontaktowego za pomocą Divi Builder
Jeśli nie masz jeszcze Divi, najpierw musisz założyć konto Divi . Następnie uzyskasz dostęp do pulpitu nawigacyjnego i pobierz plik motywu.

Po zainstalowaniu i aktywacji motywu Divi na pulpicie WordPress otwórz dowolną stronę lub wpis, w którym chcesz dodać formularz kontaktowy Divi.
W edytorze postów zobaczysz przycisk Użyj Divi Builder . Kliknij przycisk, aby uruchomić kreatora w interfejsie witryny.

Na następnym ekranie zobaczysz opcje zbudowania strony od podstaw, wybrania gotowego układu lub sklonowania istniejącej strony.
W tym samouczku zaczniemy od nowej strony i dodamy formularz kontaktowy.

Następnie zobaczysz kreator Divi, w którym możesz wybrać szablon wiersza, który odpowiada Twoim potrzebom.

Po dodaniu wiersza zobaczysz panel Wstaw moduł , który umożliwia dodawanie różnych typów modułów treści.
Jeśli przewiniesz w dół, znajdziesz moduł Formularz kontaktowy . Po prostu kliknij go, aby wstawić formularz kontaktowy Divi na swojej stronie.

Domyślnie formularz kontaktowy składa się z trzech pól formularza: Imię i Nazwisko, E-mail i Wiadomość. Możesz kliknąć przycisk Dodaj nowe pole , aby dodać inne pola formularza zgodnie ze swoimi potrzebami.

Ponadto w ustawieniach tekstu znajdziesz opcje edycji tytułu, pomyślnego przesłania wiadomości i przesłania tekstu przycisku.

Divi umożliwia również wysyłanie wiadomości e-mail, dzięki czemu możesz otrzymywać powiadomienia o nowych przesłanych formularzach.
Ponadto znajdziesz inne przydatne opcje, takie jak przekierowania, ochrona przed spamem, ustawienia w tle i nie tylko.

Dzięki modułowi formularza kontaktowego Divi możesz łatwo dodać prosty formularz kontaktowy do swojej witryny WordPress. Istnieje wiele opcji dostosowywania, dzięki czemu możesz dopasować styl swojej marki.
Jeśli chcesz dodać bardziej zaawansowane funkcje do formularza kontaktowego Divi, musisz użyć dobrej wtyczki do tworzenia formularzy.
I dokładnie to zrobimy w następnej metodzie. Pokażemy Ci, jak utworzyć kontakt Divi za pomocą najpotężniejszego kreatora formularzy WordPress, WPForms.
Utwórz formularz kontaktowy Divi za pomocą WPForms

WPForms to najlepsza wtyczka do tworzenia formularzy typu „przeciągnij i upuść” dla WordPress. Umożliwia tworzenie dowolnych formularzy, takich jak formularze kontaktowe, formularze rejestracyjne, formularze pobierania i wiele innych, za pomocą zaledwie kilku kliknięć.
WPForms zawiera ponad 100 gotowych szablonów formularzy, dzięki czemu nie musisz tworzyć formularza kontaktowego od podstaw. Możesz dodawać lub usuwać dowolne pola formularzy i dostosowywać je według własnego uznania. I nie potrzebujesz do tego żadnej wiedzy o kodowaniu.
Wszystkie formularze kontaktowe, które tworzysz za pomocą WPForms, będą w 100% responsywne, dzięki czemu będą pięknie wyświetlać się na dowolnym rozmiarze ekranu. Dostępna jest nawet wbudowana opcja ochrony przed spamem, dzięki której możesz zapobiegać przesyłaniu formularzy spamu i oszustw w swojej witrynie.
Dzięki ponad 5 milionom aktywnych instalacji WPForms jest uwielbiany przez wszystkie rodzaje firm na całym świecie. Jeśli jesteś użytkownikiem Divi i chcesz dodać niesamowite formularze kontaktowe do swojej witryny, możesz również skorzystać z WPForms.
Oto niektóre z powodów, dla których powinieneś zbudować formularz kontaktowy Divi za pomocą WPForms:
- Łatwy w użyciu i konfiguracji
- Zaawansowane powiadomienia i potwierdzenia formularzy
- Funkcja przesyłania plików i przesyłania treści
- Wbudowany system zarządzania przesyłaniem formularzy
- Integracja z marketingiem e-mailowym w celu rozbudowy listy e-mailowej
- Opcja porzucenia formularza do przechwytywania częściowych wpisów w formularzu
- Pola formularzy dla eCommerce i opcji płatności
Wspaniałą wiadomością jest to, że w Divi Builder znajduje się moduł WPForms. Dzięki temu możesz łatwo dodać formularz kontaktowy, który tworzysz za pomocą WPForms w swojej witrynie.
Możesz także używać WPForms na dowolnej witrynie WordPress, z Divi lub bez. Jeśli kiedykolwiek zdecydujesz się przestać płacić za Divi, formularze utworzone za pomocą WPForms pozostaną nienaruszone w Twojej witrynie.
Powiedziawszy to, nauczmy się tworzyć formularz kontaktowy za pomocą WPForms + Divi.
Krok 1: Zainstaluj i aktywuj wtyczkę WPFroms
Po pierwsze, musisz założyć konto WPForms.
WPForms oferuje elastyczne plany cenowe, które są zaprojektowane tak, aby pasowały do wymagań wszystkich rodzajów firm. Możesz wybrać plan odpowiedni dla Twojej firmy. Dostępna jest bezpłatna wersja Lite.
Po zarejestrowaniu się będziesz mieć dostęp do pulpitu nawigacyjnego WPForms. Plik wtyczki wraz z plikiem licencji znajdziesz w zakładce Pobieranie .

Musisz zainstalować ten plik wtyczki w swojej witrynie WordPress. Aby uzyskać więcej informacji na ten temat, zapoznaj się z naszym przewodnikiem, jak zainstalować wtyczkę WordPress.
Po zainstalowaniu i aktywacji WPForms w swojej witrynie przejdź do zakładki WPForms »Ustawienia na pulpicie administratora.
Tutaj musisz wprowadzić klucz licencyjny i kliknąć przycisk Zweryfikuj klucz .


Następnie zobaczysz komunikat o pomyślnej weryfikacji. Teraz możesz rozpocząć tworzenie formularza kontaktowego za pomocą WPForms.
Krok 2: Utwórz formularz kontaktowy
Aby utworzyć nowy formularz, przejdź do zakładki Dodaj nowy na pulpicie WordPress. Spowoduje to uruchomienie biblioteki szablonów, w której możesz wyszukać odpowiedni szablon formularza kontaktowego dla swojej witryny.
W tym samouczku zaczniemy od szablonu prostego formularza kontaktowego . Ten szablon zawiera wszystkie podstawowe pola formularza wymagane w formularzu kontaktowym, takie jak imię i nazwisko, adres e-mail i wiadomość. Możesz także wyświetlić podgląd dowolnego innego szablonu, aby zobaczyć, który z nich jest dla Ciebie lepszy.
Wprowadź nazwę formularza kontaktowego i kliknij przycisk Użyj szablonu na wybranym szablonie formularza.

Na następnym ekranie zobaczysz narzędzie do tworzenia formularzy przeciągnij i upuść WPForm. Wszystkie pola formularza znajdują się po lewej stronie, a podgląd formularza po prawej stronie.
Znajdziesz szeroki zakres przydatnych pól formularzy, takich jak liczby, listy rozwijane, wielokrotnego wyboru, przesyłanie plików, oceny, tekst sformatowany i wiele innych.

Aby wstawić pole formularza wystarczy przeciągnąć je z lewej strony i umieścić na podglądzie formularza.

Jeśli chcesz dostosować dowolne z tych pól formularza, możesz je kliknąć, a zobaczysz opcje pól. Istnieją opcje zmiany etykiety formularza, opisu, wymaganego i innych dodatkowych opcji w zależności od pola formularza.

Po dodaniu wszystkich wymaganych pól do formularza kontaktowego Divi kliknij przycisk Zapisz w górnej części kreatora formularzy.
Następnie musisz skonfigurować ustawienia formularzy, powiadomienia i potwierdzenia.
Krok 3: Skonfiguruj ustawienia formularza
Aby zmienić ustawienia formularza, otwórz zakładkę Ustawienia » Ogólne z lewego panelu menu w kreatorze formularzy. Tutaj możesz zmienić nazwę formularza, opis formularza, prześlij tekst przycisku i nie tylko.
Istnieje również możliwość włączenia ochrony antyspamowej w Twojej witrynie. Spowoduje to skonfigurowanie Google reCAPTCHA dla Twojego formularza kontaktowego.

Przejdź do zakładki Ustawienia »Powiadomienia , aby skonfigurować powiadomienia e-mail dla formularza kontaktowego Divi. Zobaczysz, że istnieje domyślne powiadomienie wysyłane na adres e-mail administratora.
Możesz dodać wiele adresów e-mail lub kliknąć przycisk Dodaj nowe powiadomienie , aby wysłać więcej niż jedno powiadomienie o formularzu.
Dzięki temu możesz powiadamiać siebie i członków swojego zespołu o nowych przesłanych formularzach, wysyłać klientom szczegóły dotyczące ich przesyłania i nie tylko.

Jeśli chcesz uzyskać więcej informacji na ten temat, zapoznaj się z naszym przewodnikiem Jak skonfigurować odpowiednie powiadomienia i potwierdzenia formularzy.
Podobnie WPForms pozwala zdecydować, co się stanie po przesłaniu przez użytkownika informacji kontaktowych w Twojej witrynie. Przejdź do zakładki Ustawienia » Potwierdzenia , a zobaczysz opcję wyboru akcji potwierdzającej.

Możesz więc wyświetlić niestandardową wiadomość z podziękowaniem na interfejsie użytkownika, gdy użytkownik kliknie przycisk przesyłania. Możesz też wybrać opcje przekierowania, aby skierować użytkowników na inną stronę w Twojej witrynie lub na zewnętrzny adres URL.
Gdy skończysz z ustawieniami formularza, kliknij przycisk Zapisz .
Teraz, gdy Twój formularz kontaktowy jest gotowy, możesz wstawić go na swojej stronie internetowej za pomocą Divi Builder.
Krok 4: Dodaj moduł WPForms w Divi
Aby dodać ten formularz kontaktowy na dowolnej stronie lub poście, otwórz Divi Builder i wybierz układ wierszy, tak jak w przypadku modułu formularza kontaktowego Divi.
Jedyną różnicą jest to, że musisz wyszukać moduł WPForms .

Po wstawieniu bloku WPForms zobaczysz ustawienia umożliwiające wybór właśnie utworzonego formularza kontaktowego. Dostępne są również opcje wyświetlania tytułu i opisu formularza kontaktowego.

Możesz nawet zmienić wygląd i styl formularza kontaktowego za pomocą Divi Builder. Jeśli jesteś zadowolony z wyglądu formularza kontaktowego Divi, kliknij prawy przycisk znacznika wyboru.
Krok 5: Opublikuj swój formularz kontaktowy Divi
Ostatnim krokiem jest opublikowanie formularza kontaktowego. W tym celu kliknij przycisk 3 kropek na dole Divi Builder.

Następnie zobaczysz różne opcje, takie jak powiększanie, podgląd responsywny i nie tylko. Po prawej stronie znajdują się dwa przyciski: Zapisz wersję roboczą i Opublikuj.
Kliknij przycisk Opublikuj , aby opublikować swoją stronę i formularz kontaktowy w witrynie WordPress.

Pomyślnie utworzyłeś formularz kontaktowy za pomocą Divi i WPForms. Chociaż Divi oferuje moduł formularza kontaktowego, brakuje mu niektórych funkcji, takich jak przesyłanie plików, zarządzanie wpisami i integracja z listą e-mail.
Dzięki WPForms możesz łatwo rozwiązać te problemy. Jest wyposażony w funkcje i funkcje, które pomogą Ci tworzyć wszelkiego rodzaju formularze kontaktowe, od podstawowych po profesjonalne.
WPForms pozwala również tworzyć formularze WordPress w dowolnym celu, w zależności od Twoich wymagań. Możesz tworzyć formularze zamówień, formularze rejestracji na wydarzenia, formularze rejestracji i wiele więcej.
I to wszystko na dziś! Mamy nadzieję, że ten samouczek pomógł ci nauczyć się z łatwością tworzyć formularz kontaktowy Divi w WordPress.
Jeśli potrzebujesz dodatkowej pomocy z formularzami WordPress, możesz sprawdzić te zasoby:
- Jak utworzyć formularz rejestracyjny na wydarzenie w WordPress
- 8 najlepszych narzędzi do przechwytywania wiadomości e-mail i kreatorów formularzy dla WordPress
- Jak łatwo ograniczyć porzucanie formularzy
Te posty pomogą Ci rejestrować użytkowników w formularzach WordPress i rozwijać listy e-mailowe. Ten ostatni pomoże Ci zmniejszyć współczynniki porzuceń w formularzu i poprawić konwersje.