JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="pollCont">
<div class="pollTitle">Christmas Debt Survey</div>
<div class="pollTxt">Please answer the following questions.</div>
<div class="poll">

<form name="web_form" id="web_form" method="post" action="process-form-data.php">

<div class="txt">Where are you from?</div>

<select name="quest1" id="quest1">
<option value="select" selected>Please Select</option>
<option value="North-East">North East</option>
<option value="North-West">North West</option>
<option value="Yorkshire-and-the-Humber">Yorkshire and the Humber</option>
<option value="East-Midlands">East Midlands</option>
<option value="West-Midlands">West Midlands</option>
<option value="East-of-England">East of England</option>
<option value="South-East">South East</option>
<option value="South-West">South West</option>
<option value="London">London</option>
<option value="Wales">Wales</option>
<option value="Scotland">Scotland</option>
<option value="Northern Ireland">Northern Ireland</option>
</select>

<div class="txt">Do you save money and plan your Christmas expenditure in advance each year?</div>

<input type="radio" name="quest2" id="q2online" value="Yes" onClick="show('hide1');">
<label for="q2online">Yes</label>

<input type="radio" name="quest2" id="q2high" value="No" onClick="hide('hide1'), reset1('quest3');">
<label for="q2high">No</label>

<div class="hide" id="hide1">
<div class="txt">At what point in the year do you begin saving for Christmas?</div>

<select name="quest3" id="quest3">
<option value="NA" selected>Please Select</option>
<option value="January-March">January-March</option>
<option value="April-June">April-June</option>
<option value="July-September">July-September</option>
<option value="October-December">October-December</option>
</select>
</div>


<div class="txt">Did you have to borrow money to fund your Christmas expenditure last year?</div>

<input type="radio" name="quest4" id="q4yes" value="yes" onClick="show('hide2');">
<label...

CSS

.pollCont {font-family:arial;border:solid #999;border-width:0 1px 1px 1px;max-width:460px;margin:auto;}
.pollTitle {background-color:#00468C;padding:10px;color:#fff;}
.pollTxt {padding:10px;line-height:24px;}
.poll {padding:10px;position:relative;}
.txt {font-weight:bold;margin:0 0 10px 0;color:#00468C;}
.poll input[type="radio"] {display:none;}
.poll label {display:inline-block;border:1px solid #999;padding:10px;margin:0 0 20px 0;}
.poll input[type="radio"]:checked + label {background-color:#BFDFFF;}

.poll select {display:inline-block;border:1px solid #999;padding:10px;margin:0 0 20px 0;}

.txt {display:block;}

#txt1, #txt2, #txt3 {display:none;}

.poll textarea {width:100%;max-width:420px;min-height:120px;border:1px solid #999;display:block;}

.submit {padding:5px 30px;margin:10px 0 0 0;}

.thanks {text-align:center;margin:50px 0;}
.pc {position:absolute;background-color:#F0F8FF;max-width:400px;margin:5px 10px 0 5px;padding:10px;text-align:center;}
#pc {display:none;}
.hide {display:none;}

JavaScript

function show(el) {
document.getElementById(el).style.display = 'block';
}

function hide(el) {
document.getElementById(el).style.display = 'none';
}

function reset1(el) {
document.getElementById(el).selectedIndex = 0;
}

function reset2(el) {
document.getElementById(el).selectedIndex = 0;
document.getElementById('quest6').selectedIndex = 0;
}