Develop Reference

How to make form display marquee after submitting?

I'm trying to create a section in which the information submitted by user thru a form is displayed as a marquee!
I don't know what exactly should I use to make that happen?
Here are the code for the form:
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: grey;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.marquee-section {
max-width:100%;
max-height: 100%;
height: 300px;
position:relative;
background-color: #ef6;
padding: 10px 20px;
}
.marquee-heading {
font-size: 28px;
font-weight: 600;
text-align: center;
}
.marquee-info {
max-width:600px;
width:100%;
margin:0 auto;
padding: 0 10px;
float: left;
position: relative;
}
.contact-section {
max-width:100%;
max-height: 100%;
height: 580px;
position:relative;
background-color: #fff;
padding: 10px 20px;
}
.contact-heading {
font-size: 28px;
font-weight: 600;
text-align: center;
}
.contactForm {
max-width:600px;
width:100%;
margin:0 auto;
padding: 0 10px;
float: left;
position: relative;
}
#contact input[type="text"], #contact input[type="email"], #contact textarea, #contact button[type="submit"] { font:400 50px/16px "Raleway", Helvetica, Arial, sans-serif; }
#contact {
padding:10px;
margin:5px 0;
}
#contact h3 {
color: #F96;
display: block;
font-size: 50px;
font-weight: 400;
}
#contact h4 {
margin:5px 0 15px;
display:block;
font-size:13px;
}
fieldset label {
font-size: 16px;
font-weight: 500;
}
fieldset {
border: medium none !important;
margin: 0 0 10px !important;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"], #contact input[type="email"], #contact textarea {
width:100%;
max-width:700px;
border-style: solid;
border-color: #afafaf;
border-width: 1px;
border-radius: 5px;
margin-bottom: 5px;
background-color: rgba(255, 255, 255, 0.7);
padding: 10px;
height: 45px;
font-size: 0.8em;
line-height: 1.2em;
color: #111;
position: relative;
}
#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact textarea:hover {
-webkit-transition:border-color 0.3s ease-in-out;
-moz-transition:border-color 0.3s ease-in-out;
transition:border-color 0.3s ease-in-out;
border:1px solid #4872bc;
}
#contact textarea {
height:180px;
max-width:100%;
resize:none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
#contact button[type="submit"] {
cursor:pointer;
margin:0 0 5px;
padding: 10px;
height: 45px;
width: 100%;
max-width: 150px;
color: #282626;
font-size: 16px;
font-weight: 600;
border-style: solid;
border-color: #878787;
border-width: 1px;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0);
}
#contact button[type="submit"]:hover {
background-color: rgba(255, 255, 255, 0.3);
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }
#contact input:focus, #contact textarea:focus {
outline:0;
border:1px solid #999;
}
::-webkit-input-placeholder {
color:#878787;
}
:-moz-placeholder {
color:#878787;
}
::-moz-placeholder {
color:#878787;
}
:-ms-input-placeholder {
color:#878787;
}
<div class="marquee-section">
<h1 class="marquee-heading">Opinions:</h1>
<div class="marquee-info">
<marquee><span>Climate chnage is real by Wallace C.</span></marquee>
</div>
</div>
<div class="contact-section">
<h1 class="contact-heading">Type the info here!</h1>
<div class="contactForm">
<form id="contact">
<fieldset>
<label for="name">Name</label>
<input name="name" type="text">
</fieldset>
<fieldset>
<label for="name">Email</label>
<input name="email" type="text">
</fieldset>
<fieldset>
<label for="name">Opinion</label>
<textarea name="message" rows="4" cols="50"></textarea>
</fieldset>
<fieldset>
<center><button name="submit" type="submit">Submit</button></center>
</fieldset>
</form>
</div>
</div>
I want the form information after submission to be displayed in the "marquee-info" of the "marquee-section"

You need a fresh approach. <marquee> and <center> are deprecated, you shouldn't even be using a form since you aren't submitting data anywhere and you've got tons and tons of unnecessary CSS. You are also not using the label element correctly - - the for attribute value must match the id of the element that the label is "for", not the name attribute value.
You just need a textbox and a regular button with a click event handler. Then, you'll use JavaScript to modify the left CSS property on a timer. See comments inline:
// Get references to all the DOM elements you'll work with
let output = document.querySelector(".output");
let email = document.getElementById("email");
let message = document.getElementById("message");
let timer = null; // Will reference timer
// Set up button click event handler
document.querySelector("button").addEventListener("click", move);
function move(){
clearTimeout(timer); // Prevent multiple timers
// Get current left position of output
let currentLeft = parseInt(getComputedStyle(output).left, 10);
// If output is off the screen, move it to the right.
// If not, move it 3px to the left
let outputWidth = parseInt(getComputedStyle(output).width, 10);
if(currentLeft < (0 - outputWidth)){
currentLeft = window.innerWidth;
} else {
currentLeft -= 3;
}
// Update and Move the output
output.textContent = message.value;
output.style.left = currentLeft + "px";
// Create a timer to recursively call this function
timer = setTimeout(move, 25);
}
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*, *:after, *:before {
box-sizing: border-box;
}
.marquee-section {
max-width:100%;
max-height: 100%;
height: 300px;
background-color: #ef6;
padding: 10px 20px;
}
.marquee-heading {
font-size: 28px;
font-weight: 600;
text-align: center;
}
.marquee-info {
width:100%;
max-width:600px;
margin:0 auto;
padding: 0 10px;
}
.output { position:absolute; }
.contact-section {
max-width:100%;
max-height: 100%;
height: 580px;
padding: 10px 20px;
}
.contact-heading {
font-size: 28px;
font-weight: 600;
text-align: center;
}
.contactForm {
max-width:600px;
width:100%;
padding:10px;
margin:5px 0;
}
.contactForm input[type="text"], #contact input[type="email"], .contactForm textarea, #contact button[type="submit"] { font:400 50px/16px "Raleway", Helvetica, Arial, sans-serif; }
label {
font-size: 16px;
font-weight: 500;
}
.contactForm input, .contactForm input[type="email"], .contactForm textarea {
width:100%;
max-width:700px;
border-style: solid;
border-color: #afafaf;
border-width: 1px;
border-radius: 5px;
margin-bottom: 5px;
background-color: rgba(255, 255, 255, 0.7);
padding: 10px;
height: 45px;
font-size: 0.8em;
line-height: 1.2em;
color: #111;
}
.contactForm input:hover, #contact input[type="email"]:hover, .contactForm textarea:hover {
transition:border-color 0.3s ease-in-out;
border:1px solid #4872bc;
}
.contactForm textarea {
height:180px;
max-width:100%;
resize:none;
width: 100%;
}
.contactForm button {
cursor:pointer;
margin:0 0 5px;
padding: 10px;
height: 45px;
width: 100%;
max-width: 150px;
color: #282626;
font-size: 16px;
font-weight: 600;
border-width: 1px solid #878787;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0);
}
.contactForm button:hover {
background-color: rgba(255, 255, 255, 0.3);
transition:background-color 0.3s ease-in-out;
}
.contactForm button:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }
.contactForm input:focus, .contactForm textarea:focus {
outline:0;
border:1px solid #999;
}
::-webkit-input-placeholder { color:#878787; }
:-moz-placeholder { color:#878787; }
::-moz-placeholder { color:#878787; }
:-ms-input-placeholder { color:#878787; }
<div class="marquee-section">
<h1 class="marquee-heading">Opinions:</h1>
<div class="marquee-info">
<span class="output">Climate change is real by Wallace C.</span>
</div>
</div>
<div class="contact-section">
<h1 class="contact-heading">Type the info here!</h1>
<div class="contactForm">
<div class="row">
<label for="name">Name</label>
<input id="userName">
</div>
<div class="row">
<label for="email">Email</label>
<input id="email" type="email">
</div>
<div class="row">
<label for="message">Opinion</label>
<textarea id="message"></textarea>
</div>
<div class="row">
<button type="button">Submit</button>
</div>
</div>
</div>

Hide function in wizard form

I'm trying to do something with wizard form,in step 1 user can choose a radio button to hide or show content on step 2.
But I can't do it,the content on step 2 will not effect by what I choose in step1.
In order to more easy understand my question,I have do what I want in step3.conclusion what I want:user choose hide radio button in step 1, the content on step 2 will hide.
"use strict";
function scroll_to_class(element_class, removed_height) {
var scroll_to = $(element_class).offset().top - removed_height;
if($(window).scrollTop() != scroll_to) {
$('.form-wizard').stop().animate({scrollTop: scroll_to}, 0);
}
}
function bar_progress(progress_line_object, direction) {
var number_of_steps = progress_line_object.data('number-of-steps');
var now_value = progress_line_object.data('now-value');
var new_value = 0;
if(direction == 'right') {
new_value = now_value + ( 100 / number_of_steps );
}
else if(direction == 'left') {
new_value = now_value - ( 100 / number_of_steps );
}
progress_line_object.attr('style', 'width: ' + new_value + '%;').data('now-value', new_value);
}
jQuery(document).ready(function() {
/*
Form
*/
$('.form-wizard fieldset:first').fadeIn('slow');
$('.form-wizard .required').on('focus', function() {
$(this).removeClass('input-error');
});
// next step
$('.form-wizard .btn-next').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
// navigation steps / progress steps
var current_active_step = $(this).parents('.form-wizard').find('.form-wizard-step.active');
var progress_line = $(this).parents('.form-wizard').find('.form-wizard-progress-line');
// fields validation
parent_fieldset.find('.required').each(function() {
if( $(this).val() == "" ) {
$(this).addClass('input-error');
next_step = false;
}
else {
$(this).removeClass('input-error');
}
});
// fields validation
if( next_step ) {
parent_fieldset.fadeOut(400, function() {
// change icons
current_active_step.removeClass('active').addClass('activated').next().addClass('active');
// progress bar
bar_progress(progress_line, 'right');
// show next step
$(this).next().fadeIn();
// scroll window to beginning of the form
scroll_to_class( $('.form-wizard'), 20 );
});
}
});
// previous step
$('.form-wizard .btn-previous').on('click', function() {
// navigation steps / progress steps
var current_active_step = $(this).parents('.form-wizard').find('.form-wizard-step.active');
var progress_line = $(this).parents('.form-wizard').find('.form-wizard-progress-line');
$(this).parents('fieldset').fadeOut(400, function() {
// change icons
current_active_step.removeClass('active').prev().removeClass('activated').addClass('active');
// progress bar
bar_progress(progress_line, 'left');
// show previous step
$(this).prev().fadeIn();
// scroll window to beginning of the form
scroll_to_class( $('.form-wizard'), 20 );
});
});
// submit
$('.form-wizard').on('submit', function(e) {
// fields validation
$(this).find('.required').each(function() {
if( $(this).val() == "" ) {
e.preventDefault();
$(this).addClass('input-error');
}
else {
$(this).removeClass('input-error');
}
});
// fields validation
});
});
// image uploader scripts
var $dropzone = $('.image_picker'),
$droptarget = $('.drop_target'),
$dropinput = $('#inputFile'),
$dropimg = $('.image_preview'),
$remover = $('[data-action="remove_current_image"]');
$dropzone.on('dragover', function() {
$droptarget.addClass('dropping');
return false;
});
$dropzone.on('dragend dragleave', function() {
$droptarget.removeClass('dropping');
return false;
});
$dropzone.on('drop', function(e) {
$droptarget.removeClass('dropping');
$droptarget.addClass('dropped');
$remover.removeClass('disabled');
e.preventDefault();
var file = e.originalEvent.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function(event) {
$dropimg.css('background-image', 'url(' + event.target.result + ')');
};
console.log(file);
reader.readAsDataURL(file);
return false;
});
$dropinput.change(function(e) {
$droptarget.addClass('dropped');
$remover.removeClass('disabled');
$('.image_title input').val('');
var file = $dropinput.get(0).files[0],
reader = new FileReader();
reader.onload = function(event) {
$dropimg.css('background-image', 'url(' + event.target.result + ')');
}
reader.readAsDataURL(file);
});
$remover.on('click', function() {
$dropimg.css('background-image', '');
$droptarget.removeClass('dropped');
$remover.addClass('disabled');
$('.image_title input').val('');
});
$('.image_title input').blur(function() {
if ($(this).val() != '') {
$droptarget.removeClass('dropped');
}
});
// image uploader scripts
.form-box {
padding-top: 40px;
padding-bottom: 40px;
background: rgb(234,88,4); /* Old browsers */
background: -moz-linear-gradient(top, rgba(234,88,4,1) 0%, rgba(234,40,3,1) 51%, rgba(234,88,4,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(234,88,4,1) 0%,rgba(234,40,3,1) 51%,rgba(234,88,4,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(234,88,4,1) 0%,rgba(234,40,3,1) 51%,rgba(234,88,4,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5804', endColorstr='#ea5804',GradientType=0 ); /* IE6-9 */
}
.form-wizard {
padding: 25px;
background: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
box-shadow: 0px 0px 6px 3px #777;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
color: #888;
line-height: 30px;
text-align: center;
}
.form-wizard strong { font-weight: 500; }
.form-wizard a, .form-wizard a:hover, .form-wizard a:focus {
color: #ea2803;
text-decoration: none;
-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
.form-wizard h1, .form-wizard h2 {
margin-top: 10px;
font-size: 38px;
font-weight: 100;
color: #555;
line-height: 50px;
}
.form-wizard h3 {
font-size: 25px;
font-weight: 300;
color: #ea2803;
line-height: 30px;
margin-top: 0;
margin-bottom: 5px;
text-transform: uppercase;
}
.form-wizard h4 {
float:left;
font-size: 20px;
font-weight: 300;
color: #ea2803;
line-height: 26px;
width:100%;
}
.form-wizard h4 span{
float:right;
font-size: 18px;
font-weight: 300;
color: #555;
line-height: 26px;
}
.form-wizard table tr th{font-weight:normal;}
.form-wizard img { max-width: 100%; }
.form-wizard ::-moz-selection { background: #ea2803; color: #fff; text-shadow: none; }
.form-wizard ::selection { background: #ea2803; color: #fff; text-shadow: none; }
.form-control {
height: 44px;
width:100%;
margin: 0;
padding: 0 20px;
vertical-align: middle;
background: #fff;
border: 1px solid #ddd;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 44px;
color: #888;
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
.checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"], .radio input[type="radio"], .radio-inline input[type="radio"] {
position: absolute;
margin-top: 9px;
margin-left: -20px;
}
.form-control option:hover, .form-control option:checked {
box-shadow: 0 0 10px 100px #ea2803 inset;
}
.form-control:focus {
outline: 0;
background: #fff;
border: 1px solid #ccc;
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}
.form-control:-moz-placeholder { color: #888; }
.form-control:-ms-input-placeholder { color: #888; }
.form-control::-webkit-input-placeholder { color: #888; }
.form-wizard label { font-weight: 300; }
.form-wizard label span { color:#ea2803; }
.form-wizard .btn {
min-width: 105px;
height: 40px;
margin: 0;
padding: 0 20px;
vertical-align: middle;
border: 0;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 40px;
color: #fff;
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
text-shadow: none;
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
.form-wizard .btn:hover {
background:#f34727;
color: #fff;
}
.form-wizard .btn:active {
outline: 0;
background:#f34727;
color: #fff;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.form-wizard .btn:focus,
.form-wizard .btn:active:focus,
.form-wizard .btn.active:focus {
outline: 0;
background:#f34727;
color: #fff;
}
.form-wizard .btn.btn-next,
.form-wizard .btn.btn-next:focus,
.form-wizard .btn.btn-next:active:focus,
.form-wizard .btn.btn-next.active:focus {
background: #ea2803;
}
.form-wizard .btn.btn-submit,
.form-wizard .btn.btn-submit:focus,
.form-wizard .btn.btn-submit:active:focus,
.form-wizard .btn.btn-submit.active:focus {
background: #ea2803;
}
.form-wizard .btn.btn-previous,
.form-wizard .btn.btn-previous:focus,
.form-wizard .btn.btn-previous:active:focus,
.form-wizard .btn.btn-previous.active:focus {
background: #bbb;
}
.form-wizard .success h3{
color: #4F8A10;
text-align: center;
margin: 20px auto !important;
}
.form-wizard .success .success-icon {
color: #4F8A10;
font-size: 100px;
border: 5px solid #4F8A10;
border-radius: 100px;
text-align: center !important;
width: 110px;
margin: 25px auto;
}
.form-wizard .progress-bar {
background-color: #ea2803;
}
.form-wizard-steps{
margin:auto;
overflow: hidden;
position: relative;
margin-top: 20px;
}
.form-wizard-step{
padding-top:10px !important;
border:2px solid #fff;
background:#ccc;
-ms-transform: skewX(-30deg); /* IE 9 */
-webkit-transform: skewX(-30deg); /* Safari */
transform: skewX(-30deg); /* Standard syntax */
}
.form-wizard-step.active{
background:#ea2803;
}
.form-wizard-step.activated{
background:#ea2803;
}
.form-wizard-progress {
position: absolute;
top: 36px;
left: 0;
width: 100%;
height: 0px;
background: #ea2803;
}
.form-wizard-progress-line {
position: absolute;
top: 0;
left: 0;
height: 0px;
background: #ea2803;
}
.form-wizard-tolal-steps-3 .form-wizard-step {
position: relative;
float: left;
width: 33.33%;
padding: 0 5px;
}
.form-wizard-tolal-steps-4 .form-wizard-step {
position: relative;
float: left;
width: 25%;
padding: 0 5px;
}
.form-wizard-tolal-steps-5 .form-wizard-step {
position: relative;
float: left;
width: 20%;
padding: 0 5px;
}
.form-wizard-step-icon {
display: inline-block;
width: 40px;
height: 40px;
margin-top: 4px;
background: #ddd;
font-size: 16px;
color: #777;
line-height: 40px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-ms-transform: skewX(30deg); /* IE 9 */
-webkit-transform: skewX(30deg); /* Safari */
transform: skewX(30deg); /* Standard syntax */
}
.form-wizard-step.activated .form-wizard-step-icon {
background: #ea2803;
border: 1px solid #fff;
color: #fff;
line-height: 38px;
}
.form-wizard-step.active .form-wizard-step-icon {
background: #fff;
border: 1px solid #fff;
color: #ea2803;
line-height: 38px;
}
.form-wizard-step p {
color: #fff;
-ms-transform: skewX(30deg); /* IE 9 */
-webkit-transform: skewX(30deg); /* Safari */
transform: skewX(30deg); /* Standard syntax */
}
.form-wizard-step.activated p { color: #fff; }
.form-wizard-step.active p { color: #fff; }
.form-wizard fieldset {
display: none;
text-align: left;
border:0px !important
}
.form-wizard-buttons { text-align: right; }
.form-wizard .input-error { border-color: #ea2803;}
/** image uploader **/
.image-upload a[data-action] {
cursor: pointer;
color: #555;
font-size: 18px;
line-height: 24px;
transition: color 0.2s;
}
.image-upload a[data-action] i {
width: 1.25em;
text-align: center;
}
.image-upload a[data-action]:hover {
color: #ea2803;
}
.image-upload a[data-action].disabled {
opacity: 0.35;
cursor: default;
}
.image-upload a[data-action].disabled:hover {
color: #555;
}
.settings_wrap{
margin-top:20px;
}
.image_picker .settings_wrap {
overflow: hidden;
position: relative;
}
.image_picker .settings_wrap .drop_target,
.image_picker .settings_wrap .settings_actions {
float: left;
}
.image_picker .settings_wrap .drop_target {
margin-right: 18px;
}
.image_picker .settings_wrap .settings_actions {
float: left;
margin-top: 100px;
margin-left: 20px;
}
.settings_actions.vertical a {
display: block;
}
.drop_target {
position: relative;
cursor: pointer;
transition: all 0.2s;
width: 250px;
height: 250px;
background: #f2f2f2;
border-radius: 100%;
margin: 0 auto 25px auto;
overflow: hidden;
border: 8px solid #E0E0E0;
}
.drop_target input[type="file"] {
visibility: hidden;
}
.drop_target::before {
content: 'Drop Hear';
font-family: FontAwesome;
position: absolute;
display: block;
width: 100%;
line-height: 220px;
text-align: center;
font-size: 40px;
color: rgba(0, 0, 0, 0.3);
transition: color 0.2s;
}
.drop_target:hover,
.drop_target.dropping {
background: #f80;
border-top-color: #cc6d00;
}
.drop_target:hover:before,
.drop_target.dropping:before {
color: rgba(0, 0, 0, 0.6);
}
.drop_target .image_preview {
width: 100%;
height: 100%;
background: no-repeat center;
background-size: contain;
position: relative;
z-index: 2;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" >
<head>
</head>
<body>
<style>
#cuss:not(:checked) ~ #con {
display: none;
}
#buss:not(:checked) ~ #bon {
display: none;
}
</style>
<section class="form-box" >
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 form-wizard">
<!-- Form Wizard -->
<form role="form" action="" method="post">
<!-- Form progress -->
<div class="form-wizard-steps form-wizard-tolal-steps-3">
<div class="form-wizard-progress">
<div class="form-wizard-progress-line" data-now-value="12.25" data-number-of-steps="4" style="width: 12.25%;"></div>
</div>
<!-- Step 1 -->
<div class="form-wizard-step active">
<div class="form-wizard-step-icon"><i class="fa fa-user" aria-hidden="true"></i></div>
<p>Step 1</p>
</div>
<!-- Step 1 -->
<!-- Step 2 -->
<div class="form-wizard-step">
<div class="form-wizard-step-icon"><i class="fa fa-briefcase" aria-hidden="true"></i></div>
<p>Step 2</p>
</div>
<!-- Step 2 -->
<!-- Step 3 -->
<div class="form-wizard-step">
<div class="form-wizard-step-icon"><i class="fa fa-location-arrow" aria-hidden="true"></i></div>
<p>Step 3</p>
</div>
<!-- Step 3 -->
</div>
<!-- Form progress -->
<!-- Form Step 1 -->
<fieldset>
<label >Click to hide or show content on step2</label>
<input style="margin-left:20px;" type="radio" id="cuss" name="sh" value="con" />
<label style="padding-right:10px;">Show</label>
<input type="radio" id="hid" name="sh" value="hid" />
<label>Hide</label>
<div class="form-wizard-buttons">
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<!-- Form Step 1 -->
<!-- Form Step 2 -->
<fieldset>
<div id="con" class="form-group">
<p>Content to show or hide depend on the checkbox</p>
</div>
<div class="form-wizard-buttons">
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<!-- Form Step 2 -->
<!-- Form Step 3 -->
<fieldset>
<label >Click to hide or show</label>
<input style="margin-left:20px;" type="radio" id="buss" name="sh" value="con" />
<label style="padding-right:10px;">Show</label>
<input type="radio" id="hid" name="sh" value="hid" />
<label>Hide</label>
<div id="bon" class="form-group">
<p>Content to show or hide depend on the checkbox</p>
</div>
<div class="form-wizard-buttons">
<button type="button" class="btn btn-previous">Previous</button>
<button type="submit" class="btn btn-submit">Submit</button>
</div>
</fieldset>
<!-- Form Step 3->
</form>
<!-- Form Wizard -->
</div>
</div>
</div>
</section>
</body>
</html>

You can simply add an event when clicking the show or hide option.
I added a new section to your JavaScript ("Content Toggle"), and added 2 classes for the elements which you can click.
Now when clicking one of each radio buttons, content on step 2 will be either shown or hidden.
If you want to toggle step2 with clicking radio buttons on step3, you can simply add the classes ("js-show-con" and "js-hide-con") to the input fields there.
"use strict";
function scroll_to_class(element_class, removed_height) {
var scroll_to = $(element_class).offset().top - removed_height;
if($(window).scrollTop() != scroll_to) {
$('.form-wizard').stop().animate({scrollTop: scroll_to}, 0);
}
}
function bar_progress(progress_line_object, direction) {
var number_of_steps = progress_line_object.data('number-of-steps');
var now_value = progress_line_object.data('now-value');
var new_value = 0;
if(direction == 'right') {
new_value = now_value + ( 100 / number_of_steps );
}
else if(direction == 'left') {
new_value = now_value - ( 100 / number_of_steps );
}
progress_line_object.attr('style', 'width: ' + new_value + '%;').data('now-value', new_value);
}
jQuery(document).ready(function() {
/**
* Content Toggle
*/
var conElement = $('#con');
var showElement = $('.js-show-con');
var hideElement = $('.js-hide-con');
showElement.click(
function() {
conElement.show()
}
);
hideElement.click(
function() {
conElement.hide()
}
);
/*
Form
*/
$('.form-wizard fieldset:first').fadeIn('slow');
$('.form-wizard .required').on('focus', function() {
$(this).removeClass('input-error');
});
// next step
$('.form-wizard .btn-next').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
// navigation steps / progress steps
var current_active_step = $(this).parents('.form-wizard').find('.form-wizard-step.active');
var progress_line = $(this).parents('.form-wizard').find('.form-wizard-progress-line');
// fields validation
parent_fieldset.find('.required').each(function() {
if( $(this).val() == "" ) {
$(this).addClass('input-error');
next_step = false;
}
else {
$(this).removeClass('input-error');
}
});
// fields validation
if( next_step ) {
parent_fieldset.fadeOut(400, function() {
// change icons
current_active_step.removeClass('active').addClass('activated').next().addClass('active');
// progress bar
bar_progress(progress_line, 'right');
// show next step
$(this).next().fadeIn();
// scroll window to beginning of the form
scroll_to_class( $('.form-wizard'), 20 );
});
}
});
// previous step
$('.form-wizard .btn-previous').on('click', function() {
// navigation steps / progress steps
var current_active_step = $(this).parents('.form-wizard').find('.form-wizard-step.active');
var progress_line = $(this).parents('.form-wizard').find('.form-wizard-progress-line');
$(this).parents('fieldset').fadeOut(400, function() {
// change icons
current_active_step.removeClass('active').prev().removeClass('activated').addClass('active');
// progress bar
bar_progress(progress_line, 'left');
// show previous step
$(this).prev().fadeIn();
// scroll window to beginning of the form
scroll_to_class( $('.form-wizard'), 20 );
});
});
// submit
$('.form-wizard').on('submit', function(e) {
// fields validation
$(this).find('.required').each(function() {
if( $(this).val() == "" ) {
e.preventDefault();
$(this).addClass('input-error');
}
else {
$(this).removeClass('input-error');
}
});
// fields validation
});
});
// image uploader scripts
var $dropzone = $('.image_picker'),
$droptarget = $('.drop_target'),
$dropinput = $('#inputFile'),
$dropimg = $('.image_preview'),
$remover = $('[data-action="remove_current_image"]');
$dropzone.on('dragover', function() {
$droptarget.addClass('dropping');
return false;
});
$dropzone.on('dragend dragleave', function() {
$droptarget.removeClass('dropping');
return false;
});
$dropzone.on('drop', function(e) {
$droptarget.removeClass('dropping');
$droptarget.addClass('dropped');
$remover.removeClass('disabled');
e.preventDefault();
var file = e.originalEvent.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function(event) {
$dropimg.css('background-image', 'url(' + event.target.result + ')');
};
console.log(file);
reader.readAsDataURL(file);
return false;
});
$dropinput.change(function(e) {
$droptarget.addClass('dropped');
$remover.removeClass('disabled');
$('.image_title input').val('');
var file = $dropinput.get(0).files[0],
reader = new FileReader();
reader.onload = function(event) {
$dropimg.css('background-image', 'url(' + event.target.result + ')');
}
reader.readAsDataURL(file);
});
$remover.on('click', function() {
$dropimg.css('background-image', '');
$droptarget.removeClass('dropped');
$remover.addClass('disabled');
$('.image_title input').val('');
});
$('.image_title input').blur(function() {
if ($(this).val() != '') {
$droptarget.removeClass('dropped');
}
});
// image uploader scripts
.form-box {
padding-top: 40px;
padding-bottom: 40px;
background: rgb(234,88,4); /* Old browsers */
background: -moz-linear-gradient(top, rgba(234,88,4,1) 0%, rgba(234,40,3,1) 51%, rgba(234,88,4,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(234,88,4,1) 0%,rgba(234,40,3,1) 51%,rgba(234,88,4,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(234,88,4,1) 0%,rgba(234,40,3,1) 51%,rgba(234,88,4,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5804', endColorstr='#ea5804',GradientType=0 ); /* IE6-9 */
}
.form-wizard {
padding: 25px;
background: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
box-shadow: 0px 0px 6px 3px #777;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
color: #888;
line-height: 30px;
text-align: center;
}
.form-wizard strong { font-weight: 500; }
.form-wizard a, .form-wizard a:hover, .form-wizard a:focus {
color: #ea2803;
text-decoration: none;
-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
.form-wizard h1, .form-wizard h2 {
margin-top: 10px;
font-size: 38px;
font-weight: 100;
color: #555;
line-height: 50px;
}
.form-wizard h3 {
font-size: 25px;
font-weight: 300;
color: #ea2803;
line-height: 30px;
margin-top: 0;
margin-bottom: 5px;
text-transform: uppercase;
}
.form-wizard h4 {
float:left;
font-size: 20px;
font-weight: 300;
color: #ea2803;
line-height: 26px;
width:100%;
}
.form-wizard h4 span{
float:right;
font-size: 18px;
font-weight: 300;
color: #555;
line-height: 26px;
}
.form-wizard table tr th{font-weight:normal;}
.form-wizard img { max-width: 100%; }
.form-wizard ::-moz-selection { background: #ea2803; color: #fff; text-shadow: none; }
.form-wizard ::selection { background: #ea2803; color: #fff; text-shadow: none; }
.form-control {
height: 44px;
width:100%;
margin: 0;
padding: 0 20px;
vertical-align: middle;
background: #fff;
border: 1px solid #ddd;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 44px;
color: #888;
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
.checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"], .radio input[type="radio"], .radio-inline input[type="radio"] {
position: absolute;
margin-top: 9px;
margin-left: -20px;
}
.form-control option:hover, .form-control option:checked {
box-shadow: 0 0 10px 100px #ea2803 inset;
}
.form-control:focus {
outline: 0;
background: #fff;
border: 1px solid #ccc;
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}
.form-control:-moz-placeholder { color: #888; }
.form-control:-ms-input-placeholder { color: #888; }
.form-control::-webkit-input-placeholder { color: #888; }
.form-wizard label { font-weight: 300; }
.form-wizard label span { color:#ea2803; }
.form-wizard .btn {
min-width: 105px;
height: 40px;
margin: 0;
padding: 0 20px;
vertical-align: middle;
border: 0;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 40px;
color: #fff;
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
text-shadow: none;
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
.form-wizard .btn:hover {
background:#f34727;
color: #fff;
}
.form-wizard .btn:active {
outline: 0;
background:#f34727;
color: #fff;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.form-wizard .btn:focus,
.form-wizard .btn:active:focus,
.form-wizard .btn.active:focus {
outline: 0;
background:#f34727;
color: #fff;
}
.form-wizard .btn.btn-next,
.form-wizard .btn.btn-next:focus,
.form-wizard .btn.btn-next:active:focus,
.form-wizard .btn.btn-next.active:focus {
background: #ea2803;
}
.form-wizard .btn.btn-submit,
.form-wizard .btn.btn-submit:focus,
.form-wizard .btn.btn-submit:active:focus,
.form-wizard .btn.btn-submit.active:focus {
background: #ea2803;
}
.form-wizard .btn.btn-previous,
.form-wizard .btn.btn-previous:focus,
.form-wizard .btn.btn-previous:active:focus,
.form-wizard .btn.btn-previous.active:focus {
background: #bbb;
}
.form-wizard .success h3{
color: #4F8A10;
text-align: center;
margin: 20px auto !important;
}
.form-wizard .success .success-icon {
color: #4F8A10;
font-size: 100px;
border: 5px solid #4F8A10;
border-radius: 100px;
text-align: center !important;
width: 110px;
margin: 25px auto;
}
.form-wizard .progress-bar {
background-color: #ea2803;
}
.form-wizard-steps{
margin:auto;
overflow: hidden;
position: relative;
margin-top: 20px;
}
.form-wizard-step{
padding-top:10px !important;
border:2px solid #fff;
background:#ccc;
-ms-transform: skewX(-30deg); /* IE 9 */
-webkit-transform: skewX(-30deg); /* Safari */
transform: skewX(-30deg); /* Standard syntax */
}
.form-wizard-step.active{
background:#ea2803;
}
.form-wizard-step.activated{
background:#ea2803;
}
.form-wizard-progress {
position: absolute;
top: 36px;
left: 0;
width: 100%;
height: 0px;
background: #ea2803;
}
.form-wizard-progress-line {
position: absolute;
top: 0;
left: 0;
height: 0px;
background: #ea2803;
}
.form-wizard-tolal-steps-3 .form-wizard-step {
position: relative;
float: left;
width: 33.33%;
padding: 0 5px;
}
.form-wizard-tolal-steps-4 .form-wizard-step {
position: relative;
float: left;
width: 25%;
padding: 0 5px;
}
.form-wizard-tolal-steps-5 .form-wizard-step {
position: relative;
float: left;
width: 20%;
padding: 0 5px;
}
.form-wizard-step-icon {
display: inline-block;
width: 40px;
height: 40px;
margin-top: 4px;
background: #ddd;
font-size: 16px;
color: #777;
line-height: 40px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-ms-transform: skewX(30deg); /* IE 9 */
-webkit-transform: skewX(30deg); /* Safari */
transform: skewX(30deg); /* Standard syntax */
}
.form-wizard-step.activated .form-wizard-step-icon {
background: #ea2803;
border: 1px solid #fff;
color: #fff;
line-height: 38px;
}
.form-wizard-step.active .form-wizard-step-icon {
background: #fff;
border: 1px solid #fff;
color: #ea2803;
line-height: 38px;
}
.form-wizard-step p {
color: #fff;
-ms-transform: skewX(30deg); /* IE 9 */
-webkit-transform: skewX(30deg); /* Safari */
transform: skewX(30deg); /* Standard syntax */
}
.form-wizard-step.activated p { color: #fff; }
.form-wizard-step.active p { color: #fff; }
.form-wizard fieldset {
display: none;
text-align: left;
border:0px !important
}
.form-wizard-buttons { text-align: right; }
.form-wizard .input-error { border-color: #ea2803;}
/** image uploader **/
.image-upload a[data-action] {
cursor: pointer;
color: #555;
font-size: 18px;
line-height: 24px;
transition: color 0.2s;
}
.image-upload a[data-action] i {
width: 1.25em;
text-align: center;
}
.image-upload a[data-action]:hover {
color: #ea2803;
}
.image-upload a[data-action].disabled {
opacity: 0.35;
cursor: default;
}
.image-upload a[data-action].disabled:hover {
color: #555;
}
.settings_wrap{
margin-top:20px;
}
.image_picker .settings_wrap {
overflow: hidden;
position: relative;
}
.image_picker .settings_wrap .drop_target,
.image_picker .settings_wrap .settings_actions {
float: left;
}
.image_picker .settings_wrap .drop_target {
margin-right: 18px;
}
.image_picker .settings_wrap .settings_actions {
float: left;
margin-top: 100px;
margin-left: 20px;
}
.settings_actions.vertical a {
display: block;
}
.drop_target {
position: relative;
cursor: pointer;
transition: all 0.2s;
width: 250px;
height: 250px;
background: #f2f2f2;
border-radius: 100%;
margin: 0 auto 25px auto;
overflow: hidden;
border: 8px solid #E0E0E0;
}
.drop_target input[type="file"] {
visibility: hidden;
}
.drop_target::before {
content: 'Drop Hear';
font-family: FontAwesome;
position: absolute;
display: block;
width: 100%;
line-height: 220px;
text-align: center;
font-size: 40px;
color: rgba(0, 0, 0, 0.3);
transition: color 0.2s;
}
.drop_target:hover,
.drop_target.dropping {
background: #f80;
border-top-color: #cc6d00;
}
.drop_target:hover:before,
.drop_target.dropping:before {
color: rgba(0, 0, 0, 0.6);
}
.drop_target .image_preview {
width: 100%;
height: 100%;
background: no-repeat center;
background-size: contain;
position: relative;
z-index: 2;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" >
<head>
</head>
<body>
<style>
#cuss:not(:checked) ~ #con {
display: none;
}
#buss:not(:checked) ~ #bon {
display: none;
}
</style>
<section class="form-box" >
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 form-wizard">
<!-- Form Wizard -->
<form role="form" action="" method="post">
<!-- Form progress -->
<div class="form-wizard-steps form-wizard-tolal-steps-3">
<div class="form-wizard-progress">
<div class="form-wizard-progress-line" data-now-value="12.25" data-number-of-steps="4" style="width: 12.25%;"></div>
</div>
<!-- Step 1 -->
<div class="form-wizard-step active">
<div class="form-wizard-step-icon"><i class="fa fa-user" aria-hidden="true"></i></div>
<p>Step 1</p>
</div>
<!-- Step 1 -->
<!-- Step 2 -->
<div class="form-wizard-step">
<div class="form-wizard-step-icon"><i class="fa fa-briefcase" aria-hidden="true"></i></div>
<p>Step 2</p>
</div>
<!-- Step 2 -->
<!-- Step 3 -->
<div class="form-wizard-step">
<div class="form-wizard-step-icon"><i class="fa fa-location-arrow" aria-hidden="true"></i></div>
<p>Step 3</p>
</div>
<!-- Step 3 -->
</div>
<!-- Form progress -->
<!-- Form Step 1 -->
<fieldset>
<label >Click to hide or show content on step2</label>
<input class="js-show-con" style="margin-left:20px;" type="radio" id="cuss" name="sh" value="con" />
<label style="padding-right:10px;">Show</label>
<input class="js-hide-con" type="radio" id="hid" name="sh" value="hid" />
<label>Hide</label>
<div class="form-wizard-buttons">
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<!-- Form Step 1 -->
<!-- Form Step 2 -->
<fieldset>
<div id="con" class="form-group">
<p>Content to show or hide depend on the checkbox</p>
</div>
<div class="form-wizard-buttons">
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<!-- Form Step 2 -->
<!-- Form Step 3 -->
<fieldset>
<label >Click to hide or show</label>
<input style="margin-left:20px;" type="radio" id="buss" name="sh" value="con" />
<label style="padding-right:10px;">Show</label>
<input type="radio" id="hid" name="sh" value="hid" />
<label>Hide</label>
<div id="bon" class="form-group">
<p>Content to show or hide depend on the checkbox</p>
</div>
<div class="form-wizard-buttons">
<button type="button" class="btn btn-previous">Previous</button>
<button type="submit" class="btn btn-submit">Submit</button>
</div>
</fieldset>
<!-- Form Step 3->
</form>
<!-- Form Wizard -->
</div>
</div>
</div>
</section>
</body>
</html>

CSS animation not happening when chrome auto-completes password

I am making a simple website, and now I'm working on the login page. It looks like this (run in full page, otherwise some parts miss):
html, body {
width: 100%;
height: 100%;
max-width: 100%;
padding: 0;
margin: 0;
}
body {
font-family: "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
background-color: #2196F3;
height:100%;
overflow: hidden;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:valid {
-webkit-box-shadow: 0 0 0 30px #2196F3 inset;
-webkit-text-fill-color: white !important;
}
.msg {
font-size: 15px;
display: inline-block;
text-align: center;
word-wrap: break-word;
width: 90%;
max-width: 300px;
line-height: 28px;
min-height: 28px;
background-color: #ffc107;
border-radius: 2px;
color: white;
margin-bottom: 3em;
}
.spacer {
font-size: 15px;
display: block;
text-align: center;
word-wrap: break-word;
width: 90%;
max-width: 300px;
line-height: 28px;
min-height: 28px;
border-radius: 2px;
color: white;
margin-top: 2em;
margin-bottom: 3em;
}
form {
display: block;
position: absolute;
width: 100%;
height: 80%;
left: 0;
margin-top: -100px;
text-align: center;
animation: swipein 0.5s forwards;
}
#keyframes swipein {
from{top:30%;opacity: .8}
to{top:20%;opacity: 1}
}
input, button {
font-family: "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
outline: 0;
color: white;
}
.group {
display: inline-block;
position:relative;
margin-bottom: 20px;
}
.group:nth-of-type(1){
margin-top: 15%;
}
input {
font-size:21px;
padding:10px 10px 10px 5px;
display:block;
width:250px;
border:none;
border-bottom:1px solid white;
border-radius: 0;
background-color: transparent;
color: white;
}
input:focus { outline:none; }
label {
color: white;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
input:focus ~ label, input:valid ~ label {
top:-20px;
font-size:14px;
color: white ;
}
.bar { position:relative; display:block; width:265px; }
.bar:before, .bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:white;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
input:focus ~ .bar:before, input:focus ~ .bar:after {
width:50%;
}
li {
list-style-type: none;
padding: 10px;
}
a {
color: white;
padding: 10px;
}
button {
-webkit-appearance: none;
padding: 12px 65px 12px 65px;
background-color: white;
color: #2196F3;
border: none;
border-radius: 2px;
font-size: 18px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
button:hover {
cursor: pointer;
}
#media screen and (min-width: 800px){
logo {
top: 15%;
}
.logo span {
font-size: 2em;
}
.logo h2 {
font-size: 2.7em;
}
.group:nth-of-type(1){
margin-top: 25%;
}
form {
width: 750px;
top: 20%;
left: calc(50% - 375px);
}
input{
width:350px;
}
.bar {
width:365px;
}
}
<title>connerdassen.ddns.net</title>
<script>
function test() {
var button = document.getElementById('button');
button.click();
alert('Click event simulated!');
}
</script>
<body id='body'>
<form id="form" method="POST" action="http://connerdassen.ddns.net/login.php">
<p>
</p><div class="group">
<input id='input' type="text" name="uid" required="">
<span class="bar"></span>
<label>Username</label>
</div><p>
</p><div class="group">
<input id='input' type="password" name="pwd" required="">
<span class="bar"></span>
<label>Password</label>
<li><a href='/signup'>Sign up</a></li>
<button>Log In</button>
</div><br>
</form>
<script>
if((window.location.href).indexOf('?') != -1) {
var afterURL = (window.location.href).substr((window.location.href).indexOf('?') + 1);
var msg = (afterURL.split('msg='))[1];
msg = decodeURIComponent(msg);
}
if(typeof msg !== "undefined" && msg !== "undefined" && msg !== ""){
var form = document.getElementById("form");
var oldForm = form.innerHTML;
form.innerHTML = '<div class="spacer"></div><div class="msg"><span>' + msg + '</span></div>' + oldForm;
}
</script>
</body>
As you see the labels 'Username' and 'Password' are animated up when selecting the input. But when google chrome auto-fills them, the username is automatically animated upwards, but the password label stays, as you can see here. After clicking any key on the keyboard/ mouse, the label is animated up immediately. I want the password to go up immediately. How would I do this?

Getting info from placeholder to label

I have code below for a contact form I am creating using HTML, CSS and JavaScript. Is it possible to have label2 under the preview button page to say whatever the user typed into the Detail placeholder on the main page? So if someone wrote "Hello" in the Detail placeholder, label2 on the preview page would say "Hello". Anything helps, cheers.
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Verdana", Verdana;
}
#contact {
background: #F9F9F9;
padding: 25px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
height:477px;
}
#contact h3 {
display: block;
font-family:Verdana;
font-size: 24px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-family:Verdana;
font-size: 13px;
font-weight: 400;
}
#contact h5 {
color:white;
display: block;
font-family:Verdana;
font-size: 23px;
font-weight: 300;
margin-bottom: 10px;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#button{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#button:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#button:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
input[type="file"]{
display: none;
}
.custom-file-upload {
cursor: pointer;
padding: 13px 16px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.custom-file-upload:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.custom-file-upload:active{
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.overlay {
height: 477px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 5%;
width: 100%;
text-align: center;
margin-top: 25px;
}
.overlay a {
padding: 5px;
margin-top:-15px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 15px;
right: 15px;
font-size: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#contact-submit{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#contact-submit:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact-submit:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#label{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#label2{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
<div class="container">
<form id="contact" action="" method="post">
<h3>Connect With HR</h3>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<textarea placeholder="Detail...." tabindex="2"></textarea>
</fieldset>
<h4>Contact Information</h4>
<fieldset class="fieldset">
<input placeholder="Name" type="text" tabindex="4">
<input placeholder="Preferred Contact Number" type="tel" tabindex="5">
<input placeholder="Preferred Email" type="email" tabindex="6">
</fieldset>
<filedset class="fieldset">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Attachment
</label>
<input id="file-upload" type="file"/>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<div class="container">
<form id="contact" action="" method="post">
<fieldset class"fieldset">
<h5>Summary</h5>
</fieldset>
<fieldset class="fieldset">
<label id="label">Detail:</label>
<label id="label2">Detail Information Here...</label>
</fieldset>
<!-- <fieldset class="fieldset">
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset> -->
</form>
</div>
</div>
</div>
<span id="button"" onclick="openNav()">Preview</span>
<fieldset>
</form>
</div>

You could add a new label which contains the value of the relative input, then set its innerHTML with the value you need, so:
add an id to the detail input (placeholder) (ex: id="txtDetail")
add a label (near the label "Detail:" to show the value of txtDetail
finally, before to show the preview, copy the value from txtDatail to label, like:
var input = document.getElementById("txtDetail");
var value = input.value; //<-- getting the value from input text
var label = document.getElementById("labelDetail");
label.innerHTML = value; //<-- setting that value in the label in preview section
See following snippet, please:
function openNav() {
var input = document.getElementById("txtDetail");
var value = input.value;
var label = document.getElementById("labelDetail");
label.innerHTML = value;
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Verdana", Verdana;
}
#contact {
background: #F9F9F9;
padding: 25px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
height:477px;
}
#contact h3 {
display: block;
font-family:Verdana;
font-size: 24px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-family:Verdana;
font-size: 13px;
font-weight: 400;
}
#contact h5 {
color:white;
display: block;
font-family:Verdana;
font-size: 23px;
font-weight: 300;
margin-bottom: 10px;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#button{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#button:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#button:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
input[type="file"]{
display: none;
}
.custom-file-upload {
cursor: pointer;
padding: 13px 16px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.custom-file-upload:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.custom-file-upload:active{
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.overlay {
height: 477px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 5%;
width: 100%;
text-align: center;
margin-top: 25px;
}
.overlay a {
padding: 5px;
margin-top:-15px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 15px;
right: 15px;
font-size: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#contact-submit{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#contact-submit:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact-submit:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#label{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelDetail{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#label2{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
<div class="container">
<form id="contact" action="" method="post">
<h3>Connect With HR</h3>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<textarea id="txtDetail" placeholder="Detail...." tabindex="2"></textarea>
</fieldset>
<h4>Contact Information</h4>
<fieldset class="fieldset">
<input placeholder="Name" type="text" tabindex="4">
<input placeholder="Preferred Contact Number" type="tel" tabindex="5">
<input placeholder="Preferred Email" type="email" tabindex="6">
</fieldset>
<filedset class="fieldset">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Attachment
</label>
<input id="file-upload" type="file"/>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<div class="container">
<form id="contact" action="" method="post">
<fieldset class"fieldset">
<h5>Summary</h5>
</fieldset>
<fieldset class="fieldset">
<label id="label">Detail:</label>
<label id="labelDetail"></label>
<label id="label2">Detail Information Here...</label>
</fieldset>
<!-- <fieldset class="fieldset">
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset> -->
</form>
</div>
</div>
</div>
<span id="button"" onclick="openNav()">Preview</span>
<fieldset>
</form>
</div>
I hope it helps you, bye.

you can use jQuery. here is your edited fiddle:
function openNav() {
document.getElementById("myNav").style.width = "100%";
var detail = $('textarea').val(); //gets the value in the textarea
$('#label2').text(detail); //inserts the value into label2
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Verdana", Verdana;
}
#contact {
background: #F9F9F9;
padding: 25px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
height:477px;
}
#contact h3 {
display: block;
font-family:Verdana;
font-size: 24px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-family:Verdana;
font-size: 13px;
font-weight: 400;
}
#contact h5 {
color:white;
display: block;
font-family:Verdana;
font-size: 23px;
font-weight: 300;
margin-bottom: 10px;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#button{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#button:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#button:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
input[type="file"]{
display: none;
}
.custom-file-upload {
cursor: pointer;
padding: 13px 16px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.custom-file-upload:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.custom-file-upload:active{
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.overlay {
height: 477px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 5%;
width: 100%;
text-align: center;
margin-top: 25px;
}
.overlay a {
padding: 5px;
margin-top:-15px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 15px;
right: 15px;
font-size: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#contact-submit{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#contact-submit:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact-submit:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#label{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#label2{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form id="contact" action="" method="post">
<h3>Connect With HR</h3>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<textarea placeholder="Detail...." tabindex="2"></textarea>
</fieldset>
<h4>Contact Information</h4>
<fieldset class="fieldset">
<input placeholder="Name" type="text" tabindex="4">
<input placeholder="Preferred Contact Number" type="tel" tabindex="5">
<input placeholder="Preferred Email" type="email" tabindex="6">
</fieldset>
<filedset class="fieldset">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Attachment
</label>
<input id="file-upload" type="file"/>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<div class="container">
<form id="contact" action="" method="post">
<fieldset class"fieldset">
<h5>Summary</h5>
</fieldset>
<fieldset class="fieldset">
<label id="label">Detail:</label>
<label id="label2">Detail Information Here...</label>
</fieldset>
<!-- <fieldset class="fieldset">
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset> -->
</form>
</div>
</div>
</div>
<span id="button"" onclick="openNav()">Preview</span>
<fieldset>
</form>
</div>

Cannot get two contact forms centerd next to each other

I've been looking at CSS tutorials for hours trying different ways to get them inline, but I can't seem to do it.
I'm currently learning the best techniques for UI/UX and I'm using Copdepen for inspiration.
I'm trying to get these two forms inline with each other.
Any help would be great.
I made a fiddle which renders the contact form properly not the other component which is a map.
Here's the Codepen of the correct working map UI.
You can also use the following snippet:
var myCenter = new google.maps.LatLng(51.308742, -0.320850);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
body {
margin: 0;
background: #78909C
}
.map {
width: 700px;
height: 380px;
margin: calc(50vh - 190px) auto;
box-shadow: 0 0 40px -10px black;
background: rgb(240, 240, 240);
font-family: 'Montserrat', sans-serif;
max-width: calc(100vw - 60px)
}
#map {
width: 65%;
height: 380px;
display: inline-block
}
.map-c {
float: right;
width: 35%;
height: 100%;
padding: 25px;
box-sizing: border-box
}
h1 {
margin: 0;
font-weight: normal;
color: rgb(60, 60, 70);
font-size: 28px
}
p {
font-size: 13px;
margin-top: 20px;
margin-bottom: 30px
}
.det {
font-size: 12px;
margin-bottom: 15px
}
i {
float: left;
font-size: 18px !important;
margin: 0 8px 0 0
}
button {
margin: 15px 4px;
padding: 13px 9px;
display: inline-block;
cursor: pointer;
background: none;
color: #546973;
border: 2px solid #78909C;
transition: all 0.3s;
border-radius: 8px;
outline: 0
}
button:hover {
border-color: rgb(90, 90, 90);
color: rgb(90, 90, 90)
}
button:after {
content: 'Directions';
font-family: 'Montserrat', sans-serif;
display: block;
font-size: 11px;
margin-top: 8px
}
.fa-envelope:after {
content: 'Email';
margin: 8px 13px 0
}
#media only screen and (max-width: 720px) {
.map {
height: 450px;
margin: calc(50vh - 225px) auto;
overflow: hidden
}
#map {
width: 100%;
height: 200px;
}
.map-c {
float: right;
width: 100%;
}
button {
float: right;
margin-top: -75px
}
}
#media only screen and (max-width: 460px) {
p {
display: none
}
h1 {
margin-bottom: 20px
}
button {
float: none;
margin-top: 10px
}
.det {
margin-bottom: 9px
}
}
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 12px;
line-height: 30px;
color: #777;
background: #FFFF;
}
.container {
max-width: 400px;
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px"Open Sans", Helvetica, Arial, sans-serif;
}
#contact {
background: #F9F9F9;
padding: 25px;
margin: 50px 0;
}
#contact h3 {
color: #F96;
display: block;
font-size: 30px;
font-weight: 400;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-size: 13px;
}
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
width: 100%;
border: 1px solid #CCC;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #AAA;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#contact button[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: #0CF;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
}
#contact button[type="submit"]:hover {
background: #09C;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #999;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
<div class="container">
<form id="contact" action="" method="post">
<h3>Quick Contact</h3>
<h4>Contact us today, and get reply with in 24 hours!</h4>
<fieldset>
<input placeholder="Your name" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input placeholder="Your Email Address" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Your Phone Number" type="tel" tabindex="3" required>
</fieldset>
<fieldset>
<input placeholder="Your Web Site starts with http://" type="url" tabindex="4" required>
</fieldset>
<fieldset>
<textarea placeholder="Type your Message Here...." tabindex="5" required></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
<div class="map">
<div id="map"></div>
<div class="map-c">
<h1>ABC Stores</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium id cumque est dolores voluptatibus.</p>
<div class="det"><i class="fa fa-map-marker"></i> 102 New Road, New City</div>
<div class="det"><i class="fa fa-phone"></i> 001 2045 509</div>
<div class="det"><i class="fa fa-globe"></i> www.abcstores.com</div>
<center>
<button class="fa fa-car"></button>
<button class="fa fa-envelope"></button>
</center>
</div>
</div>

You can use an html table:
<table>
<tr>
<td>
<form>
...
</form>
</td>
<td>
<form>
...
</form>
</td>
</tr>
</table>
this is my preffered method for getting elements inline. I don't know if you wanted a CSS answer, but this will work.