Come aggiungere un placeholder per il menu a tendina in Contact Form 7?

Question

Come aggiungere un placeholder per il menu a tendina in Contact Form 7?

6 gen 2016, 06:51:09

Visualizzazioni: 186K

Voti: 25

Ho provato ad aggiungere un placeholder simile a quello usato per ContactNumber nel mio menu a tendina Outlet ma non appare.

Codice-

<div class="form-group form-icon-group">
    <i class="fa fa-phone"></i> [tel* ContactNumber /8 class:form-control placeholder "Numero di Contatto *"]
</div>
<div class="form-group form-icon-group">
<i class="fa fa-food"></i> [select Outlet id:outlet class:form-control "-- Seleziona Punto Vendita --" "Pasir Ris" "Thomson"]
</div>

Ho provato ad aggiungere first_as_label "Punto vendita preferito?" ma questo viene visualizzato come un normale valore del menu a tendina.

Tutti gli altri campi mostrano il placeholder, c'è un altro modo per aggiungere un placeholder al menu a tendina?

Sanjuktha sandesh

353

plugin contact form 7

Commenti

È possibile utilizzare l'opzione placeholder nei seguenti tipi di tag del modulo: testo, email, url, tel, textarea, numero, intervallo, data e captchar. cf7 placeholder

Reigel Gallarde

6 gen 2016 07:39:54

quindi per i menu a discesa non abbiamo altre opzioni?

Sanjuktha sandesh

6 gen 2016 07:47:25

Tutte le risposte alla domanda

Contrariamente a quanto suggerisce la risposta accettata, in realtà è possibile ed è integrato in Contact Form 7. Ecco la lista delle opzioni che [select] supporta. Fondamentalmente, puoi definire la prima opzione come segnaposto utilizzando first_as_label:

[select* Test first_as_label "Segnaposto" "Opzione 1" "Opzione 2"]

Anche se non avrà l'aspetto tradizionale di un segnaposto, se è obbligatorio l'utente non potrà selezionare il segnaposto e inviare il modulo - questo costringe l'utente a selezionare una delle altre opzioni.

Howdy_McGee

20.8K

6 gen 2016 17:36:18

Commenti

Grazie per l'aiuto. Ho già provato first_as_label ma come hai detto tu non sembrava simile agli altri valori segnaposto.

Sanjuktha sandesh

7 gen 2016 02:54:59

Questa è una soluzione decente. E funziona correttamente - il modulo non viene inviato se provi a utilizzare la prima opzione. Per formattare la prima opzione, basta puntare alla casella di selezione (ad esempio .wpcf7 select[name="menu-70"] { color:#aaa; }. Poi puoi rendere le opzioni più scure puntando alle opzioni (ad esempio .wpcf7 select[name="menu-70"] option { color:#333; }. La prima opzione viene evidenziata quando viene messa a fuoco, quindi a meno che tu non voglia modificare questa parte, la soluzione funziona perfettamente.

Rob Myrick

16 set 2016 20:05:53

Non sono del tutto sicuro del motivo per cui qualcuno vorrebbe che un'opzione di selezione sembri un segnaposto, a meno che non mi stia perdendo qualcosa. Un semplice "--Seleziona un'opzione--" è ciò che la maggior parte delle persone si aspetta di vedere. Grazie mille per avermi risparmiato di cercare nella documentazione da solo!

Rick Calder

21 set 2018 22:40:31

Ora questa opzione non funziona su Mac. Lo stile viene applicato dal selettore. Le opzioni sono solo una rappresentazione del contenuto. Il testo. Non sono l'elemento stilizzato.

neoswf

21 gen 2022 01:14:47

Questa dovrebbe essere la risposta accettata! Ottimo!

markzzz

4 apr 2023 15:02:20

Commenti

Questa risposta dovrebbe davvero essere rimossa, accettata o meno è errata, e non è nemmeno una risposta molto vecchia, è stata fornita lo stesso giorno in cui è stata data quella corretta.

Rick Calder

21 set 2018 22:42:42

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

per rispondere alla domanda: questo non è possibile.

AFAIK, (in termini di HTML) non c'è modo di aggiungere un placeholder ai tag select.

Molti sviluppatori che conosco tuttavia tendono a usare la combinazione disabled selected per l'option...

<select>
    <option value="" disabled selected>Seleziona la tua opzione</option>
    <option value="ydasdas">ydasdas</option>
    <option value="dasda">dasda</option>
    <option value="ydagfdsdas">ydagfdsdas</option>
    <option value="ewefsdf">ewefsdf</option>
</select>

demo

Ho controllato il codice sorgente di CF7 (versione 4.3.1), e non c'è un modo semplice per ottenere questo formato html.

Puoi optare per la strada più difficile rimuovendo l'azione wpcf7_add_shortcode_select su wpcf7_init e aggiungendo la tua invece.

Reigel Gallarde

889

6 gen 2016 08:18:55