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.

    Thread Starter psychoza

    (@psychoza)

    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; }
    Thread Starter psychoza

    (@psychoza)

    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

    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 3 years, 12 months temu przez Paweł Knapek.
    Thread Starter psychoza

    (@psychoza)

    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… 🙁

    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');

    Thread Starter psychoza

    (@psychoza)

    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?

    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)
  • Temat ‘Contact Form 7 [date] i [select] placeholder mieć albo nie mieć :)’ jest zamknięty na nowe odpowiedzi.