Responsive contact/application form

Question

I have an application form that users answer questions on and am looking for some responsiveness. Basically what I am looking for is some way so that if the user checks something like

Other

<div>

    <div>

        <input type="checkbox" name="Other" value="Other" />

    </div>

    <label>Other</label>

</div>

Then and only then it shows

<div>

    <label>If other, which game(s)?</label>

    <textarea name="Other Response"></textarea>

</div>

Thank you! I've got it working.

Answer 1

Initially you can create textarea content with display:'none' property, so that the not visible to the user and you can show the part of other Content HTML element, when he checks the other checkbox.

Check the working code here,

**HTML**
<div class="userCheck">
 <input type="checkbox" id="other" name="Other" value="Other" />
 <label>Other</label>
</div>

<div class="otherCon">
 <label>If other, which game(s)?</label>
 <textarea name="Other Response"></textarea>
</div>

**CSS**
.otherCon {
  visibility: hidden;
}

**JS**
$('#other').on('click', function() {
 if ($(this).is(':checked')) {
  $('.otherCon').css('visibility', 'visible');
 } else {
   $('.otherCon').css('visibility', 'hidden');
 }
});

Responsive contact/application form

Sign up