Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="inner-container" class="pull-center">
<header class="pull-center text-center">
 <h1 id="title">Survey Form</h1>

<p id="description">Let us know how <em>Koni Kodes</em> is doing!</p>

</header>

  
<form id="survey-form" class="form-horizontal" role="form">

<fieldset><br/>
<div class="legend">Tell us about You!</div>

  <div id="info">
    <div class="form-group row">
 <label id="name-label" class="col-form-label" for="name-label">Name <i class="text-danger">*</i></label> 
 <input type="text" id="name" placeholder=" Who are you? " required />
    </div>
    <div class="form-group row">
  <label id="email-label" class="col-form-label" for="email-label">Email Address <i class="text-danger">*</i></label> 
  <input type="email" id="email" placeholder=" There will be no spam" required />
    </div>

    <div class="form-group row">
<label id="number-label" class="col-form-label" for="number-label">How do you rate us? <i class="text-danger">*</i></label> &nbsp; 
<input id="number" type="number" pattern="[1-10]" placeholder=" 1=Sorry to 10=Awesome!" min="1" max="10"  required /><br/>

    </div>

    <div class="form-group row">
<label id="why-label" type="textarea" class="col-form-label" for="why">Why do you say that?</label>&nbsp;
<input type="text" id="why" placeholder="Why did you rate this way?"><br/>
</div>
</fieldset>

<div class="legend">Tell us about Koni Kodes!</div>

 <div>
 <fieldset> 
 <div class="row">
 <label class="form-label text-center">Will You Recommend Koni Kodes to Friends?</label></div>



 <input type="radio" name="recommend" value="Absolutely" checked title="recommendYes"><label for="recommendYes"> <strong>Absolutely!</strong></label><small> Koni Kodes is Awesome!</small><br/>
<input type="radio" name="recommend" value="Maybe" title="recommendMaybe"> <strong>Maybe</strong> <small> After we've worked together a little more</small><br/>
 <input type="radio" name="recommend" value="Not" title="recommendNot"> <strong>Not</strong> <small>until some changes are made</small><br/>  

</fieldset>
 <fieldset> 
 <div class="row">
 <label class="form-label text-center">
 
What do you like about Koni Kodes?</label></div>
<input type="checkbox" class="like"  value="Fast Response Time" title="response"> Fast Response Time 
<input type="checkbox" class="like"  value=" Beautiful Work" title="beautiful"> Beautiful Work 
<input type="checkbox" class="like"  value=" Professional Attitude" title="professional"> Professional Attitude 
<input type="checkbox" class="like"  value=" Everything" title="everything"> Everything<small> It's all great!</small><br/>   
<input type="checkbox" class="like"  value=" Nothing" title="nothing"> Nothing<small> I am not a happy client!</small> 
</fieldset>

 <fieldset> 
 <div class="row">
 <label class="form-label text-center">
 
What do you think Koni Kodes should improve on?</label></div>
<input type="checkbox" class="improve" value="Response Time" title="impresponse"> Response Time 
<input type="checkbox" class="improve" value=" Workmanship" title="impbeautiful"> Workmanship 
<input type="checkbox" class="improve" value=" Attitude" title="impprofessional"> Attitude 
<input type="checkbox" class="improve" value=" Everything" title="impeverything"> Everything<br/>
<input type="checkbox" class="improve" value=" Nothing" title="impnothing"> Nothing<small> I am a Happy Client!</small>
</fieldset>
<p>
<div class="legend">Looking to the Future!</div>
<fieldset> 
 <div class="row">
<label class="form-drop" for="dropdown">
What do you want to see in future Koni Kodes Projects? </label>
<select id="dropdown" name="interest">
<option value="Please" >Please Select One Project</option>
<option value="More Fun Games">More Fun Games</option>
<option value="Educational Apps">Educational Apps</option>
<option value="Fund Raising Projects">Fund Raising Projects</option>
<option value="Tutorial Guides">Tutorial Guides</option>
<option value="Partnership Opportunities">Partnership Opportunities</option>
<option value="All of the Above">All of the Above</option>
<option value="Not Sure">Not Sure</option>
<option value="Other">Other</option>
 </select>
 <div id="futures">
 <input type="text" id="other-future" placeholder="What else?" /></div>
 </div>
 </fieldset>
 </p>
<label class="form-label" for="comment">Tell us more ... &nbsp;</label>
<textarea id="comment" class="form-control place" rows="5" name="user-comment" placeholder="What else would you like to share? "></textarea>
</fieldset>

<div class="pull-center">
<button type="input" id="submit" class="btn btn-info" data-toggle="modal" data-target="#koniModal"><i class="glyphicon glyphicon-send"></i> Submit </button>
</div>

</form>
</div>
<div class="modal fade modal-lg" id="koniModal" tabindex="-1" role="dialog" aria-labelledby="koniModalLabel">

  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 id="thanks" class="modal-title"></h4>
      </div>
      <div class="modal-body">
        <p id="ratings"></p>
		
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default close" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->

 </div>
              
            
!

CSS

              
                body {
	display: grid;
	width:100%;
	height:100%;
	font-family: Georgia, serif;
    color: #7d500b;
    background-color:#fff;
}

#inner-container{
   display:inline-block;
   margin:0 auto;
   width:80%;

}
#title h1{
	color:#004f69;
    margin: 0 auto;
}
#description{
    color:#004f69;
	font-size:1.1em;
}
.legend {
	color:#7d500b;
	font-size:1.2em;
	font-weight:bold;
	padding: 15px 0 0 0;
}
#thanks .modal-title {
    color:#004f69;
	font-size: 1.2em;
	background-color:#7d500b;
}
#survey-form {
   width:100%;
   max-width: 750px;
   margin: 5px auto;
   border: 2px solid #7ff6e1;
   border-radius: 20px;
   padding: 20px;   
   background-color:#faede2;
}

#description{
    color:#004f69;
	font-size:1.3em;
    margin: 0 auto;
}
#info {
    width: 70%;
	margin: 0 auto;
}
#name-label, #email-label, #number-label, #why-label {
    float: left;
	text-align: right;
    color: #004f69;
    font-size: 1.1em;
    line-height: 1.5em;
    padding: 0 10px;
	width: 220px;
}
#name, #email, #number, #why{
    padding-left: 10px;
	width: 18em;
    height: 1.5em;
    color: #7d500b; 
}
#nummsg {
   display:none; 
}
.form-label {
    float: left;
    color: #004f69;
    font-size: 1em;
    line-height: 1.2em;
	padding-top: 15px;
}
.form-drop {
	float:left;
	width: 60%;
    color: #004f69;
    font-size: 1em;
    line-height: 1.2em;
	padding-top: 10px;
}
#dropdown {
    float: right;
	width: 35%;
	padding-right: 5%;
}
#futures {
    display:none;
	width: 50%;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #7d500b;
	line-height: 1.5em;
    opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #7d500b;
	line-height: 1.5em;
}
::-ms-input-placeholder { /* Microsoft Edge */
    color: #7d500b;
	line-height: 1.5em;	
}
#radio-buttons{
   font-size: 1em;
   color: #7d500b;
   line-height: 1.3em;
}
#check-box{
   font-size: 1em;
   color: #7d500b;
   line-height: 1.3em;
   padding: 1em;
}
.form-control {
    width: 18em;
    line-height: 1.5em !important;
    color: #7d500b;   
}

textarea .place {
    width: auto;
    height: 1.5em;
    color: #7d500b;   
}
.require {
	color: #e94d1c;
}
#submit {
      cursor: pointer;
}
#koniModal{
    height: auto;
	font-size: 1.2em;
}
.modal-body {
    margin-bottom: 0.1%;
	background-color:#c6f6ed;
}
.modal-header, .modal-footer {
   background-color:#faede2;
}
@media screen and (max-width: 960px){

#inner-container {
   margin:0 auto;
   width:100%;
   padding: 2px;

}
.legend {
	color:#7d500b;
	font-size:1.2em;
	font-weight:bold;
	padding: 0;
}
#name-label, #email-label, #number-label, #why-label {
    float: none;
	text-align: left !important;
	width: 100%;
}

#name, #email, #number, #why{
    padding: 0;
	width: 100%;
    height: 1.2em;
}
.form-label {
    float: left;
    color: #004f69;
    font-size: 1em;
    line-height: 1.2em;
	padding:0;
}
.form-drop {
	width:90%;
    margin: 2px 0;
	padding: 5px 0;
}
}

              
            
!

JS

              
                $(document).ready(function () {
     "use strict";
	

    let email = $("#email").val();

	 $("#dropdown").on("change", function(){
        if( $(this).val()==="other"){
	$("#futures").show();
	let future = $("#other-future").val();
	}
	
 
	  
	$("#submit").on('click', function(){

	let like = [];
    $(".like:checked").each(function() {
    like.push(this.value);
    });

	let improved = [];
    $(".improve:checked").each(function() {
    improved.push(this.value);
	console.log(improved)
    });

	$("#other-future").hide();
    let future = $('#dropdown').find(":selected").attr('value');
    let name = $("#name").val();
	let rating = $("#number").val();

				
	$("#koniModal").show();

	$("#thanks").append("Thank you, " + name);
	$("#koniModal").find(".modal-body").append("<p>" + "Koni Kodes will be informed that you have given a rating of " + rating + "</p>");
	
    let reason = document.getElementById("why");	
    if (! reason === " "){
	$("#koniModal").find(".modal-body").append("<p>" + "The reason for this rating was " + reason + "</p>");
	}
	let recommend = $('input[name="recommend"]:checked').val();
    $("#koniModal").find(".modal-body").append("<p>" + "Koni Kodes will be informed that you will " + recommend + " recommend Koni Kodes to friends" + "</p>");
	
	if (! like === ""){
    $("#koniModal").find(".modal-body").append("<p>" + "What you like about Koni Kodes is " + like + "</p>");
	}
	if (! improve === ""){
    $("#koniModal").find(".modal-body").append("<p>" + "Koni Kodes can improve on " + improved + "</p>");
	}
	
	if (! future === "Please"){

    $("#koniModal").find(".modal-body").append("<p>" + "In the future you would like Koni Kodes to provide  " + future + "</p>");
    }
	
    let talk = $("#comment").val();	
	console.log("Talking " + talk);
	if (talk === ""){
	$("#koniModal").find(".modal-body").append("<p>" + "You did not offer additional comments." +  "</p>");
	} else{
	$("#koniModal").find(".modal-body").append("<p>" + "You made the additional comment: " + talk + "</p>");
	}
 
});  
	 	$(".close").on('click', function(){
		$("#koni-modal").hide();
		$("#survey-form")[0].reset();
		});
		

});	 
}); 
              
            
!
999px

Console