Title: Conditional Elements
Last modified: July 8, 2024

---

# Conditional Elements

 *  Resolved [kxpro](https://wordpress.org/support/users/kxpro/)
 * (@kxpro)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/conditional-elements/)
 * 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.
 *     ```wp-block-code
       <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>
       ```
   

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Author [Link Software LLC](https://wordpress.org/support/users/linksoftware/)
 * (@linksoftware)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/conditional-elements/#post-17875782)
 * [@kxpro](https://wordpress.org/support/users/kxpro/) Your best bet is to use 
   the `hf_form_markup` filter and add those fields to your form with PHP and a 
   loop. You can learn more about how to add HTML to a form dynamically on the [Code Snippets page of the plugin’s knowledge base](https://htmlformsplugin.com/kb/code-snippets/).
 * There’s also a `hf_action_email_message` filter that you could maybe use to adjust
   the email. This would be a lot of work, though. Again, information is available
   on the Code Snippets page.
 *  Thread Starter [kxpro](https://wordpress.org/support/users/kxpro/)
 * (@kxpro)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/conditional-elements/#post-17891095)
 * Thanks !!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Conditional Elements’ is closed to new replies.

 * ![](https://ps.w.org/html-forms/assets/icon-256x256.png?rev=1754345)
 * [HTML Forms - Simple WordPress Forms Plugin](https://wordpress.org/plugins/html-forms/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/html-forms/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/html-forms/)
 * [Active Topics](https://wordpress.org/support/plugin/html-forms/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/html-forms/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/html-forms/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [kxpro](https://wordpress.org/support/users/kxpro/)
 * Last activity: [1 year, 10 months ago](https://wordpress.org/support/topic/conditional-elements/#post-17891095)
 * Status: resolved