Formularz-kontaktowy-na-stronie-opartej-o-WordPress-1 (1)

Formularz kontaktowy na stronie opartej o WordPress!

Jak stworzyć formularz kontaktowy na swojej stronie opartej o WordPress?

Zobacz sam! Nie ma nic prostszego!

WordPress ma ten największy plus jeśli chodzi o osoby nieznające się na programowaniu, że nie trzeba umieć nawet podstaw html’a, wystarczy zainstalować odpowiednią wtyczkę i voilà!

W tym przypadku, omawianą wtyczką będzie oczywiście Contact Form 7, czyli dosyć popularna wtyczka jeśli chodzi o formularze kontaktowe, zapewne dlatego, że jest bardzo prosta w zaimplementowaniu oraz dostosowaniu a także w pełni darmowa.

Sama instalacja wtyczki, wygląda tak samo jak każdej innej:

Wtyczki → dodaj nową → wpisujemy w polu wyszukiwania „Contact Form 7” → zainstaluj teraz → uruchom.

Następnie powinniśmy w lewej sekcji panelu administratora wordpress uzyskać zakładkę „Formularze”, gdzie klikając „formularze” przechodzimy do już istniejących formularzy kontaktowych, natomiast klikając „Dodaj nowy” możemy dodać swój własny nowy formularz.

Dodawanie własnego formularza kontaktowe jest banalnie prostą sprawą, wystarczy wpisać tytuł formularza (nie będzie on widoczny dla osób przeglądających naszą stronę, tytuł ma na celu identyfikacje poszczególnych formularzy), natomiast w samym okienku do wpisywania tekstu, możemy dodawać poszczególne pola formularza poprzez klikanie w moduły ponad tym miejscem np. „telefon”. Potem wypełniamy szczegółowe ustawienia pola formularza i gotowe.

Przykładowe pole formularza wygląda w edytorze tak:

<label> Imię i nazwisko (wymagane)
[text* your-name] </label>

W tym przypadku jest to pole w którym wpisujemy Imię i nazwisko. „your-name” to id formularza dzięki któremu my otrzymując wiadomość gdy ktoś wypełni taki formularz, to będziemy wiedzieć, że chodziło o Imię i nazwisko. „text*” oznacza że to pole tekstowe, a „*” oznacza że dane pole jest wymagane. Natomiast „Imię i nazwisko (wymagane)” to tekst który się wyświetli osobie wypełniając formularz.

Trochę inna wersja:

[text* text-12 placeholder „Imię i nazwisko”]

Taki wstawiony kod, oznacza praktycznie to samo co powyżej, praktycznie, bo jak widać delikatnie różni się.

placeholder „Imię i nazwisko” – Oznacza to, że tekst „Imię i nazwisko” zamiast wyświetlać się nad polem, będzie wyświetlany w samym polu, gdzie jeśli ktoś kliknie w pole to ten tekst zniknie.

Tak zbudowany formularz zapisujemy, a w polu „Formularze” przy każdym z formularzu mamy tzw. „kod skrótowy” który kopiujemy i wstawiamy na stronę gdzie chcemy aby pojawił się formularz.

Takim o to sposobem, możemy stworzyć prosty ale skuteczny i działający formularz kontaktowy. Formularz będzie bardzo prosty, dlatego dla niektórych może być to niewystarczające, jest to wtyczka darmowa więc nic dziwnego że sama w sobie nie zawiera zaawansowanych funkcji stylistycznych (czyli edycji wyglądu formularza). Na szczęście powstało wiele dodatkowych wtyczek do tej wtyczki, które pozwalają na zmiany w wyglądzie, jednak to już opiszę w następnym artykule.

Tags: No tags

Add a Comment

Your email address will not be published. Required fields are marked *