Dodawanie wielu plików w Contact Form 7

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:

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:

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

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:

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:

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.

[contact-form-7 id=”3933″ title=”Artykuł formularz 2″]

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:

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ę.

Porozmawiajmy

Powiedz nam czego potrzebujesz

Kontakt