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

psychoza
(@psychoza)

5 years, 9 months temu

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)

Moderator Paweł Knapek
(@adpawl)

5 years, 9 months temu
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)

5 years, 9 months temu

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ź 🙂
Moderator Paweł Knapek
(@adpawl)

5 years, 9 months temu
```
.wpcf7 .wpcf7-select { border: none; padding: 0 !important; }
.dk-select-options { position: relative; }
```
Thread Starter psychoza
(@psychoza)

5 years, 9 months temu

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)

5 years, 9 months temu
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 5 years, 9 months temu przez Paweł Knapek.
Thread Starter psychoza
(@psychoza)

5 years, 9 months temu

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)

5 years, 9 months temu

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)

5 years, 9 months temu

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)

5 years, 9 months temu
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.

Wyświetlenia