Bagaimana cara menambahkan placeholder untuk form7 kontak untuk dropdown? [Tutup]

16

Saya mencoba menambahkan placeholder mirip dengan yang diberikan untuk ContactNumber untuk drop down Outlet saya tetapi tidak muncul.

Kode-

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

Mencoba menambahkan first_as_label "Preferred outlet?"sehingga ini ditampilkan sebagai nilai drop-down biasa.

Selebihnya semua kolom menampilkan placeholder, cara lain untuk memberikan placeholder untuk drop down?

plugin-contact-form-7 Sanjuktha sandesh
sumber
1
Anda bisa menggunakan opsi placeholder dalam jenis tag formulir berikut: teks, email, url, tel, textarea, nomor, rentang, tanggal, dan captchar. cf7 placeholder
Reigel
jadi untuk drop-down kita tidak punya pilihan lain?
Sanjuktha sandesh

Jawaban:

2

untuk menjawab pertanyaan: ini tidak mungkin.

AFAIK, (HTMLwise) tidak ada cara untuk menambahkan placeholder untuk memilih tag.

Banyak devs yang saya tahu namun cenderung menggunakan disabled selectedkombinasi untuk opsi ...

<select>
    <option value="" disabled selected>Select your option</option>
    <option value="ydasdas">ydasdas</option>
    <option value="dasda">dasda</option>
    <option value="ydagfdsdas">ydagfdsdas</option>
    <option value="ewefsdf">ewefsdf</option>
</select>

demo

Saya telah memeriksa kode sumber CF7 (versi 4.3.1), dan tidak ada cara mudah untuk mencapai format html ini.

Anda dapat melakukannya dengan menghapus wpcf7_add_shortcode_selecttindakan wpcf7_initdan menambahkan tindakan Anda sebagai gantinya.

Reigel
sumber
2
Jawaban ini benar-benar harus dihapus, diterima atau tidak salah, dan ini bukan jawaban yang sangat lama, tetapi diberikan pada hari yang sama dengan jawaban yang benar.
Rick Calder
78

Bertentangan dengan apa jawaban yang diterima menunjukkan, itu benar-benar adalah mungkin dan dibangun ke dalam Contact Form 7. Berikut sebenarnya daftar pilihan [select]memegang . Cukup banyak Anda akan menentukan opsi pertama untuk menjadi pengganti menggunakan first_as_label:

[select* Test first_as_label "Placeholder" "Option 1" "Option 2"]

Meskipun secara tradisional tidak akan terlihat seperti placeholder, jika diperlukan, pengguna tidak akan dapat memilih placeholder dan mengirim formulir - ini memaksa pengguna untuk memilih salah satu opsi lain.

Howdy_McGee
sumber
Terima kasih atas bantuannya. Saya sudah mencoba first_as_labeltetapi seperti yang Anda katakan itu tidak terlihat mirip dengan nilai placeholder lainnya.
Sanjuktha sandesh
4
Ini solusi yang layak. Dan itu berfungsi dengan baik - formulir tidak mengirim jika Anda mencoba menggunakan opsi pertama. Untuk memformat opsi pertama, cukup targetkan kotak pilih (mis .wpcf7 select[name="menu-70"] { color:#aaa; }. Kemudian Anda dapat membuat opsi lebih gelap dengan menargetkan opsi (mis .wpcf7 select[name="menu-70"] option { color:#333; }. Opsi pertama menyoroti pada fokus, jadi kecuali jika Anda ingin mengubah bagian ini, solusinya bekerja dengan baik.
Rob Myrick
Saya tidak sepenuhnya yakin mengapa ada orang yang menginginkan opsi pilih terlihat seperti pengganti kecuali jika saya melewatkan sesuatu yang sederhana - Pilih opsi - adalah apa yang diharapkan oleh kebanyakan orang. Terima kasih banyak telah menyelamatkan saya dari melihat dokumentasi sendiri!
Rick Calder