Most elegant way to achieve this?

Are you sure a select is right for choosing the number of meals? isn’t an input number better?

and in addition, a range slider can be more friendly, check this:
https://codepen.io/erikyo/pen/jOBeyOd

Hi,
first of all thank you so much for taking the time to reply. I know this is a free forum and you’re basically doing me a favor even if you don’t know me, so thank you!

About your solution I have a couple of questions.
Here’s the site (in italian)
https://7i.se/VR

My questions are:
1) In the solution your suggested I don’t see the shortcodes used on the “contact form 7” plugin. For instance now my shortcodes are this:

<p><span>Nome e Cognome</span>[text* your-name] </p>
<p><span>Confermate la presenza</span>[radio radio-109 use_label_element "Si, ci sarò" "No, non potrò esserci"]</p>
<p><span>Quanti siete?</span>[select menu-811 include_blank "1" "2" "3" "4" "5" "6" "7"]</p>
<p><span>Nomi e Cognomi dei componenti del vostro gruppo</span>[textarea textarea-129] </p>
<p><span>Utilizzerete il servizio navetta?</span>[radio radio-109 use_label_element "Si" "No"]</p>
<p><span>Allergie alimentari</span>[textarea your-message] </p>
<p class="submitForm">[submit "Invia"]</p>

In the link you sent me I see HTML and JS code. I was looking for a simple solution I could achieve with the available tools on the plugin. Any tips?

2) I think this idea with the slider could work, just below it should appear written for example (4 meats, 1 fish) so it’s more clear. I think input number can be bad because there will be many computer-illiterate guests that could for example enter stuff like:
Number of guests: 5
Meat menu: 4
Fish menu: 5

Maybe thinking they can pick both or being fast, or confused. So I want to make it in a way that they cannot get it wrong and are forced to make a fixed selection.

ciao @deon-b,

you have to change the js code with the “name” of the wpcf7 field elements and will work, something like that:

function updateFishMeat() {
  // selected value 
  $('#fishmeat').attr( 'max', $('select[name="menu-811"]').val() );
  $('#fishcount').text( $('#fishmeat').val() );
  $('#meatcount').text( $("#fishmeat").attr('max') - $('#fishmeat').val() );
}

$( document ).ready( updateFishMeat );
$('select[name="menu-811"], #fishmeat').change( updateFishMeat );

in addition you may need to add a range input after “menu-181”
https://contactform7.com/number-fields/#range

updated the pen with the working example…

• This reply was modified 3 years, 5 months ago by Erik. Reason: inverted values

Hi!
I am a little bit confused.
I added the HTML code in the Form page.

<p><span>Nome e Cognome</span>[text* your-name] </p>
<p><span>Confermate la presenza</span>[radio radio-109 use_label_element "Si, ci sarò" "No, non potrò esserci"]</p>
<p><span>Quanti siete?</span>[select menu-811 include_blank "1" "2" "3" "4" "5" "6" "7"]</p>
<p><span>Nomi e Cognomi dei componenti del vostro gruppo</span>[textarea textarea-129] </p>
<p><span>Utilizzerete il servizio navetta?</span>[radio radio-109 use_label_element "Si" "No"]</p>
<p><span>Allergie alimentari</span>[textarea your-message] </p>

<label>How many people?</label>
<select name="menu-811" id="people">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5" selected>5</option>
</select>

<br/><br/>

<span id="meatcount">0</span> MEAT
<input type="range" id="fishmeat" name="fishmeat" 
         min="0" max="5" value="3" step="1">
<span id="fishcount">0</span> FISH

<p class="submitForm">[submit "Invia"]</p>

But where am I supposed to change this, is it in functions.php? or in “additional settings”? or do I need to create a JS file and add it to the plugin folder via FTP?

function updateFishMeat() {
  // selected value 
  $('#fishmeat').attr( 'max', $('select[name="menu-811"]').val() );
  $('#fishcount').text( $('#fishmeat').val() );
  $('#meatcount').text( $("#fishmeat").attr('max') - $('#fishmeat').val() );
}

$( document ).ready( updateFishMeat );
$('select[name="menu-811"], #fishmeat').change( updateFishMeat );

Could you kindly clarify a little bit more?

Thank you!

ciao @deon-b you need to use the contact form tags.
in this way:

<p><span>Nome e Cognome</span>[text* your-name] </p>
<p><span>Confermate la presenza</span>[radio radio-109 use_label_element "Si, ci sarò" "No, non potrò esserci"]</p>

<p><span>Quanti siete?</span>[select menu-811 id:partecipanti include_blank "1" "2" "3" "4" "5" "6" "7"]</p>
<p><span id="meatcount">0</span> MEAT [range* your-fishmeat id:fishmeat min:0 max:7 step:1 "0"]<span id="fishcount">0</span> FISH</p>

<p><span>Nomi e Cognomi dei componenti del vostro gruppo</span>[textarea textarea-129] </p>
<p><span>Utilizzerete il servizio navetta?</span>[radio radio-109 use_label_element "Si" "No"]</p>
<p><span>Allergie alimentari</span>[textarea your-message] </p>
<label>How many people?</label>

<p class="submitForm">[submit "Invia"]</p>

<script type="text/javascript">
jQuery(document).ready(function($){
function updateFishMeat() {
// selected value 
if (!$('#partecipanti').val()) return 0;
$('#fishmeat').attr( 'max', $('#partecipanti').val() );
$('#fishcount').text( $('#fishmeat').val() );
$('#meatcount').text( $("#fishmeat").attr('max') - $('#fishmeat').val() );
}
  updateFishMeat();
  $('#partecipanti').change( updateFishMeat );
  $('#fishmeat').change( updateFishMeat );
});</script>

take a look here (with a true contact form)
https://modul-r.codekraft.it/test-2/

ps. dopo che te l’ho scritto tutto io, se c’è da mangiare bene mi aspetto di essere tra gli invitati al matrimonio! ??????

Haha ?? ok thank you