conditional-form-fields.js

/**
 * Handle conditional field logic
 */
$('[data-conditional-switch]').css('display', 'none');
updateConditionalFields();
function updateConditionalFields() {
    $('[data-conditional-control]').each(function () {
        var conditional_value = '';
        var conditional_switch = $(this).attr('name');
        if ($(this).attr('type') == 'radio') {
            conditional_value = $("input[name='"+conditional_switch+"']:checked").val();
        } else {
            conditional_value = $("input[name='" + conditional_switch + "']").val();
        }
        $('[data-conditional-switch]').css('display', 'none');
        $('[data-conditional-switch="'+conditional_switch+'"][data-conditional-value="'+conditional_value+'"]').css('display', '');

    });
}
$('[data-conditional-control="true"]').change(updateConditionalFields);

form-boilerplate.html

<form>
    <input type="text" name="name" id="" placeholder="name" required>
    <div>
        <label>What is your preferred method of contact?</label>
        <label for="waitlist-contact-preference-email">Email</label>
        <input type="radio" name="contact-preference" id="waitlist-contact-preference-email" data-conditional-control="true" value="email" />
        <label for="waitlist-contact-preference-phone">Phone</label>
        <input type="radio" name="contact-preference" id="waitlist-contact-preference-phone" data-conditional-control="true" value="phone" />
    </div>
    <input type="text" name="email" placeholder="email" data-conditional-switch="contact-preference" data-conditional-value="email">
    <input type="text" name="phone" placeholder="phone" data-conditional-switch="contact-preference" data-conditional-value="phone">
</form>