Card summoning games free download.Claim Your Free 999 Pesos Bonus Today

Resolved

kxpro

(@kxpro)

4 months, 3 weeks ago

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>

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

Plugin Author Link Software LLC
(@linksoftware)

4 months, 3 weeks ago

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

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
(@kxpro)

4 months, 1 week ago

Thanks !!

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

You must be logged in to reply to this topic.