• Blog
  • Darmowe konsultacje
  • O mnie
  • Kontakt
Wyklikane.pl
  • Blog
  • Darmowe konsultacje
  • O mnie
  • Kontakt

Elementor

  • Strona główna
  • Elementor
  • Elementor: wybór adresata wiadomości formularza kontaktowego

Elementor: wybór adresata wiadomości formularza kontaktowego

  • Opublikowane przez Damian Kmieciak
  • Data 16 maja 2022
  • Komentarze 2 komentarze
wybór adresata wiadomości formularza

Cześć! Chciałbym Ci pokazać jak rozbudować widżet formularza kontaktowego dostępnego w Elementor Pro. Jeśli jesteś stałym czytelnikiem mojego bloga, to zapewne widziałeś wpis Elementor: automatycznie rozwijany formularz kontaktowy.  Pokazałem w nim, jak automatycznie rozszerzać pole wpisywanej wiadomości w miarę wpisywania treści. Dziś opiszę jak umożliwić użytkownikom wybór adresata wiadomości formularza kontaktowego.

wybór adresata wiadomości formularza

Załóżmy, że tworzysz formularz kontaktowy dla firmy usługowej i chcesz dać użytkownikowi możliwość wyboru, do kogo chce wysłać swoją wiadomość z formularza. Zobaczy on opcję kontaktu z biurem obsługi klienta, kadrami lub księgowością.

W przeciwieństwie do wspomnianego wcześniej wpisu, tym razem skorzystasz z wbudowanej, ale trochę ukrytej opcji Elementora Pro. Nie musisz wklejać żadnych kawałków kodu JavaScript ani podobnych. 100% Elementora. Zaczynamy!

Wybór adresata wiadomości formularza kontaktowego

Zakładam, że masz już zbudowany prosty formularz i teraz jedynie rozszerzymy jego funkcje.

Krok 1

Pierwsze co musisz zrobić, to zaznacz swój formularz kontaktowy aby zobaczyć jego opcje w panelu Elementora i kliknij przycisk “+ DODAJ ELEMENT”

Elementor adresat wiadomości

Krok 2

Ustaw typ treści pola jako “Select”

Elementor adresat wiadomości

Krok 3

Wpisz opcjonalną etykietę pola, np. “Odbiorca wiadomości”

wybór adresata wiadomości formularza

Krok 4

Ustaw pole jako wymagane

Elementor adresat wiadomości

Krok 5

Cała magia dzieje się polu “Options”. Zgodnie z małym opisem pod tym polem, musisz w każdej nowej linii wpisać dostępne opcje wyboru a ich etykiety oddzielić znakiem pionowej kreski “|”.

Pamiętaj, że pierwsza linia tego pola traktowana jest jako wartość domyślna formularza. Warto wykorzystać ją, jako instrukcję/podpowiedź dla użytkownika z informacją czego od niego oczekujemy.

Możesz skopiować i zmodyfikować przykładową treść pokazaną poniżej. Pamiętaj o zmianie adresów e-mail oraz etykiet. Spacje przed i po znaku “|” nie są wymagane, ale nadają Ci czytelności w kodzie.

Wybierz dział* | 
BOK | bok@wyklikane.pl
Kadry | kadry@wyklikane.pl
Księgowość | ksiegowosc@wyklikane.pl

Będzie to wyglądało tak jak na poniższym obrazku.

wybór adresata wiadomości formularza kontaktowego

Brak adresu e-mail w pierwszej linii po znaku “|” spowoduje, że formularz nie zostanie wysłany jeśli użytkownik nie dokona wyboru adresata wiadomości, ponieważ jest to pole obowiązkowe.

Krok 6

Przejdź do zakładki “Advanced” i skopiuj unikalny shortcode dla tego pola. W moim przypadku jest to

[field id="field_e53aa52"]

Elementor adresat wiadomości

Krok 7

Przejdź do karty “Email” w opcjach formularza i w polu odbiorcy, zamiast standardowego adresu e-mail wklej skopiowany shortcode jak poniżej. Pamiętaj, że Twoja nazwa ID tego pola będzie oczywiście inna.

Elementor adresat wiadomości

Krok 8

Kliknij zielony przycisk “AKTUALIZUJ” żeby zapisać zmiany

Elementor zapis strony

Voilà – czas na testy

Przejdź teraz na frontend swojej strony, zobacz jak wygląda formularz i przetestuj go.

wybór adresata wiadomości formularza

Możesz oczywiście dodawać dowolną ilość opcji do wyboru lub ustawić domyślnego adresata poprzez usunięcie pierwszej linii mojego przykładowego kodu.

To tyle na dziś. Jeśli masz jakieś uwagi – zostaw je w komentarzu poniżej. Z góry dziękuję!

Wersja wideo

ZAPISZ SIĘ DO NEWSLETTERA!

Bądź na bieżąco! W newsletterze będziesz otrzymywać m.in. informacje o nowych wpisach na blogu, poradnikach na YouTube, e-bookach oraz ważnych wydarzeniach ze świata WordPress. Wysyłam jedynie wartościowe treści.

Tag:Elementor Pro, formularz kontaktowy

  • Udostępnij:
author avatar
Damian Kmieciak

Programista, twórca gier i aplikacji na urządzenia mobilne oraz komputery PC. Projektant stron i sklepów internetowych, logotypów, wizytówek, opakowań, ulotek i etykiet. Ostatnio pracownik FIBARO odpowiedzialny za utrzymanie i rozwój strony internetowej.

Poprzedni wpis

Jak znaleźć i usunąć niedziałające linki w WordPress
16 maja 2022

Następny wpis

Czym jest functions.php i dlaczego go nie edytować
30 maja 2022

Może Ci się spodobać

Sierotki w WordPress
Sierotki w WordPress. Wiszące spójniki i przyimki
5 grudnia, 2022
przełącznik języka na ekranie logowania
Jak wyłączyć przełącznik języka na ekranie logowania
7 listopada, 2022
Jak przyspieszyć Elementor
Jak przyspieszyć Elementor
24 października, 2022

Znajdź na stronie

Kategorie

  • Darmowe motywy
  • Design / Grafika
  • Elementor
  • SEO / Optymalizacja
  • Serwer / IT
  • WooCommerce
  • WordPress

Najnowsze wpisy

Jak wymusić 9 cyfr numeru telefonu w WooCommerce
Jak wymusić 9 cyfr numeru telefonu w WooCommerce
30st.2023
Jak zmienić nazwę sklepu WooCommerce
Jak zmienić nazwę sklepu WooCommerce
16st.2023
Jak wyświetlić polecane produkty
Jak wyświetlić polecane produkty w WooCommerce
02st.2023
Jak zbudować sklep internetowy
Jak zbudować sklep internetowy w WordPress
19gr.2022
Sierotki w WordPress
Sierotki w WordPress. Wiszące spójniki i przyimki
05gr.2022
Wyklikane Logo
+48 503 865 645
kontakt@wyklikane.pl