class="post-template-default single single-post postid-3934 single-format-standard mega-menu-primary-menu default right_sidebar theme-accent wpb-js-composer js-comp-ver-5.1 vc_responsive" data-spy="scroll" data-target="#poradnik_menu" data-offset="15">
LOADING

Dodawanie wielu plików w Contact Form 7

contact-form-informacje

W poradniku pokażemy na przykładzie Contact Form 7 zmiany związane z dodawaniem większej liczby plików, które skutecznie podniosły konwersję u naszych klientów.

O Contact Form 7

Contact Form 7 to jedna z najpopularniejszych wtyczek kontaktowych do WordPressa:

contact-form-informacje

Jest stale aktualizowana. Nadaje się zarówno do tworzenia prostych formularzy jak i bardziej złożonych, w czym pomaga rozbudowana dokumentacja. To sprawdzony formularz, który używamy na swoich stronach jak i rekomendujemy go naszym klientom.

Problem

Kilku naszych klientów do wyceny usługi/towaru potrzebuje dodatkowe informacje. To klienci z różnych branż jak np. druk 3d (tu do wiadomości trzeba załączyć pliki projektu do wyceny) czy numizmatyka (wstępna wycena wartości monety na podstawie zdjęcia). Przed zmianami proces kontaktu wyglądał tak:

  • Klient przechodzi na podstronę kontaktu lub wyceny. Formularz składał się tylko z pól tekstowych.
  • Klient pisze wiadomość, że interesuje go wycena usługi X. Niektórzy zamieszczają od razu link do plików online (przez wetransfer itp.), ale to bardzo mała grupa.
  • Do wyceny potrzebne są dodatkowe pliki. Potencjalny zleceniobiorca, którzy otrzymał zapytanie musi pisać do zainteresowanego z prośbą o dosłanie dodatkowych plików. W tym momencie nawet w 50% przypadkach kontakt się urywał.

Powody braku kontaktu po wysłaniu prośby o dosłanie plików mogą być różne. Skala była na tyle duża, że trzeba było coś z tym zrobić, tak by już pierwsza wiadomość miała wszystkie niezbędne informacje.

Rozwiązanie – pierwsze podejście

Rozwiązanie to oczywiście dodanie pola FILE. Contact Form pozwala to zrobić bardzo szybko. W edycji formularza klikamy Plik:

contact-form1

W nowym oknie możemy doprecyzować dopuszczone rozszerzenia, rozmiar czy klasy:

contact-form2-opcje

pole-file

Ale…

Co jeśli klient będzie chciał wysłać więcej niż jeden plik? Tak było w przypadku naszych klientów, gdzie czasem liczba plików przekraczała nawet 20. Formularz będzie źle wyglądał jeśli dodamy 20 pól do ładowania plików.

Rozwiązanie docelowe – jQuery na pomoc

Chodziło o stworzenie rozwiązania, które da możliwość dodania większej liczby plików:

  • Na początku widoczne jest tylko jedno pole FILE
  • Przyciskiem można dodać kolejne pole FILE i dodać dodatkowy plik
  • Można usunąć plik – co ważne, wtedy trzeba zresetować pole FILE a następnie je ukryć

Najpierw uzupełniamy kod formularza:

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

<p>Adres email (wymagane)<br />
    [email* your-email] </p>

<p>Numer telefonu (wymagane)<br />
[text* text-389]

<p>Treść wiadomości<br />
    [textarea your-message] </p>

  <p class="hide_this">[file file-01 filetypes:psd|pdf|jpg|png|gif|zip|rar limit:32mb]</p>
  <p class="hide_this">[file file-02 filetypes:psd|pdf|jpg|png|gif|zip|rar limit:32mb]<a class="del_file" href="#">(usuń)</a></p>
  <p class="hide_this">[file file-03 filetypes:psd|pdf|jpg|png|gif|zip|rar limit:32mb]<a class="del_file" href="#">(usuń)</a></p>
  <p class="hide_this">[file file-04 filetypes:psd|pdf|jpg|png|gif|zip|rar limit:32mb]<a class="del_file" href="#">(usuń)</a></p>
  <p class="hide_this">[file file-05 filetypes:psd|pdf|jpg|png|gif|zip|rar limit:32mb]<a class="del_file" href="#">(usuń)</a></p>
  <p class="hide_this">[file file-06 filetypes:psd|pdf|jpg|png|gif|zip|rar limit:32mb]<a class="del_file" href="#">(usuń)</a></p>
  <p class="hide_this">[file file-07 filetypes:psd|pdf|jpg|png|gif|zip|rar limit:32mb]<a class="del_file" href="#">(usuń)</a></p>
  <p class="hide_this">[file file-08 filetypes:psd|pdf|jpg|png|gif|zip|rar limit:32mb]<a class="del_file" href="#">(usuń)</a></p>
  <p class="hide_this">[file file-09 filetypes:psd|pdf|jpg|png|gif|zip|rar limit:32mb]<a class="del_file" href="#">(usuń)</a></p>
  <p class="hide_this">[file file-10 filetypes:psd|pdf|jpg|png|gif|zip|rar limit:32mb]<a class="del_file" href="#">(usuń)</a></p>
  <a href="#" class="add_file">+ dodaj następny plik</a>

<p>[submit "Wyślij"]</p>

Kod wyżej wklejamy do pierwszej zakładki:

kod-formularz

Następnie musimy się zająć kodem JavaScript do obsługi przycisków. Użyjemy tu jQuery.

Mała uwaga, jeśli kod niżej nie będzie działał to powinniśmy zamienić skrót $ na jQuery np. jQuery(‚p.hide_this’).not(‚:eq(0)’).hide();. Powinno to pomóc.

<script type="text/javascript">
  jQuery(document).ready(function($){

    //schowaj wszystkie pola FILE poza pierwszym
    $('p.hide_this').not(':eq(0)').hide();

    //dodanie nowego pola po kliknieciu
    $('a.add_file').on('click', function(e){
      $('p.hide_this:not(:visible):first').show('slow');
      e.preventDefault();
    });

    //usuniecie pliku
    $('a.del_file').on('click', function(e){
      //definicje
      var input_parent = $(this).parent();
      var input_wrap = input_parent.find('span');
      //zresetowanie pola
      input_wrap.html(input_wrap.html());
      //ukrycie
      input_parent.hide('slow');
      e.preventDefault();
    });
  });
</script>

Kod można wkleić w stopce, przed zamknięciem body:

footer kod

Efekt końcowy

Działający formularz niżej. Jak widać, na początku jest widoczne tylko jedno pole FILE, pozostałe są zdefiniowane, ale zostały ukryte. Użytkownik łatwo może dodać kolejne pola. Założyliśmy w przykładzie, że będzie to do 10 plików, ale można zdefiniować ich więcej.

W przypadku, gdy użytkownik doda plik, ale zmieni zdanie i kliknie usuń pole zostanie zresetowane.

Imię i nazwisko (wymagane)

Adres email (wymagane)

Numer telefonu (wymagane)

Treść wiadomości

(usuń)

(usuń)

(usuń)

(usuń)

(usuń)

(usuń)

(usuń)

(usuń)

(usuń)

+ dodaj następny plik

Rodzaje plików

Contact Form 7 pozwala łatwo definiować różne rozszerzenia plików, które są dozwolone do wysyłki. Jeśli plik nie będzie zgody z listą, komunikat o błędzie pojawi się przy próbie wysyłki, przy nieodpowiednim pliku:

błąd - złe pliki

Możemy zdefiniować nawet kilkadziesiąt dozwolonych rozszerzeń plików, oddzielając je następująco:

 [file file-01 filetypes:psd|pdf|jpg|png|gif|zip|rar limit:32mb]

Wielkość plików

W zapytaniach mogą być dołączane pliki różnej wielkości. Czasem zdjęcie nie będzie skompresowane, czasem będzie przesyłany duży plik projektu. W takich przypadkach warto zwiększyć dopuszczalną wielkość pliku. W Contact Form 7 dodajemy limit, jak pokazaliśmy we wcześniejszym podpunkcie.

Trzeba pamiętać, że ograniczenia mogą być też po stronie hostingu. Tutaj powinien pomóc ten poradnik, w razie niepowodzenia trzeba poprosić o pomoc pracowników hostingu.

Podsumowanie

Contact Form 7 ma duże możliwości, ale czasem trzeba sobie pomóc dodatkowym kodem. Jak widać, nie jest to trudne. Parę linijek kodu JS znacznie poprawiło możliwości i wygodę obsługi formularza. Niezależnie od tego, czy użytkownik chce dodać 2 czy 7 plików będzie miał taką możliwość.

Wprowadzenie powyższych, prostych modyfikacji u kilku naszych klientów wyraźnie podniosło liczbę otrzymywanych zapytań, na które mogli od razu przygotować ofertę.

Podaj dalej

Subscribe for FREE Marketing Pro Newsletter!

Subscribers get the best curated content for you

Szymon Spychała

Wspólnik w Carted.pl. Pasjonat tematyki e-commerce i możliwości rozwoju oraz zarabiania jakie daje internet.

Skomentuj

Pola oznaczone gwiazdką są wymagane *