Jak utworzyć formularz kontaktowy Divi w WordPress

Opublikowany: 2022-01-20
how to create a divi contact form

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.

Divi

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.

divi builder post editor

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.

build from scratch divi

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

add row divi builder

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.

divi contact form module

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.

divi contact form editor

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

divi form name and settings

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.

divi contact form settings

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

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 .

WPForms license key

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 .

verify wpforms license

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.

create divi contact form in wpforms

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.

wpforms form fields

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

wpforms drag and drop

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.

add file upload to divi contact form

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.

general settings wpforms

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.

form notificaitons wpforms

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.

wpforms-confirmations

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 .

divi wpforms contact form

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.

choose wpforms contact form

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.

publish divi contact form

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.

publish your divi contact form

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.