Formularz kontaktowy służy jako kluczowe narzędzie ułatwiające komunikację między osobami fizycznymi lub firmami. Zapewnia użytkownikom wygodny i zorganizowany sposób nawiązywania kontaktu i wyrażania swoich zapytań. Za jego pomocą możesz również przyjmować aplikacje, zapytania kontaktowe i ankiety.
Możesz łatwo utworzyć stronę kontaktową w swojej witrynie, korzystając z sekcji Kontakt.
W tym artykule:
-
- Dodanie sekcji Kontakt do strony
- Zarządzaj formularzem kontaktowym
- Treść formularza kontaktowego
- Zarządzanie polami formularza
- Rodzaje pól
- Formularz wbudowany i formularz wyskakujący
- Zarządzaj układem
- Stylowy formularz kontaktowy
- Ustawienia formularza kontaktowego
- Przekieruj formularz na inną stronę
- Eksportuj dane formularza
- powiadomienia e-mailowe
- Przesłane dane formularza
- Przykład na żywo
Dodanie sekcji Kontakt do strony
- Na Twojej stronie, Kliknij na niebieski + ikona aby dodać nową sekcję do swojej strony.
- Teraz zobaczysz Kategorie sekcji po lewej stronie.
- Wybierz Formularze (1) kategoria i kliknij na Kontakt zakładka (2), w której możesz wybierać różne układy ukończenia Kontakt (3) sekcja.
- Wybierz dowolny układ sekcji i kliknij go, aby dodać go do swojej strony.
Zarządzaj formularzem kontaktowym
- Kliknij na Edytuj treść (1) przycisk.
- Będziesz miał możliwość zarządzania Treść (2) układ (3) Styl (4) Ustawienia (5), a powiadomienia e-mailowe (6).
- Dobranie (Hit) Zapisz (7) zastosowania zmian w formularzu.
Treść formularza kontaktowego
Jest to ważna część formularza, ponieważ przesyłasz lub zmieniasz obraz, podajesz tutaj tytuł i opis, aby użytkownicy mieli pojęcie o przeznaczeniu samego formularza. Starannie opracowując zwięzły, opisowy tytuł i pouczający, przekonujący opis, możesz usprawnić komunikację i nawiązać silne więzi z użytkownikami witryny.
Zarządzaj polami formularzy
W obszarze Zarządzaj polami formularza możesz określić pola, które odwiedzający będą wypełniać w tym formularzu.
- Kliknij na Dodaj nowe pole (1), aby dodać więcej pól do formularza.
- Edytuj lub Usuń (2) już dodane pole.
- Przeciągnij i upuść (3) pola, aby zmienić ich kolejność w formularzu.
- Ustaw Etykieta przycisku wezwania do działania (4) dla formularza.
Pole e-mail jest obowiązkowe w formularzu i nie można go usunąć.
Po kliknięciu na + Dodaj pole otworzy się wyskakujące okienko, w którym możesz wybrać pola formularza.
- Uchwyć Nazwa twojego klienta.
- Przechwytuj wszelkie drobne informacje za pomocą Krótki tekst pole.
- Przechwyć wszelkie rozbudowane informacje/wiadomości za pośrednictwem długi Tekst pole.
- Uchwyć E-mail twojego klienta.
- Uchwyć dowolne informacje liczbowe od Twojego klienta.
- Dodaj usługi do wyboru w a rozwijanej sposób.
- Pojedynczy wybór: Dodaj wybór radia dla swoich usług.
- Wybór wielokrotny: Dodaj pole wyboru dla wielu wyborów.
- dodaj Selektor daty aby Twoi klienci mogli wybrać termin na dowolne wydarzenie.
- dodaj linia między polami formularza.
- Uchwyć adres twojego klienta.
- Uchwyć Zbieranie danych analitycznych o stronach internetowych lub aplikacjach (aby sprawdzić, czy strona działa poprawnie lub które sekcje strony są najbardziej atrakcyjne dla odwiedzających). twojego klienta.
- Uchwyć telefon numer twojego klienta.
- dodaj czas pole, aby Twoi klienci mogli sami określić godzinę wydarzenia.
- dodaj separator między polami formularza.
- pole zgody opcji można użyć do odebrania uprawnień do newsletterów, akceptacji prywatności i warunków użytkowania.
- Pobierz recenzje klientów za pomocą gwiazda skala, skala liczbowa, skala uśmiechu.
- Podczas dodawania niektórych pól masz możliwość wyboru szerokości między pełną, połową i jedną trzecią
- Możesz także wybrać wyświetlanie pól obok siebie, wybierając opcję Połowa lub Jedna trzecia
Styl formularza
- Pokaż formularz jako wyskakujące okienko – Włącz tę opcję, aby otworzyć formularz w oknie podręcznym po kliknięciu przycisku wezwania do działania.
- Etykieta przycisku wezwania do działania – Ustaw Etykieta przycisku wezwania do działania dla formularza.
- Wyskakujące okienko z nagłówkiem – Określ formę Nagłówek, Jeśli w ogóle.
- Prześlij lub usuń (1) obraz formularza.
- dodaj Tytuł (2)i Opis (3) dla formularza. Przed dodaniem opisu sprawdź to artykuł.
Nagłówek
- Nagłówek – Określ Nagłówek sekcji (1) w sekcji Formularz płatności.
- Przycisk i ikony – Dowiedz się więcej o Przyciski i ikony (2).
Zarządzanie układem
- Kliknij na Edytuj treść (1) przycisk.
- Wybierz układ (2) zakładka.
- Wybierz układ dla twojej sekcji (3) i Zapisz (4) zmiany.
Zmiana układu spowoduje zastosowanie domyślnego stylu formularza.
Stylowy formularz kontaktowy
Stylizacja formularza kontaktowego jest ważnym aspektem tworzenia atrakcyjnego wizualnie i przyjaznego dla użytkownika doświadczenia.
Będziesz mieć wiele opcji stylu dla sekcji:
- Pola formularza
- Spójność
- Tekst
- Rozstaw zębów
- Nagłówek
- Obrazy
- Ramka obrazu
- Przycisk wyskakujący
- Przycisk formularza
- Przyciski nagłówka
- Nagłówek Ikony społecznościowe
Pola formularza
Pixpa pozwala w zgodzie ze sobą do w pełni dostosować dotychczasowy wygląd of Twój Nasz formularz pola. Te stylizacja Opcje zastosować do cała kolekcja wkład Pola in Twój Kontakt Forma oraz dać w zgodzie ze sobą większy kontrola koniec w jaki sposób Twój Nasz formularz wygląd oraz czuje on Twój stronie internetowej.
- Kształt: Wybierz kształt pól wprowadzania danych — np. prostokątny, zaokrąglony, w kształcie pigułki lub tekstowy — tak aby odpowiadał on estetyce Twojej witryny.
- Napełnić: Włącz tę opcję, aby zastosować kolor wypełnienia tła do pól formularza.
- Kolor podstawowy: Ustaw kolor tła pól, gdy opcja wypełniania jest włączona.
- Outline: Włącz lub wyłącz obramowanie (kontur) każdego pola.
- Kolor konturu: Wybierz kolor obramowania pola, gdy włączony jest kontur.
- Kolor tekstu pola: Ustaw kolor tekstu wpisywanego przez użytkowników w polach formularza.
- Wysokość: Dostosuj wysokość pól wybierając spośród opcji: Mała, Średnia, Duża lub Bardzo Duża.
- Etykiety: Wybierz, czy etykiety pól formularza mają być wyświetlane wewnątrz czy na zewnątrz pola.
- Kolor etykiety: Określ kolor etykiet umieszczonych poza polem.
- Kolor wewnątrz etykiety: Ustaw kolor etykiet umieszczanych wewnątrz pola (przydatne w przypadku etykiet w formie symboli zastępczych).
- Odstępy między polami: Użyj suwaka, aby ustawić odstęp pionowy (w pikselach) między poszczególnymi polami formularza.
Spójność
- Zarządzaj wyrównaniem zawartości formularza w poziomie od Wyrównanie w poziomie (1).
- Zarządzaj wyrównaniem zawartości formularza w pionie z Wyrównanie w pionie (2).
Tekst
- Kliknij na Zmień styl tekstu (1) przycisk, aby odwiedzić Wnętrze sekcji i zarządzaj rozmiarami i stylami czcionek.
- Określ Tytuł (2) styl czcionki formularza.
- Określ OPIS (3) styl czcionki formularza.
Rozstaw zębów
- Określ Szerokość obrazu (1) obrazu w formie w procentach.
- Określ Przestrzeń między obrazem a tekstem (3) w procentach.
- Określ Spacja pod tytułem (4) w procentach.
Nagłówek
- Wyrównaj poziomo tekst nagłówka sekcji. Można ustawić go na Lewo, Środek i Prawo.
- Włącz/wyłącz dzielnik między nagłówkiem sekcji i jej zawartością.
- Ustaw grubość przegrody (w pikselach).
- Określ Kolor rozdzielacza z próbnika kolorów.
- Wybierz Styl dzielnika z listy rozwijanej.
- Ustaw Szerokość nagłówka aby określić szerokość tytułu sekcji, zaczynając od minimum 50%.
- Określ Miejsce pod nagłówkiem w obrębie sekcji (w px).
Obrazy
- Kadrowanie obrazu: Wybierz Iuprawa maga dla elementów listy. Można ustawić obrazy jako kwadratowe, okrągłe, poziome, pionowe i oryginalne.
- Promień narożnika: Wybierz wspólny promień narożnika lub inny promień narożnika dla każdej strony elementów listy i ustaw liczbę (w pikselach) dla Cpromień ornera obrazów elementów listy. Dowiedz się więcej.
- Animacja najechania kursorem: Wybierz, aby Ożywić obraz sekcji po najechaniu kursorem myszy, włączając przełącznik. Sprawdź tę funkcję na aktywnej stronie.
- Styl animacji: Wybierz Styl animacji dla obrazu, gdy najedziesz na niego kursorem.
- Maska kształtu: Włącz ten przełącznik, aby zastosować maskę kształtu do obrazów w sekcji Lista obrazów. Po włączeniu wybrany kształt wizualnie przytnie obraz do tego formularza.
- Wybierz kształt: Wybierz spośród różnych predefiniowanych kształtów, które chcesz zastosować do swoich obrazów. Pozwala to na kreatywne stylizowanie treści poprzez wyświetlanie obrazów w unikalnych formach, takich jak zaokrąglone, diamentowe, kroplone itp.
Korzystanie z promień narożnika możesz tworzyć różne kształty obrazów elementów listy. Jeśli określisz tutaj 500 pikseli, obrazy będą wyświetlane w kształcie koła.
- Jeśli wybrałeś narożniki dzielone, możesz ustawić inny promień narożnika dla każdego narożnika.
Ramka obrazu
- Włącz / wyłącz granicę wokół obrazu, przełączając przełącznik.
- Wybierz opcję posiadania wspólna granica ze wszystkich stron obrazu lub możesz określić granice osobno dla każdej strony.
- Określ szerokość granicy. Jeśli jest ustawiona na 0, ramka nie będzie widoczna. Możesz także ustawić szerokość obramowania indywidualnie dla każdej strony obrazu.
- Wybierz Kolor ramki z próbnika kolorów.
- Wybierz preferowany Styl graniczny z listy rozwijanej.
- Określ szerokość obramowania dla urządzeń mobilnych urządzeń, dopasowując ją do szerokości wybranej dla komputera stacjonarnego.
Przycisk wyskakujący
Te opcje stylu dotyczą przycisku wyskakującego, po kliknięciu którego zostanie otwarty formularz kontaktowy.
- Rozmiar guzika - Wybierz rozmiar przycisku spośród opcji, takich jak mały, średni lub duży.
- Spacja nad przyciskiem – Dostosuj odstęp pionowy nad przyciskiem (w procentach).
- Styl guzika – Wybierz styl przycisku, np. domyślny lub niestandardowy.
- Kolor przycisku - Wybierz styl koloru przycisku. Dostępne opcje to: Domyślny, Odwróć lub Niestandardowy.
- Tekst przycisku – Dostosuj kolor tekstu przycisku.
- Tło przycisku – Wybierz kolor tła przycisku.
Przycisk formularza
Ustawienia te umożliwiają dostosowanie przycisku przesyłania formularza do projektu i układu strony.
- Rozmiar guzika - Wybierz rozmiar przycisku (mały, średni lub duży).
- Spacja nad przyciskiem – Dostosuj odstęp pionowy nad przyciskiem (określony w procentach).
- Styl guzika – Wybierz ogólny styl przycisku, np. Domyślny lub Niestandardowy.
- Kolor przycisku - Ustaw styl koloru przycisku. Dostępne opcje to: Domyślny, Odwróć lub Niestandardowy.
- Tekst przycisku – Dostosuj kolor tekstu wyświetlanego na przycisku.
- Tło przycisku – Wybierz kolor tła przycisku.
- Wyrównanie przycisków – Wybierz wyrównanie przycisku (do lewej, do środka lub do prawej).
- Szerokość guzika – Dostosuj szerokość wyświetlania przycisku. Dostępne opcje to: Domyślna, Duża, Bardzo duża lub Pełna szerokość.
Przyciski nagłówka
Ustawienia te kontrolują wygląd i odstępy między przyciskami umieszczonymi w nagłówku sekcji.
- Rozmiar guzika - Wybierz ogólny rozmiar przycisków (mały, średni lub duży).
- Przestrzeń między przyciskami – Dostosuj odstępy między przyciskami (mierzone w vw).
- Przestrzeń nad przyciskami – Ustaw odstęp pionowy nad przyciskami (mierzony w procentach).
- Szerokość guzika – Wybierz szerokość przycisków. Dostępne opcje to: Domyślna, Duża, Bardzo duża i Pełna szerokość.
- Rozmiar łącza tekstowego – Określ rozmiar czcionki odnośników tekstowych powiązanych z przyciskami (mierzony w px).
- Rozmiar przycisku obrazu – Dostosuj rozmiar przycisków w postaci obrazu (mierzony w px).
Nagłówek Ikony społecznościowe
Wyświetlaj i dostosowuj ikony udostępniania w mediach społecznościowych w formularzu.
- Rozmiar ikony – Dostosuj rozmiar ikon społecznościowych (mierzony w px).
- Typ ikony – Wybierz styl ikon, np. Klasyczny, Pełny lub Kontur.
- Kolor ikony – Wybierz kolor ikon. Dostępne opcje to: Tekst linku, Niestandardowy lub Kolor marki (oryginalny kolor platformy społecznościowej).
- Kolor tła ikony – Ustaw niestandardowy kolor tła ikon, aby zwiększyć ich widoczność i styl.
Ustawienia formularza kontaktowego
- Kliknij na Edytuj treść (1) przycisk.
- Dostosuj ustawienia formularza z Ustawienia (2) zakładka i Zapisz (3) twoje zmiany.
Utwórz nazwę
- Wprowadź nazwę zidentyfikuj formularz kontaktowy w Pixpa Studio. Ta nazwa nie jest widoczna dla odwiedzających witrynę.
Akcja po przesłaniu
Jako działanie po przesłaniu możesz wybrać Pokaż komunikat o powodzeniu (1) lub Przekieruj na adres URL (2).
W przypadku Pokaż komunikat o powodzeniu (1):
- Określ Komunikat o powodzeniu (2) który wyświetla się po wysłaniu formularza przez użytkownika.
- Możesz także dodać dowolny skrypt w pliku sukces po dokonaniu płatności HTML (3) pudełko.
- W przypadku Rprzekieruj na adres URL, możesz określić dowolną stronę wewnętrzną/zewnętrzną, klikając ikonę ustawień (⚙️). Dowiedz się więcej.
Przekieruj formularz na inną stronę
Przekierowanie użytkowników na określoną stronę po przesłaniu formularza może poprawić ogólne wrażenia użytkownika i służy różnym celom, takim jak unikanie duplikatów zgłoszeń, analizy i śledzenie, zatrzymanie użytkowników w witrynie przez dłuższy czas itp.
Przekierowanie można łatwo utworzyć za pomocą Akcja po przesłaniu opcję w zakładce Ustawienia.
- Możesz utworzyć przekierowanie w swojej witrynie z Zawartość WWW (1) opcja. Może to być strona, galeria, blog, galeria e-commerce, folder itp. Musisz wpisać nazwę elementu w polu pokazanym na poniższym zrzucie ekranu, a otrzymasz sugestie z nim związane.
- Zastosowanie External Link (2) możliwość utworzenia przekierowania poza Twoją witrynę. Będziesz musiał wpisać adres URL w polu, na które chcesz przekierować użytkowników po przesłaniu formularza.
Dowiedz się więcej jak korzystać z Linkbuildera.
Synchronizuj i eksportuj dane formularza
- Prześlij dane formularza do Make.com. Zobacz więcej.
- Prześlij dane formularza do Zapier.com. Zobacz więcej.
- Eksportuj dane formularza jako plik CSV. Zobacz więcej.
powiadomienia e-mailowe
Stąd możesz dostosować temat wiadomości e-mail dla powiadomień, które otrzymujesz jako właściciel witryny po pomyślnym przesłaniu formularza. Ponadto możesz spersonalizować wiadomość e-mail o pomyślnym przesłaniu do użytkowników lub klientów po przesłaniu formularza. Tę funkcję można wykorzystać do budowania marki, marketingu i skutecznego prowadzenia kampanii.
- E-mail do właściciela witryny: Włącz lub wyłącz powiadomienia e-mail dla przesłanych formularzy. Po włączeniu powiadomienia będą wysyłane na określone adresy e-mail.
- Temat: Dostosuj linię tematu wiadomości e-mail. Użyj {STRONA INTERNETOWA} zmienna, aby dynamicznie uwzględnić nazwę witryny w temacie. Jest to przydatne, gdy masz wiele witryn.
- E-mail: Podaj maksymalnie 3 adresów e-mail, na które chcesz otrzymywać powiadomienia po wysłaniu formularza.
- Określ Temat formularza kontaktowego e-maila. Możesz również uwzględnić {STRONA INTERNETOWA} zmienna zawierająca nazwę witryny internetowej.
E-mail do klienta
- Możesz włączyć E-mail do klienta (1) w celu wysłania wiadomości e-mail o pomyślnym przesłaniu Formularza.
- Określ Temat (2) poczty.
- Określ zawartość wiadomości e-mail z Wiadomość o sukcesie (3).
- E-mail do klienta to funkcja premium dostępna wyłącznie w Profesjonalny i zaawansowany plany. Zobacz więcej.
- Starannie dostosuj treść wiadomości e-mail, aby zapewnić spójną i profesjonalną komunikację z klientami.
Przesłane dane formularza
Dane przesłane w formularzu kontaktowym obejmują informacje, które użytkownik wprowadza w pola formularza podczas jego przesyłania.
- Wszystkie dane formularza są przechowywane i dostępne z poziomu Przesyłanie formularzy strona pracowni. Zobacz więcej.
- Wszystkie dane przesłane za pośrednictwem formularza kontaktowego zostaną przesłane także na adres e-mail podany w ustawieniach formularza kontaktowego. Twój Adres konta e-mail jest traktowany jako domyślny.
Sprawdź również: Zmień adres e-mail konta.
Przykład na żywo
Oto aktywny wyskakujący formularz kontaktowy:
Zobacz stronę demonstracyjną na żywo.
Oto aktywny wbudowany formularz kontaktowy:
Zobacz stronę demonstracyjną na żywo.
Aby ograniczyć liczbę spamerów w formularzu, zabezpieczenia Google captcha są automatycznie włączane w formularzu.