Wsparcie » Wtyczki » Contact Form 7 [date] i [select] placeholder mieć albo nie mieć :)

  • Dzień dobry wszystkim, witam Was czule 🙂

    To mój debiut z Worpress pod każdym względem, więc w razie czego proszę nie bić – dopiero się uczę. No i od razu zaznaczam, że mówienie do mnie po „informatycznemu” może mi nie pomóc, z zawodu jestem księgową xD

    Stworzyłam stronę na wersji pro motywu Ronneby, ale mam problem stricte związany z wtyczką Contact Form 7 – widziałam powiadomienie forum, że jak problem dotyczy konkretnej wtyczki, to mam pisać do Supportu wtyczki, ale ja nie umiem po angielsko-informatycznemu, więc postanowiłam napisać TU 🙂

    Na stronie postawiłam formularz wyceny transportu. Problematyczne pozycje to „Data załadunku” i „Data rozładunku”, a także „Rodzaj opakowania”. Może pojedynczo:

    1. Daty.

    Obecnie obie daty są zrobione w CF7 jako [text] z uwagi na to, że [date] nie ma placeholdera. Tzn. ma, ale nie ustawiony przeze mnie, tylko domyślny jakiś (w moim przypadku na kompie w różnych przeglądarkach różnie, ale przeważnie „dd-mm-rrrr”, a na telefonie w ogóle pusta „komórka”), co jest bez sensu… Czytałam już „internety” i teoretycznie prostego rozwiązania nie ma. Myślałam, że pomoże wtyczka CF7 Datepicker, ale ona tylko pozwala stylizować kalendarzyk 🙁

    Docelowo chciałabym mieć w tym formularzu placeholdery „Data załadunku” i „Data rozładunku”, a żeby po kliknięciu otwierał się kalendarz z możliwością wyboru daty.

    Tamplate mój ma taką możliwość, bo mają tam kilka „predefiniowanych” gotowych formularzy, ale są podstawowe, krótkie kontaktowe, bez możliwości ich rozbudowy do takiego dużego formularza wyceny. I tam placeholder i kalendarz działają, ale ustawienia są „zaszyte w Java Script” (słowa zaprzyjaźnionego informatyka, co o WP i HTML5 nie ma zielonego pojęcia, więc tylko stara się pomóc, a za bardzo nie potrafi xD). W razie czego mogę pokazać na jakiejś podstronie jak to działa.

    WW. kolega-informatyk poczynił w formularzu coś takiego:

    <p class=”dfd-half-size dfd-border-bottom dfd-border-left kol-lewa mainLoginInput” required />
    <input placeholder=”Data załadunku” class=”textbox-n” type=”text” onfocus=”(this.type=’date’)” id=”data_zaladunku” required=”required”>

    klasy „dfd-half-size dfd-border-bottom dfd-border-left kol-lewa” są templatki i moje, stricte do css, więc myślę, że to można pominąć…

    W momencie kiedy formularz działa na takich linijkach to komórki mają docelowy placeholder, tak jakby dodatkowo, do tego domyślnego. Tzn. Mamy „Data załadunku”, po kliknięciu mamy „Data załadunku dd-mm-rrrr” (a na komórkach „Data załadunku”) i jak drugi raz klikniemy to wyskakuje dopiero kalendarz.

    Powiedzmy, że rozwiązanie estetycznie jest średnie, a technicznie już w ogóle, bo:
    a) nie działa „required”, a pozycja musi być obowiązkowa,
    b) nie wiem jak wpisać ten input do maila, który się wysyła po wypełnieniu formularza 🙁 więc nawet jak ktoś coś wybierze z kalendarza, to i tak to w mailu nie pójdzie, bo nie wiem jak to ustawić! 🙁

    Więc póki co mam te daty zrobione jako [text], dość lamersko, ale przynajmniej działa…

    2. Select

    W formularzu jest również dropdown, który pozwala wybrać rodzaj opakowania. Tutaj również kolega-informatyk poczarował, że wygląda dropdown spoko:

    <p class=”dfd-half-size dfd-border-bottom dfd-border-right kol-lewa”>
    <select>
    <option value=””selected disabled>Wybierz opakowanie</option>
    <option value=””>Paleta</option>
    <option value=””>Karton</option>
    <option value=””>Niestandardowe</option>
    </select></p>

    ale ponownie na nic mi to, bo nie potrafimy przypisać tego selecta do wiadomości e-mail. Więc komórka wygląda ładnie, ale w mailu i tak rodzaj opakowania się nie poda. No i znowu nie wiem jak ustawić „required”…

    Tutaj to czarowanie jest podyktowane tym, żeby zamiast „inculde blank”, czyli domyślnego placeholdera „—” był mój placeholder, jako disable, a reszta była do wyboru.

    Tak wygląda cały mój problem, jeśli ktoś jest w stanie mi coś doradzić, będę bardzo wdzięczna 🙂
    Z góry dziękuję za wskazówki!

    Strona przy której potrzebuję pomocy: [zaloguj się aby zobaczyć ten link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • 1. najprostsze chyba rozwiązanie >> pole daty z CF7 + https://pl.wordpress.org/plugins/contact-form-7-datepicker/

    2. W CF7 [select* opakowanie include_blank "Paleta" "Karton" "Niestandardowe"]
    + w functions.php motywu:

    function custom_wpcf7_form_elements( $html ) {
     function replace_include_blank( $name, $text, &$html) {
      $matches = false;
      preg_match('/<select name="' . $name . '"[^>]*>(.*)<\/select>/iU', $html, $matches);
      if ( $matches ) {
       $select = str_replace('<option value="">---</option>', '<option value="">' . $text . '</option>', $matches[0]);
       $html = preg_replace('/<select name="' . $name . '"[^>]*>(.*)<\/select>/iU', $select, $html);
      }
     }
    	
     replace_include_blank('opakowanie', 'Wybierz opakowanie', $html);
    
     return $html;
    }
    add_filter('wpcf7_form_elements', 'custom_wpcf7_form_elements');

    Oczywiście można kombinować na inne sposoby, ale już raczej więcej zabawy z kodowaniem.

    Bardzo dziękuję za odpowiedź!

    1. Naprawdę nie wierzę jak mogłam mając tą wtyczkę nie spróbować jej działania na [date]! Przecież to logiczne, że nie zadziałało na tych linijkach kolegi… Dziękuję! Działa perfekcyjnie!!!

    2. Wierzę, że to też pomoże, ale z poziomu WP nie mogę zmienić pliku .php, zlecę to koledze, najpierw zrobimy backup – wygląda obiecująco 🙂

    A czy mogę mięć jeszcze pytanie bonusowe? Nie potrafię sobie poradzić z css dla [select], rozwala mi cały formularz, jest komórką w komórce, no i lista jest niewidoczna – chowa się za kolejną komórką… Wrzuciłam testowy formularz tu: http://imdspedycja.com/1-2-2/ Ja z tym css to tak trochę działam na ślepo, próbuję różnie rzeczy jak działają. Teoretycznie dodanie do selecta linijki „display: contents;” powoduje, że formularz się nie rozwala i znika wygląd komórki w komórce. Pomaga, ale nie mam pojęcia co to znaczy xD A jak „uwidocznić” listę po rozwinięciu to nie wiem. Próbowałam z-index i position: relative, ale wtedy rozwinięcie listy powoduje znowu rozwalenie się formularza… Trochę już nie mam siły, czy w tym aspekcie także mogę liczyć na pomoc…?

    Z góry dziękuję za odpowiedź 🙂

    .wpcf7 .wpcf7-select { border: none; padding: 0 !important; }
    .dk-select-options { position: relative; }

    Panie Pawle,

    udało nam się zrobić backup i wpisaliśmy wskazane wcześniej linijki do pliku functions.php motywu, a w zasadzie do czterech plików functions.php motywu (templatka ma swój, a potem wgrywane strony demo też miały swoje), bo nie zadziałało… Mam już w formularzu tego [select] zgodnie z wytycznymi, ale dalej „—” nie zostało podmienione na „Wybierz opakowanie”. Czy mogę prosić o dalsze wsparcie…?

    PS. Serdecznie dziękuję za css, wszystko wygląda już tak jak powinno <3

    Moderator Paweł Knapek

    (@adpawl)

    Podmiana opiera się na nazwie pola CF7, czyli w przykładzie opakowanie

    [select* opakowanie include_blank „Paleta” „Karton” „Niestandardowe”]

    &

    replace_include_blank(‚opakowanie‚, ‚Wybierz opakowanie’, $html);

    (uwaga, forum podmienia w cytatach zwykłe apostrofy i cudzysłowy na takie fikuśne, drukarskie – dolny-górny. W kodzie należy używać zwykłych tj. ' i " )

    Na stronie testowej widzę zaś błedna nazwę selecta – class:dropdown_test
    a to nie równa się opakowanie, toteż nic nie podmienia.

    Chyba ;p – bo trudno zgadywać bez dostępu do wnętrza strony, tak tylko na podstawie jej wyglĄdu.

    • Ta odpowiedź została zmodyfikowana 1 tydzień temu przez  Paweł Knapek.

    No na stronie testowej tak, jest tam ta klasa. Ale ja pewna swego (a raczej Pańskiego hihi) zabrałam się już za zmiany na żywca, więc ten prawidłowy [select] jest już na stronie głównej, niestety efekt jak we wcześniejszym poście – nie zadziałało… 🙁

    Moderator Paweł Knapek

    (@adpawl)

    wrrrrrr…. jejku, jejku, przepraszam. Typowy błąd przy kopiuj&wklej, uciekła mi ostatnia linijka kodu.
    Funkcja jest, a zabrakło jej użycia w filtrze.
    add_filter('wpcf7_form_elements', 'custom_wpcf7_form_elements');

    Panie Pawle zła nowina – coś jebło Grażyna 😀

    Niestety po wpisaniu tej końcówki kodu strona się przetrąciła, wyświetlało się tylko logo i menu, cala reszta zamieniła się w nieskończoną biel… Backup przywrócił stronę, więc dalszym ciągu formularz wyświetla „—” zamiast „Wybierz opakowanie” 😶

    Czy może istnieje jakieś inne rozwiązanie?

    Moderator Paweł Knapek

    (@adpawl)

    Kod działa, tutaj przykład http://determined-sloth.w6.poopy.life/test/
    Niestety trudno zgadywać co przetrąciło stronę.

    Inne możliwości, to modyfikowanie pól javascriptem
    np. z użyciem jquery

    (function($){
     $('select[name=opakowanie] option[value=""]').text('Wybierz mnie');
    })(jQuery);
Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.