Cum adăugați placeholder pentru selectul dropdown în Contact Form 7?

Question

Cum adăugați placeholder pentru selectul dropdown în Contact Form 7?

6 ian. 2016, 06:51:09

Vizualizări: 186K

Voturi: 25

Am încercat să adaug placeholder similar cu cel folosit pentru ContactNumber în câmpul dropdown Outlet, dar nu apare.

Cod-

<div class="form-group form-icon-group">
    <i class="fa fa-phone" > </i> [tel* ContactNumber /8 class:form-control placeholder "Contact Number *"]
</div>
<div class="form-group form-icon-group">
<i class="fa fa-food" > </i> [select Outlet id:outlet class:form-control "-- Select Outlet--" "Pasir Ris" "Thomson"]
</div>

Am încercat să adaug first_as_label "Locația preferată?" dar acesta apare ca o valoare obișnuită în lista dropdown.

Toate celelalte câmpuri afișează placeholder-ul, există vreo altă modalitate de a adăuga placeholder pentru dropdown?

Sanjuktha sandesh

353

formular contact 7

Comentarii

Puteți utiliza opțiunea placeholder în următoarele tipuri de tag-uri de formular: text, email, url, tel, textarea, number, range, date și captchar. cf7 placeholder

Reigel Gallarde

6 ian. 2016 07:39:54

deci pentru dropdown nu avem altă opțiune?

Sanjuktha sandesh

6 ian. 2016 07:47:25

Toate răspunsurile la întrebare

Contrar răspunsului acceptat, este de fapt posibil și integrat în Contact Form 7. Iată lista reală de opțiuni pe care le oferă [select]. Practic, ai defini prima opțiune ca fiind placeholder-ul folosind first_as_label:

[select* Test first_as_label "Placeholder" "Opțiunea 1" "Opțiunea 2"]

Deși nu va arăta în mod tradițional ca un placeholder, dacă este obligatoriu, utilizatorul nu va putea selecta placeholder-ul și trimite formularul - acest lucru forțează utilizatorul să selecteze oricare dintre celelalte opțiuni.

Howdy_McGee

20.8K

6 ian. 2016 17:36:18

Comentarii

Mulțumesc pentru ajutor. Am încercat deja first_as_label dar, după cum ai menționat, nu arăta similar cu celelalte valori placeholder.

Sanjuktha sandesh

7 ian. 2016 02:54:59

Aceasta este o soluție decentă. Și funcționează corect - formularul nu se trimite dacă încerci să folosești prima opțiune. Pentru a formata prima opțiune, direcționează căsuța de selectare (ex. .wpcf7 select[name="menu-70"] { color:#aaa; }). Apoi poți face opțiunile mai întunecate prin direcționarea lor (ex. .wpcf7 select[name="menu-70"] option { color:#333; }. Prima opțiune este evidențiată la focus, deci dacă nu dorești să modifici această parte, soluția funcționează excelent.

Rob Myrick

16 sept. 2016 20:05:53

Nu sunt complet sigur de ce cineva ar dori ca o opțiune de selectare să arate ca un placeholder, dacă nu cumva îmi scapă ceva. Un simplu "--Selectați o opțiune--" este ceea ce majoritatea oamenilor se așteaptă să vadă. Mulțumesc mult pentru că m-ai scutit de a parcurge documentația singur!

Rick Calder

21 sept. 2018 22:40:31

Acum această opțiune nu funcționează pe Mac. Stilul este aplicat din select. Opțiunile sunt doar o reprezentare a conținutului. Textul. Ele nu sunt elementul stilizat.

neoswf

21 ian. 2022 01:14:47

Acesta ar trebui să fie răspunsul acceptat! Minunat!

markzzz

4 apr. 2023 15:02:20

Comentarii

Acest răspuns chiar ar trebui eliminat, indiferent dacă este acceptat sau nu, este incorect și nu este ca și cum ar fi un răspuns foarte vechi, a fost furnizat în aceeași zi cu cel corect.

Rick Calder

21 sept. 2018 22:42:42

Reigel Gallarde 889 · Accepted Answer · 2016-01-06T08:18:55Z

pentru a răspunde la întrebare: acest lucru nu este posibil.

Din câte știu eu, (din punct de vedere HTML) nu există nicio modalitate de a adăuga un placeholder la tag-urile de tip select.

Totuși, mulți developeri pe care îi cunosc folosesc combinația disabled selected pentru opțiune...

<select>
    <option value="" disabled selected>Selectează opțiunea</option>
    <option value="ydasdas">ydasdas</option>
    <option value="dasda">dasda</option>
    <option value="ydagfdsdas">ydagfdsdas</option>
    <option value="ewefsdf">ewefsdf</option>
</select>

demo

Am verificat codul sursă al CF7 (versiunea 4.3.1) și nu există o modalitate simplă prin care să obținem acest format HTML.

Poți merge pe calea cea grea prin eliminarea acțiunii wpcf7_add_shortcode_select pe wpcf7_init și adăugarea celei tale în loc.

Reigel Gallarde

889

6 ian. 2016 08:18:55