<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <form class="form-horizontal cform" role="form"> <h2>Contact Information</h2> <div class="form-group"> <label for="" class="col-sm-3 control-label">Full Name</label> <div class="col-sm-4"> <input type="text" id="" placeholder="First Name" class="form-control" autofocus> </div> <div class="col-sm-4"> <input type="text" id="" placeholder="Last Name" class="form-control" autofocus> </div> </div><!-- /.form-group --> <div class="form-group"> <label for="" class="col-sm-3 control-label">Age</label> <div class="col-sm-9"> <input type="number" id="" placeholder="ex: 23" class="form-control"> </div> </div><!-- /.form-group --> <div class="form-group"> <label for="" class="col-sm-3 control-label">Email</label> <div class="col-sm-9"> <input type="email" id="" placeholder="ex: myname@example.com" class="form-control"> </div> </div><!-- /.form-group --> <div class="form-group"> <label for="" class="col-sm-3 control-label">Phone</label> <div class="col-sm-2"> <input type="text" id="" placeholder="Area Code" class="form-control" maxlength="3"> </div> <div class="col-sm-7"> <input type="tel" id="" placeholder="Phone Number" class="form-control"> </div> </div><!-- /.form-group --> <div class="form-group"> <label for="" class="col-sm-3 control-label">Subject</label> <div class="col-sm-9"> <select id="dd-subject" class="form-control"> <option>Please choose your enquiry</option> <option value="cform__adverse">Adverse Events</option> <option value="cform__productpackaging">Product of Packaging Complaint</option> <option>Product Infomation</option> <option>Product Availability</option> <option>Promos/Discounts</option> <option>Partnerships</option> <option>Company</option> <option>Careers</option> <option>Others</option> </select> </div> </div><!-- /.form-group --> <div class="form-group"> <label for="" class="col-sm-3 control-label">Message</label> <div class="col-sm-9"> <textarea class="form-control" rows="3"></textarea> </div> </div><!-- /.form-group --> <div class="form-group"> <label class="control-label col-sm-3">Contact me by</label> <div class="col-sm-9"> <div class="checkbox"> <label> <input type="checkbox" id="">Phone </label> </div> <div class="checkbox"> <label> <input type="checkbox" id="">Email </label> </div> </div> </div> <!-- /.form-group --> <div class="cform__subjects cform__adverse"> <h2>Adverse Events</h2> <hr class="divider"> <div class="form-group"> <label class="control-label col-sm-3">Gender</label> <div class="col-sm-9"> <div class="checkbox"> <label> <input type="checkbox" id="">Male </label> </div> <div class="checkbox"> <label> <input type="checkbox" id="">Female </label> </div> </div> </div> <!-- /.form-group --> <div class="form-group"> <label for="" class="col-sm-3 control-label">Please specify product</label> <div class="col-sm-9"> <input type="text" id="" placeholder="" class="form-control" autofocus> <span class="help-block">Please put brand name or product name and dosage</span> </div> </div><!-- /.form-group --> <div class="form-group"> <label for="" class="col-sm-3 control-label">Product Lot Number</label> <div class="col-sm-9"> <input type="text" id="" placeholder="" class="form-control" autofocus> <span class="help-block">Printed at the back of the product</span> </div> </div><!-- /.form-group --> <div class="form-group"> <label for="" class="col-sm-3 control-label">Name of affected consumer</label> <div class="col-sm-4"> <input type="text" id="" placeholder="Full Name" class="form-control" autofocus> </div> <div class="col-sm-4"> <input type="text" id="" placeholder="Last Name" class="form-control" autofocus> </div> </div><!-- /.form-group --> <div class="form-group"> <label for="" class="col-sm-3 control-label">Nationality</label> <div class="col-sm-9"> <input type="text" id="" placeholder="" class="form-control" autofocus> </div> </div><!-- /.form-group --> <div class="form-group"> <label class="control-label col-sm-3">Pregnant</label> <div class="col-sm-9"> <div class="checkbox"> <label> <input type="checkbox" id="">Yes </label> </div> <div class="checkbox"> <label> <input type="checkbox" id="">No </label> </div> </div> </div> <!-- /.form-group --> <div class="form-group"> <label for="" class="col-sm-3 control-label">If yes, which trimester</label> <div class="col-sm-9"> <input type="text" id="" placeholder="" class="form-control" autofocus> </div> </div><!-- /.form-group --> <div class="form-group"> <label for="" class="col-sm-3 control-label">Duration of use</label> <div class="col-sm-9"> <input type="text" id="" placeholder="" class="form-control" autofocus> <span class="help-block">How long have you been taking our product?</span> </div> </div><!-- /.form-group --> <div class="form-group"> <label for="" class="col-sm-3 control-label">Frequency of use</label> <div class="col-sm-9"> <input type="text" id="" placeholder="" class="form-control" autofocus> <span class="help-block">per day</span> </div> </div><!-- /.form-group --> <div class="form-group"> <label for="" class="col-sm-3 control-label">Start of Adverse Event</label> <div class="col-sm-9"> <input type="text" id="" placeholder="" class="form-control" autofocus> </div> </div><!-- /.form-group --> <div class="form-group"> <label for="" class="col-sm-3 control-label">Other products taken</label> <div class="col-sm-9"> <input type="text" id="" placeholder="" class="form-control" autofocus> <span class="help-block">Products used simultaneously with our product</span> </div> </div><!-- /.form-group --> <div class="form-group"> <label for="" class="col-sm-3 control-label">Any known allergies</label> <div class="col-sm-9"> <input type="text" id="" placeholder="" class="form-control" autofocus> </div> </div><!-- /.form-group --> <div class="form-group"> <label for="" class="col-sm-3 control-label">How was the product used?</label> <div class="col-sm-9"> <input type="text" id="" placeholder="" class="form-control" autofocus> <span class="help-block">i.e Applied to face and neck every morning</span> </div> </div><!-- /.form-group --> <div class="form-group"> <label class="control-label col-sm-3">Did the person seek medical attention?</label> <div class="col-sm-9"> <div class="checkbox"> <label> <input type="checkbox" id="">Yes </label> </div> <div class="checkbox"> <label> <input type="checkbox" id="">No </label> </div> </div> </div> <!-- /.form-group --> <div class="form-group"> <label class="control-label col-sm-3">Is the person hospitalized due to the adverse reaction?</label> <div class="col-sm-9"> <div class="checkbox"> <label> <input type="checkbox" id="">Yes </label> </div> <div class="checkbox"> <label> <input type="checkbox" id="">No </label> </div> </div> </div> <!-- /.form-group --> <div class="form-group"> <label class="control-label col-sm-3">Do you consider the reaction to be serious?</label> <div class="col-sm-9"> <div class="checkbox"> <label> <input type="checkbox" id="">Yes </label> </div> <div class="checkbox"> <label> <input type="checkbox" id="">No </label> </div> </div> </div> <!-- /.form-group --> <div class="form-group"> <label class="control-label col-sm-3">Treatment Outcome</label> <div class="col-sm-9"> <div class="checkbox"> <label> <input type="checkbox" id="">Recovered </label> </div> <div class="checkbox"> <label> <input type="checkbox" id="">Not yet Recovered </label> </div> <div class="checkbox"> <label> <input type="checkbox" id="">Unknown </label> </div> </div> </div> <!-- /.form-group --> <div class="form-group"> <label class="control-label col-sm-3">If Yes,</label> <div class="col-sm-9"> <div class="checkbox"> <label> <input type="checkbox" id="">Patient died due toreaction </label> </div> <div class="checkbox"> <label> <input type="checkbox" id="">Involved or prolongedin-patient hospitalization </label> </div> <div class="checkbox"> <label> <input type="checkbox" id="">Life threatening </label> </div> <div class="checkbox"> <label> <input type="checkbox" id="">Involved persistentor significant disability </label> </div> <div class="checkbox"> <label> <input type="checkbox" id="">Congenital anomaly inthe newborn </label> </div> <div class="checkbox"> <label> <input type="checkbox" id=""><input type="text" id="" placeholder="Other" class="form-control" autofocus> </label> </div> </div> </div> <!-- /.form-group --> <div class="form-group"> <label for="" class="col-sm-3 control-label">Description of Adverse Event</label> <div class="col-sm-9"> <textarea class="form-control" rows="3"></textarea> </div> </div><!-- /.form-group --> <div class="form-group"> <label for="" class="col-sm-3 control-label">Description of Adverse Event</label> <div class="col-sm-9"> <button type="button">Choose Files</button> <span class="help-block">Any additional supporting files</span> </div> </div><!-- /.form-group --> </div><!-- /.cform__adverse --> <div class="cform__subjects cform__productpackaging"> <h2>Product of Packaging Complaint</h2> <hr class="divider"> <div class="form-group"> <label class="control-label col-sm-3">Quantity</label> <div class="col-sm-9"> <input type="text" id="" placeholder="" class="form-control" autofocus> </div> </div><!-- /.form-group --> <div class="form-group"> <label class="control-label col-sm-3">Source of Product</label> <div class="col-sm-9"> <input type="text" id="" placeholder="" class="form-control" autofocus> <span class="help-block">Sample, Trade, Giveaways?</span> </div> </div><!-- /.form-group --> <div class="form-group"> <label class="control-label col-sm-3">Pack Size</label> <div class="col-sm-9"> <input type="text" id="" placeholder="" class="form-control" autofocus> <span class="help-block">i.e., 120mL, 50mL</span> </div> </div><!-- /.form-group --> </div><!-- /.cform__productpackaging --> <div class="form-group cform__submit"> <div class="col-sm-9 col-sm-offset-3"> <button type="submit" class="btn btn-primary btn-block">Submit</button> </div> </div><!-- /.form-group --> </form> <!-- /form --> </div> <!-- ./container -->

.cform { max-width: 800px; } .cform__adverse, .cform__productpackaging, .cform__submit { display: none; } .cform input, .cform select, .cform textarea { background-color: #eaf4ff; border-color: #aab2cf; } .cform h2 { text-transform: uppercase; font-size: 18px; font-weight: bold; } .cform__subjects { margin-top: 40px; } .cform .btn { background-color: #00478c; text-transform: uppercase; font-weight: bold; border-radius: 50px; }

$(function () { $("#dd-subject").change(function() { var subjValues = ["cform__adverse", "cform__productpackaging"]; var val = $(this).val(); var otherSubj = subjValues.filter(function(x) { return x !== val; }); for (var i = 0; i < subjValues.length; i++) { if(val === subjValues[i]) { $("." + val).fadeIn(500); $(".cform__submit").fadeIn(500); for (var i = 0; i < otherSubj.length; i++) { $("." + otherSubj[i]).fadeOut(500); } } else { $("." + subjValues[i]).fadeOut(500); $(".cform__submit").fadeOut(500); } } }); });