TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Dodaj i dostosuj formularz kontaktowy w witrynie Weebly

0

Istnieje wiele łatwych sposobów dodawania formularzy do witryny Weebly. Możesz użyć domyślnego elementu „Formularz kontaktowy" Weebly, połączyć formularze z App Center i osadzić kody formularzy od stron trzecich. Jako element natywny, domyślny element „Formularz kontaktowy” Weebly można łatwo zintegrować i łatwo zarządzać przesłanymi formularzami za pomocą pulpitu nawigacyjnego lub aplikacje na iPhone’a/Androida. W tym artykule omówimy funkcje domyślnego elementu „Formularz kontaktowy” i sposoby jego dostosowania. Oprócz formularza kontaktowego Weebly oferuje również dwa inne elementy formularza – formularz RSVP i element ankiety.

Powiązane: Jak dodać formularz kontaktowy w witrynach WordPress?

„Formularz kontaktowy” to jeden z elementów przeciąganych i upuszczanych zgrupowanych w grupie „Podstawowe” w edytorze witryny Weebly. Po dodaniu formularza kontaktowego w obszarze zawartości i kliknięciu go, kolumna elementów w edytorze Weebly automatycznie zmieni się w pola formularza. Wszystkie pola formularza są podzielone na następujące trzy kategorie:

Pola formularza:

  • Krótkie pole tekstowe
  • Duże pole tekstowe
  • Przyciski opcji
  • Upuścić pudło
  • Pola wyboru
  • Przesyłanie plików dla użytkownika Pro
  • Imię i nazwisko, e-mail, adres i numer telefonu

Struktura:

  • Dzielnik i przekładka

Podstawowy:

  • Tytuł, tekst, obraz i kod osadzania

Dodaj i dostosuj formularz kontaktowy w witrynie Weebly

Przeciągnij i upuść pola w formularzu Weebly

Podobnie jak zwykłe elementy, możesz przeciągnąć każde pole i dodać do formularza. Kliknięcie elementu formularza spowoduje wyświetlenie trzech opcji Wyświetl wpisy, opcje formularza i zapisz.

Opcje formularza

Kliknij przycisk opcji formularza, aby wyświetlić wyskakujące okienko zaawansowanych opcji formularza, jak pokazano na poniższym obrazku.

Dodaj i dostosuj formularz kontaktowy w witrynie Weebly

Opcje formularza kontaktowego Weebly

Dostępne opcje dostosowywania to:

  • Nazwa formularza — wprowadź nazwę formularza. Jeśli masz wiele formularzy w swojej witrynie, możesz użyć nazw formularzy, aby łatwo przeglądać zgłoszenia na podstawie nazwy formularza.
  • Przesłanie e-mailem do — jest to identyfikator e-mail, na który otrzymasz natychmiastowe powiadomienie o przesłaniu formularza.
  • Wiadomość potwierdzająca po przesłaniu – Opcja potwierdzenia umożliwia wyświetlenie automatycznej odpowiedzi użytkownikowi po przesłaniu formularza. Możesz ustawić wiadomość tekstową z potwierdzeniem lub połączyć dowolną stronę internetową. Po przesłaniu wiadomość tekstowa zostanie wyświetlona w obszarze formularza. Możesz połączyć dowolną zewnętrzną stronę internetową lub własną witrynę lub stronę sklepu w opcji linku, która zostanie wyświetlona po przesłaniu.
  • Odstępy — służy do dostosowywania odstępów między górnym i dolnym marginesem elementu formularza.
  • Przycisk przesyłania — służy do wyrównania przycisku przesyłania do lewej, do środka lub do prawej w odniesieniu do szerokości formularza. Możesz również wpisać dowolny dowolny tekst, taki jak „Kontakt”, zamiast przesyłać w elemencie przycisku.

Uwaga: Ogólna praktyka polega na utworzeniu w witrynie strony z podziękowaniami z dostosowanymi informacjami, które chcesz pokazać użytkownikom, i połączyć je z formularzem. Strona z podziękowaniami zostanie wyświetlona po przesłaniu formularza przez użytkownika i zapewni więcej możliwości zapoznania się z linkami na stronie z podziękowaniami.

Dostosowanie na poziomie pola

Kliknięcie wewnątrz dowolnego pola formularza spowoduje wyświetlenie wyskakującego okienka odpowiedniego dla tego pola. Możesz zmienić nazwę pola, uczynić ją opcjonalną lub obowiązkową, dodać instrukcje wypełniania i dostosować odstępy pól w formularzu. Utworzenie pola wymaganego spowoduje wyświetlenie znaku gwiazdki nad nazwą pola wskazującego użytkownika, który jest polem obowiązkowym. Niewypełnienie pól obowiązkowych uniemożliwi przesłanie formularza i wyświetli komunikat „Proszę poprawić podświetlone pola”, a pole zostanie podświetlone na czerwono.

Dodaj i dostosuj formularz kontaktowy w witrynie Weebly

Instrukcja i pole obowiązkowe

Instrukcje pomogą użytkownikom, jak wypełnić to konkretne pole, a komunikat pomocy będzie wyświetlany, gdy pole jest skupione.

Niektóre pola, takie jak „Przyciski opcji”, „Pola wyboru” i „Rozwijane pole”, będą miały dodatkowe opcje, jak pokazano na poniższym obrazku. Możesz wprowadzić dowolną liczbę niestandardowych opcji do wyboru przez użytkownika lub wybrać je z listy wstępnie zdefiniowanych opcji. Wstępnie zdefiniowane opcje mają długą listę opcji, takich jak porównanie, płeć, stany USA, jak długo, jak często, miesiące w roku, dni tygodnia itp.

Dodaj i dostosuj formularz kontaktowy w witrynie Weebly

Korzystanie z przycisków opcji w formularzu kontaktowym Weebly

Opcje formularza dla użytkownika Pro

Użytkownicy Pro będą mieli następujące dodatkowe funkcje formularzy:

  • Przesyłanie pliku — jest to pole pro, które pomaga użytkownikowi przesłać formularz z przesłanym plikiem. Będzie to bardzo przydatna funkcja, dzięki której użytkownik będzie mógł przesłać dodatkowy dokument lub zrzut ekranu, co z kolei pomoże w zapewnieniu lepszego wsparcia. 20 MB to maksymalny rozmiar pliku, który można przesłać w formularzu.
  • Dodawanie formularza w stopce — oprócz dodawania formularza w obszarze zawartości witryny, użytkownicy Pro mogą również dodawać formularz w obszarze stopki. Formularz kontaktowy można dodać w stopce, która będzie wyświetlana na wszystkich stronach serwisu.

Dodaj i dostosuj formularz kontaktowy w witrynie Weebly

Przesyłanie plików w formularzu Weebly

Przeglądanie wpisów w formularzu

Wpisy formularzy można przeglądać na wiele sposobów, a wymagana odpowiedź może zostać odpowiednio wysłana do zgłaszającego.

  • Kliknij formularz, aby zobaczyć przycisk „Wyświetl wpisy”, którego kliknięcie otworzy nowe okno ze wszystkimi przesłanymi formularzami.
  • Otrzymasz również powiadomienie e-mailem za każdym razem, gdy zostanie przesłany formularz.
  • Wyświetl przesłane formularze bezpośrednio z pulpitu nawigacyjnego.

Dodaj i dostosuj formularz kontaktowy w witrynie Weebly

Wyświetl wpisy formularza kontaktowego w panelu Weebly

Dostosowywanie sztuczek do formularza kontaktowego Weebly

Dostosowywanie rozmiaru formularza kontaktowego

Domyślnie nie można dostosować rozmiaru formularza Weebly. Aby zmienić rozmiar, umieść elementy „Spacer” obok elementu formularza i dostosuj szerokość formularza.

Zmniejszenie liczby przesyłanych formularzy spamowych

Jednym z największych problemów z formularzem kontaktowym Weebly są zgłoszenia spamowe – spamerzy i boty będą przesyłać wpisy spamowe i zalewać skrzynkę pocztową. Ponieważ Weebly nie oferuje CAPTCHA dla formularza kontaktowego, obsługa zgłoszeń spamowych będzie irytującym zadaniem dla właścicieli witryn. Istnieją dwa sposoby na ograniczenie spamu bez modyfikowania kodu:

  1. Dodaj „Pola wyboru” w formularzu kontaktowym i ustaw je jako pole wymagane. Możesz ustawić „Tytuł pola” jako „Nie jestem robotem” i dodać jeden „Pozycje opcji” jako „Jestem człowiekiem”. Zmusi to użytkowników do zaznaczenia tego pola i nie będzie można przesłać formularza bez jego zaznaczenia.
  2. Podobnie użyj "Przycisków opcji" i zmień "Tytuł pola" na coś takiego jak "Kontrola CAPTCHA" lub "Kontrola człowieka" i ustaw to pole wymagane. Dodaj pojedynczy element opcji, taki jak „Jestem człowiekiem, a nie robotem” lub dowolny tekst, który chcesz. Teraz użytkownik musi skorzystać z opcji wyboru w celu wysłania formularza kontaktowego.

Dodaj i dostosuj formularz kontaktowy w witrynie Weebly

Dodaj ręczną captcha w formularzu kontaktowym Weebly

W obu powyższych opcjach automatyczne boty nie zaznaczą pola wyboru lub przycisku opcji, zatrzymując w ten sposób wpisy spamu.

Dodaj i dostosuj formularz kontaktowy w witrynie Weebly

Zapobiegaj przesyłaniu spamu w formularzu kontaktowym Weebly

Zmiana koloru tła formularza kontaktowego Weebly

Wielu użytkowników wysłało do nas e-maila z pytaniem o sposób zmiany koloru tła formularza kontaktowego Weebly, a oto jak to zrobić. Każdy formularz kontaktowy będzie posiadał formularz #id po opublikowaniu serwisu. Kliknij prawym przyciskiem myszy formularz kontaktowy na opublikowanej stronie i kliknij opcję „Sprawdź” lub „Sprawdź element” i znajdź numer formularza #id dla formularza kontaktowego, jak pokazano na poniższym obrazku. Formularz #id będzie podobny do „form-1234567890123″ i będzie unikalny dla każdego formularza.

Dodaj i dostosuj formularz kontaktowy w witrynie Weebly

Znajdowanie formularza kontaktowego #ID w Weebly

Teraz przejdź do edytora Weebly i dodaj poniższy kod CSS w sekcji „Kod nagłówka” strony, na której masz formularz kontaktowy. Nie zapomnij zastąpić formularza #id własnym #id.

<style> #form-632853235871630597 { background-color: beige; padding: 15px 15px 0 15px; border-radius: 10px; border: 1px solid rgba(158, 158, 158, 0.22); } </style>

Jeśli masz więcej niż jeden formularz, możesz dostosować je za pomocą różnych kolorów tła lub dodać wszystkie #ID formularzy, takie jak #ID1, ID2 i mieć te same style dla wszystkich formularzy. Jeśli masz więcej formularzy, dodaj CSS w sekcji „Ustawienia > SEO > Kod nagłówka ” lub w pliku „main.less”.

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów