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

Elementor

  • Strona główna
  • Elementor
  • Elementor: automatycznie rozwijany formularz kontaktowy

Elementor: automatycznie rozwijany formularz kontaktowy

  • Opublikowane przez Damian Kmieciak
  • Data 5 kwietnia 2021
  • Komentarze 4 komentarze
rozwijany formularz kontaktowy

Cześć klikaczu! Chciałbym podzielić się z Tobą praktyczną wiedzą, jak stworzyć automatycznie rozwijany formularz kontaktowy. A dokładnie, to rozwijane pole formularza kontaktowego stworzonego w Elementorze. Jeśli jeszcze nie wiesz, czym jest Elementor, to koniecznie przeczytaj mój poprzedni wpis.

Istota problemu

Każde pole wiadomości w dowolnym formularzu kontaktowym, ma z góry określoną wysokość jaką zajmuje. Gdy wpisujesz treść wiadomości, która jest dłuższa niż liczba znaków mieszczących się w widocznym polu, przeglądarka dodaje w nim pasek przewijania.

rozwijany formularz kontaktowy
Po lewej domyślne zachowanie pola formularza kontaktowego a po prawej efekt docelowy.

Sam Elementor pozwala na ręczne zdefiniowanie bazowej ilości wierszy pola tekstowego. W moim przykładzie po lewej stronie obrazka w nagłówku tego wpisu są to 2 linijki (wysokość pola na wiadomość). Dopisanie trzeciej linii tekstu powoduje dodanie przez przeglądarkę wspomnianego paska przewijania.

Chociaż jest to bardzo praktyczne i naturalne rozwiązanie, to niekonicznie jednak estetyczne.

Rozwijany formularz kontaktowy

Jeśli korzystasz z Elementora, to możesz w prosty sposób zmodyfikować zachowanie formularza kontaktowego tak, aby pole wiadomości automatycznie rozwijało się wraz z ilością wpisywanej treści.

Jak to zrobić? Zapytasz. Już pokazuję:

1) Przejdź do strony z formularzem kontaktowym i dodaj na dole strony nowy blok HTML (nie  Własny HTML, tylko ten zwykły HTML pokazany poniżej po lewej).

Elementor blok HTML
Odnajdź blok HTML w Elementorze, a następnie przeciągnij go i upuść w treści strony.

2) W treści pola tekstowego wklej poniższy fragment kodu:

<script type="text/javascript">
jQuery(document).ready(function( $ ){
    
$('textarea').each(function () {
    this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';
});
    
});
</script>
Elementor blok HTML
Wklej tutaj powyższy kod.

3) A następnie zapisz zmiany na stronie.

Elementor zapis strony

4) To wszystko! Twój formularz będzie teraz się automatycznie powiększał w miarę wpisywania w niego treści pola tekstowego. Prawda, że elegancko?

rozwijany formularz kontaktowy

Co tu się wyprawia?

Powyższy skrypt jest kodem jQuery, który zadziała nie tylko w Elemetorze, ale i praktycznie z każdym formularzem kontaktowym na dowolnej stronie. Jest uniwersalny, a umiejętne wpięcie z pewnością pomoże osiągnąć zamierzony efekt.

A jak dokładnie działa? Nieustannie szuka na stronie elementu formularza ‘textarea’ (bo taki tag mają pola tekstowe w formularzach) i sprawdza wysokość linijek zajmowanych przez tekst. Następnie przekazuje ją całemu polu tekstowemu w atrybucie ‘height’.

Podsumowanie

Mam nadzieję, że powyższy trick Ci się przyda i znajdziesz dla niego zastosowanie.

Na zakończenie dodam, że jeśli masz jakieś pytania lub przemyślenia, to koniecznie zostaw mi je w komentarzu 🙂

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

  • 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

Darmowe motywy: kwiaty
5 kwietnia 2021

Następny wpis

Elementor: domyślnie zamknięty akordeon
19 kwietnia 2021

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