I’m trying to create conditional forms but my implementation doesn’t look pretty.
I want a “Dropdown” field to work like this:
The dropdown field chooses the number of people 1,2,3,4…..
When you select 1 person, some fields should appear to fill out for this person
When 2 people are selected, the fields for the first person + the fields for the second person should appear
And so on…
I have it working this way but the problem is that I have a lot of duplicate code and when the emails arrive from those who fill out the form it is very confusing.
I ask for any advice or solution please.
<div>
<label for="form-NUMBER_OF_PERSONS">number of people</label>
<select name="PERSONS" id="form-NUMBER_OF_PERSONS">
<option name="PERSONS" value="1">1</option>
<option name="PERSONS" value="2">2</option>
<option name="PERSONS" value="3">3</option>
<!-- More people... -->
</select>
</div><div>
<div data-show-if="PERSONS:1">
<div>
<div>Diver 1</div>
<div>
<label for="dive-form-HOW_MANY_DIVES"
>How many logged dives do you have?
</label>
<div>
<input
type="number"
name="HOW_MANY_DIVES"
id="dive-form-HOW_MANY_DIVES"
/>
</div>
</div>
<div>
<label for="dive-form-HOW_OLD_ARE_YOU">How old are you? </label>
<label>
<input name="HOW_OLD_ARE_YOU" type="radio" value="0-12" />
<span>0-12</span>
</label>
<label>
<input name="HOW_OLD_ARE_YOU" type="radio" value="13-17" />
<span>13-17</span>
</label>
</div>
<div>
<label for="dive-form-WHEN_LAST_DIVE"
>When was your last dive day?</label
>
<label>
<input name="WHEN_LAST_DIVE" type="radio" value="0-3 months" />
<span>0-3 months</span>
</label>
<label>
<input name="WHEN_LAST_DIVE" type="radio" value="3-6 months" />
<span>3-6 months</span>
</label>
<label>
<input name="WHEN_LAST_DIVE" type="radio" value="6-12 months" />
<span>6-12 months</span>
</label>
</div>
</div>
</div>
<div data-show-if="PERSONS:2">
<div>
<div>Diver 1</div>
<div>
<label for="dive-form-HOW_MANY_DIVES"
>How many logged dives do you have?
</label>
<div>
<input
type="number"
name="HOW_MANY_DIVES"
id="dive-form-HOW_MANY_DIVES"
/>
</div>
</div>
<div>
<label for="dive-form-HOW_OLD_ARE_YOU">How old are you? </label>
<label>
<input name="HOW_OLD_ARE_YOU" type="radio" value="0-12" />
<span>0-12</span>
</label>
<label>
<input name="HOW_OLD_ARE_YOU" type="radio" value="13-17" />
<span>13-17</span>
</label>
</div>
<div>
<label for="dive-form-WHEN_LAST_DIVE"
>When was your last dive day?</label
>
<label>
<input name="WHEN_LAST_DIVE" type="radio" value="0-3 months" />
<span>0-3 months</span>
</label>
<label>
<input name="WHEN_LAST_DIVE" type="radio" value="3-6 months" />
<span>3-6 months</span>
</label>
<label>
<input name="WHEN_LAST_DIVE" type="radio" value="6-12 months" />
<span>6-12 months</span>
</label>
</div>
</div>
<div>
<div>Diver 2</div>
<div>
<label for="dive-form-HOW_MANY_DIVES2"
>How many logged dives do you have?
</label>
<div>
<input type="number" name="HOW_MANY_DIVES2" />
</div>
</div>
<div>
<label for="dive-form-HOW_OLD_ARE_YOU2">How old are you? </label>
<label>
<input name="HOW_OLD_ARE_YOU2" type="radio" value="0-12" />
<span>0-12</span>
</label>
<label>
<input name="HOW_OLD_ARE_YOU2" type="radio" value="13-17" />
<span>13-17</span>
</label>
</div>
<div>
<label for="dive-form-WHEN_LAST_DIVE2"
>When was your last dive day?</label
>
<label>
<input name="WHEN_LAST_DIVE2" type="radio" value="0-3 months" />
<span>0-3 months</span>
</label>
<label>
<input name="WHEN_LAST_DIVE2" type="radio" value="3-6 months" />
<span>3-6 months</span>
</label>
<label>
<input name="WHEN_LAST_DIVE2" type="radio" value="6-12 months" />
<span>6-12 months</span>
</label>
</div>
</div>
</div>
<div data-show-if="PERSONS:3">
<div>
<div>Diver 1</div>
<div>
<label for="dive-form-HOW_MANY_DIVES"
>How many logged dives do you have?
</label>
<div>
<input
type="number"
name="HOW_MANY_DIVES"
id="dive-form-HOW_MANY_DIVES"
/>
</div>
</div>
<div>
<label for="dive-form-HOW_OLD_ARE_YOU">How old are you? </label>
<label>
<input name="HOW_OLD_ARE_YOU" type="radio" value="0-12" />
<span>0-12</span>
</label>
<label>
<input name="HOW_OLD_ARE_YOU" type="radio" value="13-17" />
<span>13-17</span>
</label>
</div>
<div>
<label for="dive-form-WHEN_LAST_DIVE"
>When was your last dive day?</label
>
<label>
<input name="WHEN_LAST_DIVE" type="radio" value="0-3 months" />
<span>0-3 months</span>
</label>
<label>
<input name="WHEN_LAST_DIVE" type="radio" value="3-6 months" />
<span>3-6 months</span>
</label>
<label>
<input name="WHEN_LAST_DIVE" type="radio" value="6-12 months" />
<span>6-12 months</span>
</label>
</div>
</div>
<div>
<div>Diver 2</div>
<div>
<label for="dive-form-HOW_MANY_DIVES2"
>How many logged dives do you have?
</label>
<div>
<input type="number" name="HOW_MANY_DIVES2" />
</div>
</div>
<div>
<label for="dive-form-HOW_OLD_ARE_YOU2">How old are you? </label>
<label>
<input name="HOW_OLD_ARE_YOU2" type="radio" value="0-12" />
<span>0-12</span>
</label>
<label>
<input name="HOW_OLD_ARE_YOU2" type="radio" value="13-17" />
<span>13-17</span>
</label>
</div>
<div>
<label for="dive-form-WHEN_LAST_DIVE2"
>When was your last dive day?</label
>
<label>
<input name="WHEN_LAST_DIVE2" type="radio" value="0-3 months" />
<span>0-3 months</span>
</label>
<label>
<input name="WHEN_LAST_DIVE2" type="radio" value="3-6 months" />
<span>3-6 months</span>
</label>
<label>
<input name="WHEN_LAST_DIVE2" type="radio" value="6-12 months" />
<span>6-12 months</span>
</label>
</div>
</div>
<div>
<div>Diver 3</div>
<div>
<label for="dive-form-HOW_MANY_DIVES3"
>How many logged dives do you have?
</label>
<div>
<input type="number" name="HOW_MANY_DIVES3" />
</div>
</div>
<div>
<label for="dive-form-HOW_OLD_ARE_YOU3">How old are you? </label>
<label>
<input name="HOW_OLD_ARE_YOU3" type="radio" value="0-12" />
<span>0-12</span>
</label>
<label>
<input name="HOW_OLD_ARE_YOU3" type="radio" value="13-17" />
<span>13-17</span>
</label>
</div>
<div>
<label for="dive-form-WHEN_LAST_DIVE3"
>When was your last dive day?</label
>
<label>
<input name="WHEN_LAST_DIVE3" type="radio" value="0-3 months" />
<span>0-3 months</span>
</label>
<label>
<input name="WHEN_LAST_DIVE3" type="radio" value="3-6 months" />
<span>3-6 months</span>
</label>
<label>
<input name="WHEN_LAST_DIVE3" type="radio" value="6-12 months" />
<span>6-12 months</span>
</label>
</div>
</div>
</div>
<!-- More people... -->
</div>
<div>
<input type="submit" value="Send" />
</div>