JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<h1>Contact Support</h1>
        
<p>Please enter the following information. Fields marked with asterisk (*) are required.</p>

<div class="forminput">
<form name="form1" method="post" action="contact_send.php">  
    <fieldset>
        <legend>Contact Information</legend><br />
        <label>*Type of product</label> <select id="type" name="type">
        <option value="select">(Please select)</option>
        <option value="monitor">Monitor</option>
        <option value="signage">Digital signage/Kiosk</option>
        <option value="video">Video monitoring</option>
        </select><br />
        <label class="account">*Signage account</label> <select id="account" class="account" name="account">
        <option value="select">(Please select)</option>
        <option value="standalone">Stand alone</option>
        <option value="multiq">Hosted by MultiQ</option>
        <option value="partner">Hosted by partner</option>
        </select><br />
        <label class="url">*Account URL</label> <input class="url" name="url" type="text" size="30" /><br />
        <label class="standard">*Subject</label> <input class="standard" name="subject" type="text" size="30" /><br />
        <label class="standard">*Name</label> <input class="standard" name="name" type="text" size="30" /><br />
        <label class="standard">Company name</label> <input class="standard" name="company" type="text" size="30" /><br />
        <label class="standard">*Product code</label> <input class="standard" name="code" type="text" size="30" /><br />
        <label class="standard">Serial no</label> <input class="standard" name="serial" type="text" size="30" /><br />
        <label class="standard">*E-mail</label> <input class="standard" name="email" type="text" size="30" /><br />
        <label class="standard">Phone</label> <input class="standard" name="phone" type="text" size="30" /><br />
            <p class="standard"><em>To help us give you a rapid and efficient response, please fill out...

CSS

body {
font-size: 65%;
font-family: Arial, sans-serif;
}

.forminput {
    border: 1px solid #E0E0E0;
    width: 520px;
    margin: 20px 0 0 0;
    padding: 10px 0 0 0;
}

.clear-fix {
    display: hidden;
    margin: 0;
    padding: 0;
    height: 0;
    clear: both;
}

label {
    margin: 0 10px 0 0;
    padding: 0 0 15px 0;
    font-size: 110%;
    line-height: 1.5em;
    float: left;
    width: 90px;
    text-align: right;
}

fieldset br {
    clear: both;
}

fieldset button {
    float: right;
    margin: 10px 0 0 0;
}

fieldset p {
    margin: 0 0 15px 100px;
    padding: 0;
    font-size: 110%;
    line-height: 1.5em;
}

fieldset {
    float: left;
    width: auto;
    margin: 0;
    padding: 10px;  
    border: 0;
}

fieldset textarea {
    width: 395px;
}

legend {
    margin 0;
    font-weight: bold;
    font-size: 120%;
    padding: 5px 10px;
    color: white;
    background-color: #C1C1C1;
    border: 1px solid #C1C1C1;
    height: 25px;
    line-height: 25px;
    width: 480px;
    overflow: hidden;
    display: block;
}



p {
    margin: 5px 0 10px 0;
    padding: 0;
    font-size: 110%;
    line-height: 1.5em;
}


em {
    font-style: italic;
}

h1 {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    margin: 0 0 0.8em;
    color: #393939;
    font-weight: bold;
}

JavaScript

$(function() {
    // Handler for .ready() called.
    $('.account').hide();
    $('.url').hide();
    $('.standard').hide();

    $('#type').change(function() {
        if (($('#type').val() == 'select') || ($('#type').val() == 'signage') & ($('#account').val() == 'select')){
           $('.standard').hide();
        }
        else {
           $('.standard').show();
        }
    });
    
    $('#type').change(function() {
        if ($('#type').val() == 'signage') {
            $('.account').show();
        }
        else {
            $('.account').hide();
        }
    });
    
        $('#account').change(function() {
        if (($('#account').val() == 'standalone') || ($('#account').val() == 'multiq') || ($('#account').val() == 'partner')){
           $('.standard').show();
        }
        else {
           $('.standard').hide();
        }
    });
       
    $('#account').change(function() {
        if (($('#account').val() == 'multiq') || ($('#account').val() == 'partner')){
            $('.url').show();
        }
        else {
            $('.url').hide();
        }
    });
});