Comment ajouter un espace réservé au formulaire de contact7 pour le menu déroulant?

Question

Comment ajouter un espace réservé au formulaire de contact7 pour le menu déroulant?

- 18
- 112756 2016-01-06
J'aiessayé d'ajouter unespace réservé similaire à celui donnépour ContactNumber pourmon Outlet déroulant,maisiln'apparaîtpas.

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>

J'aiessayé d'ajouter first_as_label "Preferred outlet?"pour que cela s'affiche sousforme de valeurs déroulantes ordinaires.

Reste quetous les champs affichent l'espace réservé,une autrefaçon de donner unespace réservépour la liste déroulante?
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

- Vouspouvez utiliser l'option d'espace réservé dans lestypes debalises deformulaire suivants:texte,e-mail,URL,tel,zone detexte,nombre,plage,dateet captchar.[espace réservé cf7] (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
- doncpour drop downnousn'avonspas d'autre choix?
  
  so for drop down we don't have any other choice?
  - 0
  - 2016-01-06
  - Sanjuktha sandesh

2 réponses

votes

- 100
- 2016-01-06
Contrairement à ce que suggère la réponse acceptée,ilesten faitpossibleet intégré auformulaire de contact 7. Voici le liste d'options [select] suspensions .Àpeuprès,vous définiriez lapremière option comme étant l'espace réservéen utilisant first_as_label:

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

Bien qu'ilne ressemblegénéralementpas à unespace réservé,si celaestnécessaire,l'utilisateurne pourrapas sélectionner l'espace réservéet envoyer leformulaire - cela oblige l'utilisateur à sélectionner l'une des autres options.
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.
- Mercipour l'aide,j'ai déjàessayé `first_as_label`mais comme vous l'avez dit,celane ressemblaitpas aux autres valeurs d'espace réservé.
  
  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
- C'est une solution décente.Et celafonctionne correctement - leformulairen'estpasenvoyé si vousessayez d'utiliser lapremière option.Pourformater lapremière option,ciblez simplement laboîte de sélection (parexemple,`.wpcf7 select [name="menu-70 "] {color: #aaa;}`. Ensuite,vouspouvez assombrir les optionsen ciblant les options (parexemple,`.wpcf7 select [name="menu-70"] option {color: # 333;} `. Lapremière optionestmiseen évidence,donc àmoins que vousne vouliez changer cettepartie,la solutionfonctionnetrèsbien.
  
  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
- Jene suispastout àfait sûr de savoirpourquoi quelqu'un voudrait qu'une option de sélection ressemble à unespace réservé àmoins queje nemanque quelque chose,un simple - Sélectionnez une option -est ce que laplupart desgens s'attendent à voir.Mercibeaucoup dem'avoir évité deparcourir la documentationmoi-même!
  
  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

pour répondre à la question: cen'estpaspossible.

AFAIK,(HTMLwise)iln'y a aucunmoyen d'ajouter unespace réservépour sélectionner desbalises.

Beaucoup de développeurs queje connais ont cependanttendance à utiliser la combinaison disabled selectedpour l'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>

démo

J'ai vérifié le code source de CF7 (version 4.3.1),et iln'y apas demoyenfacile d'obtenir ceformat html.

Vouspouvez allerplus loinen supprimant l'action wpcf7_add_shortcode_select sur wpcf7_initet en ajoutant la vôtre à laplace.

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.

Cette réponse devrait vraiment être supprimée,acceptée ounon,elleestincorrecte,et cen'estpas comme si c'était unetrès vieille réponse,elle a étéfournie lemêmejour que labonne.

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