Como adicionar espaço reservado para o Contato Form7 para lista suspensa?

Question

Como adicionar espaço reservado para o Contato Form7 para lista suspensa?

- 18
- 112756 2016-01-06
Eutentei adicionarespaço reservado semelhante ao dadopara contactnumber paraminha queda outlet masnão aparece.

Código -

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

Tentei adicionar first_as_label "Preferred outlet?"para queisso sejaexibido como valores suspensos comuns.

Descansetodos os camposmostram oespaço reservado,qualquer outramaneira de darespaço reservadopara descer?
I tried adding placeholder similar to the given for ContactNumber for my drop down Outlet but it doesn't appear.

Code-

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

Tried adding first_as_label "Preferred outlet?" so this displays as ordinary drop down values.

Rest all of the fields do show the placeholder,any other way to give placeholder for drop down?
plugin-contact-form-7

- Vocêpode usar a opção deespaço reservadonos seguintestipos deetiquetas deformulário:texto,e-mail,url,tel,textarea,número,intervalo,datae captchar.[CF7 Placeholder] (http://contactform7.com/setting-placeholder-text/)
  
  You can use the placeholder option in the following types of form tags: text, email, url, tel, textarea, number, range, date, and captchar. [cf7 placeholder](http://contactform7.com/setting-placeholder-text/)
  - 1
  - 2016-01-06
  - Reigel
- Então,para descer,nãotemosnenhuma outraescolha?
  
  so for drop down we don't have any other choice?
  - 0
  - 2016-01-06
  - Sanjuktha sandesh

2 respostas

votos

- 100
- 2016-01-06
Ao contrário do que a resposta aceita sugere,na verdade épossívele incorporadanoformulário de contato 7. Aquiestá o real Lista de opções [Select] Holds .Praticamente você definiria aprimeira opçãopara ser oespaço reservado usando first_as_label :

[Select * Test First_as_Label "" Policcionário "" opção 1 "" opção 2 "]

Emboranão sejatradicionalmenteparecido com umespaço reservado,sefornecessário,o usuárionãopoderá selecionar oespaço reservadoe enviar oformulário -issoforça o usuário a selecionar qualquer uma das outras opções.
Contrary to what the accepted answer suggests, it actually is possible and built into Contact Form 7. Here's the actual list of options [select] holds. Pretty much you would define the first option to be the placeholder using first_as_label:

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

While it won't traditionally look like a placeholder, if it's required the user won't be able to select the placeholder and send the form - this forces the user to select any of the other options.
- Obrigadopela ajuda. Eujátentei `first_as_label`mas como você disse quenãoparecia semelhante a outros valores deespaço reservado.
  
  Thanks for the help.i already tried `first_as_label` but as you said it didn't look similar to other placeholder values.
  - 0
  - 2016-01-07
  - Sanjuktha sandesh
- Esta é uma solução decente.Efunciona corretamente - oformulárionãoenvia se vocêtenta usar aprimeira opção.Paraformatar aprimeira opção,basta segmentar a caixa de seleção (ie `.wpcf7 Selecione [nome="menu-70 "] {cor: #aaa;}}`. Então vocêpodetornar as opçõesmaisescuras ao segmentar as opções (ou seja,`.WPCF7 Selecione [Name="Menu-70"] Opção {cor: # 333;} `Aprimeira opção é demá qualidade,amenos que você queira alterarestaparte,a soluçãofuncionamuitobem.
  
  This is a decent solution. And it does work properly - the form doesn't send if you try using the first option. To format the first option, just target the select box (i.e. `.wpcf7 select[name="menu-70"] { color:#aaa; }`. Then you can make the options darker by targeting the options (i.e. `.wpcf7 select[name="menu-70"] option { color:#333; }`. The first option is highighted on focus, so unless you want to change this part, the solution works great.
  - 4
  - 2016-09-16
  - Rob Myrick
- Eunãotenho certezapor que alguémgostaria de uma opção Selectparaparecer umespaço reservado,amenos queeuestejaperdendo algo um simples - selecione uma opção - é o que amaioria daspessoasespera ver.Muito obrigadoporme salvar de olhar através da documentação sozinho!
  
  I'm not entirely sure why anyone would want a select option to look like a placeholder unless I am missing something a simple --Select an option-- is what most people expect to see. Thank you very much for saving me from looking through the documentation myself!
  - 0
  - 2018-09-21
  - Rick Calder

Reigel · Accepted Answer · 2016-01-06

1

2016-01-06

Para responder àpergunta:issonão épossível.

AFAIK,(HTMLWise) Não há como adicionar umespaço reservadopara selecionartags.

Ummonte de devseu sei,noentanto,tende a usar disabled selected combinaçãopara a opção ...

<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

Eu verifiquei o código-fonte do CF7 (versão 4.3.1),e não hánenhumamaneirafácil de alcançaresteformato HTML.

Vocêpodeir amaneiramais difícil removendo wpcf7_add_shortcode_select açãoem wpcf7_inite adicionar o seuem seu lugar.

to answer the question: this is not possible.

AFAIK, (HTMLwise) there's no way to add a placeholder to select tags.

A lot of devs I know however tend to use disabled selected combination for the option...

<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

I have checked CF7's source code (version 4.3.1), and there's no easy way we can achieve this html format.

You can go the hard way by removing wpcf7_add_shortcode_select action on wpcf7_init and add yours instead.

fonte
Reigel

Esta resposta deve ser removida,aceita ounãoestáincorreta,e não é como sefosse uma respostamuito antiga,foifornecidanomesmo dia que a corretaera.

This answer really should be removed, accepted or not it's incorrect, and it isn't like it's a very old answer, it was supplied on the same day as the correct one was.
- 3
- 2018-09-21
- Rick Calder