Form Adder

by kthornbloom

HTML

Give your form a name:
<br>
<input type="text" value="Form Name">
    <div class="form-item-wrapper">
    <div class="add-form-item">
        <select class="add-form-select">
            <option selected disabled>Add Form Item</option>
            <option value="1">Single Text Box</option>
            <option value="2">Text Area</option>
            <option value="3">Select Menu</option>
            <option value="4">Check Box</option>
            <option value="4">Radio Button</option>
            <option value="5">Header</option>
        </select>
        <div class="add-form-details"></div>
    </div>
    </div>
 <a href="#" class="additional-item">+ add form item</a>
    <br>
    <a href="#" class="button">Build Form</a>

CSS

body {
    font-family:sans-serif;
}
.add-form-item {
    border:1px solid #ccc;
    background:#eee;
    padding:5px;
    margin:2px 0;
    position:relative;
}
.remove-item {
    position:absolute;
    top:5px;
    right:10px;
    color:#222;
    text-decoration:none;
}
.button {
    padding: 2px 10px;
    border-radius: 3px;
    border: none;
    background: #EC4B22;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    margin-top: -3px;
    cursor: pointer;
}
.additional-item {
    text-decoration:none;
    color:#EC4B22;
    font-size:14px;
    padding:15px 10px;
    display:inline-block;
}

JavaScript

/*jshint multistr: true */

// Change a select
$(document.body).on('change', '.add-form-select', function (event) {

    
    var selected = $(this).val();
    
// Text Box
    if (selected == '1') {
        $(this).parent().find('.add-form-details').html('First, give your text box a title:<br> \
        <input type="text" value=""><br><br> \
        Does it need to allow only a certain kind of information?<br> \
        <select> \
            <option selected disabled>No</option> \
            <option value="1">Name</option> \
            <option value="2">Email Address</option> \
            <option value="3">Date</option> \
            <option value="4">Phone Number</option> \
        </select><br><br> \
       <input type="checkbox"> Make this field required?');
        
// Text Area
    } else if (selected == '2') {
        $(this).parent().find('.add-form-details').html('Please give your text area a title:<br> \
        <input type="text" value=" "><br><br> \
        <input type="checkbox"> Make this field required?');
        
// Select Menu
    } else if (selected == '3') {
        $(this).parent().find('.add-form-details').html('First, give your select menu a title:<br> \
        <input type="text" value=""><br><br> \
        Next, add the items you want in the menu:<br> \
        <div class="select-wrapper"> \
        <input type="text" value=""> <input type="radio" name="default"> Default?</div> \
        <a href="#" class="add-to-select">+ Add menu option</a><br><br> \
        <input type="checkbox"> Make this field required?');
        
// Check Box
    } else if (selected == '4') {
        $(this).parent().find('.add-form-details').html('First, give your set of checkboxes a title:<br> \
        <input type="text" value=""> <br><br> \
Add a checkbox:<br> \
        <div class="select-wrapper"> \
        <input type="text" value=""> <input type="checkbox" name="checked"> Checked by Default?</div> \
        <a href="#" class="add-to-check">+ Add another...