Bootstrap Forms:

Bootstrap Document Upload Wizard

If you own a website, you should gain some information from your users. To do so, we have provided this post with a great performance. The Bootstrap Document Upload Wizard is presented here with the same function. This Upload File Wizard Code is suitable for all kinds of websites. So, you can use it for your page with no worry. This HTML Upload Wizard Form has a white and orange theme and you can apply it on your website if you have a light page.

Most texts of this Bootstrap Upload Form Code are black and you can see three circle icons at the top of the page. These circles are connected with a gray line. The first icon has an orange color with the line. There are two fields at the bottom of the page with an orange background and white writings. The first field is determined for uploading and the second one is for downloading. As you put the mouse on it, its background changes to blue. After clicking on this field, you will face another page and the second icon turns orange. If you select the “Continue” button with orange color, all icons turn the same color. In the last phase of the Javascript Form Wizard Code, you should choose a file and press the “Finish” button.

Upload File Wizard Code

Bootstrap Upload Form Code

HTML Upload Wizard Form

Javascript Form Wizard Code

<!-- This script got from frontendfreecode.com -->
<section class="multi_step_form">
    <form id="msform">
        <!-- Tittle -->
        <div class="tittle">
            <h2>Documents</h2>
            <p>You can upload/download documents here!</p>
        </div>
        <!-- progressbar -->
        <ul id="progressbar">
            <li class="active">Upload/Download</li>
            <li>File Location</li>
            <li>Finish</li>
        </ul>
        <!-- fieldsets -->
        <fieldset>
            <h3>Choose to Upload or Download</h3>
            <h6>Update Later (placeholder)</h6>
            <div class="form-group fg_2">
            </div>
            <button type="button" class="next action-button">Upload</button>
            <button type="button" class="next2 action-button">Download</button>
        </fieldset>
        <fieldset>
            <h3>Choose Where the File is Going (Upload)</h3>
            <h6>Update Later (placeholder)</h6>
            <div class="form-group">
                <select class="product_select">
                    <option data-display="Select">- Setup -</option>
                    <option> </option>
                    <option> </option>
                </select>
            </div>
            <div class="form-group fg_3">
                <select class="product_select">
                    <option data-display="Select">- Setup -</option>
                    <option> </option>
                    <option> </option>
                </select>
            </div>
            <button type="button" class="action-button previous4 previous_button">Back</button>
            <button type="button" class="next2 action-button">Continue</button>
        </fieldset>
        <fieldset>
            <h3>Choose Where the File is Coming From (Download)</h3>
            <h6>Update Later (placeholder)</h6>
            <div class="form-group">
                <select class="product_select">
                    <option data-display="Select">- Setup -</option>
                    <option> </option>
                    <option> </option>
                </select>
            </div>
            <div class="form-group fg_3">
                <select class="product_select">
                    <option data-display="Select">- Setup -</option>
                    <option> </option>
                    <option> </option>
                </select>
            </div>
            <button type="button" class="action-button previous3 previous_button">Back</button>
            <button type="button" class="next3 action-button">Continue</button>
        </fieldset>
        <fieldset>
            <h3>Upload Destination (Upload)</h3>
            <h6>Update Later (placeholder)</h6>
            <div class="input-group">
                <div class="custom-file">
                    <input type="file" class="custom-file-input" id="upload">
                    <label class="custom-file-label" for="upload"><i class="ion-android-cloud-outline"></i>Choose file</label>
                </div>
            </div>
            <ul class="file_added">
                <li>File Added:</li>
                <li><a href="#"><i class="ion-paperclip"></i>example.pdf</a></li>
                <li><a href="#"><i class="ion-paperclip"></i>example.png</a></li>
            </ul>
            <button type="button" class="action-button previous3 previous_button">Back</button>
            <a href="#" class="action-button">Finish</a>
        </fieldset>
        <fieldset>
            <h3>Download Destination (Download)</h3>
            <h6>Update Later (placeholder)</h6>
            <div class="input-group">
                <div class="custom-file">
                    <input type="file" class="custom-file-input" id="upload">
                    <label class="custom-file-label" for="upload"><i class="ion-android-cloud-outline"></i>Choose file</label>
                </div>
            </div>
            <ul class="file_added">
                <li>File Added:</li>
                <li><a href="#"><i class="ion-paperclip"></i>example.pdf</a></li>
                <li><a href="#"><i class="ion-paperclip"></i>example.png</a></li>
            </ul>
            <button type="button" class="action-button previous2 previous_button">Back</button>
            <a href="#" class="action-button">Finish</a>
        </fieldset>
    </form>
</section><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

@charset "UTF-8";
/*font Variables*/

/*Color Variables*/

@import url("https://fonts.googleapis.com/css?family=Roboto:300i,400,400i,500,700,900");
.multi_step_form {
	background: #f6f9fb;
	display: block;
	overflow: hidden;
}
.multi_step_form #msform {
	text-align: center;
	position: relative;
	padding-top: 50px;
	min-height: 820px;
	max-width: 810px;
	margin: 0 auto;
	background: #ffffff;
	z-index: 1;
}
.multi_step_form #msform .tittle {
	text-align: center;
	padding-bottom: 55px;
}
.multi_step_form #msform .tittle h2 {
	font: 500 24px/35px "Roboto", sans-serif;
	color: #3f4553;
	padding-bottom: 5px;
}
.multi_step_form #msform .tittle p {
	font: 400 16px/28px "Roboto", sans-serif;
	color: #000000;
}
.multi_step_form #msform fieldset {
	border: 0;
	padding: 20px 105px 0;
	position: relative;
	width: 100%;
	left: 0;
	right: 0;
}
.multi_step_form #msform fieldset:not(:first-of-type) {
	display: none;
}
.multi_step_form #msform fieldset h3 {
	font: 500 18px/35px "Roboto", sans-serif;
	color: #3f4553;
}
.multi_step_form #msform fieldset h6 {
	font: 400 15px/28px "Roboto", sans-serif;
	color: #000000;
	padding-bottom: 30px;
}
.multi_step_form #msform fieldset .intl-tel-input {
	display: block;
	background: transparent;
	border: 0;
	box-shadow: none;
	outline: none;
}
.multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag {
	padding: 0 20px;
	background: transparent;
	border: 0;
	box-shadow: none;
	outline: none;
	width: 65px;
}
.multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag .iti-arrow {
	border: 0;
}
.multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag .iti-arrow:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	font: normal normal normal 24px/7px Ionicons;
	color: #000000;
}
.multi_step_form #msform fieldset #phone {
	padding-left: 80px;
}
.multi_step_form #msform fieldset .form-group {
	padding: 0 50px;
	padding-bottom: 20px;
}
.multi_step_form #msform fieldset .fg_2, .multi_step_form #msform fieldset .fg_3 {
	padding-top: 40px;
	display: block;
	overflow: visible;
}
.multi_step_form #msform fieldset .fg_3 {
	padding-bottom: 160px;
}
.multi_step_form #msform fieldset .form-control, .multi_step_form #msform fieldset .product_select {
	border-radius: 30px;
	border: 1px solid #000000;
	padding: 0 20px;
	height: auto;
	font: 400 15px/48px "Roboto", sans-serif;
	color: #000000;
	box-shadow: none;
	outline: none;
	width: 100%;
}
.multi_step_form #msform fieldset .form-control.placeholder, .multi_step_form #msform fieldset .product_select.placeholder {
	color: #000000;
}
.multi_step_form #msform fieldset .form-control:-moz-placeholder, .multi_step_form #msform fieldset .product_select:-moz-placeholder {
	color: #000000;
}
.multi_step_form #msform fieldset .form-control::-moz-placeholder, .multi_step_form #msform fieldset .product_select::-moz-placeholder {
	color: #000000;
}
.multi_step_form #msform fieldset .form-control::-webkit-input-placeholder, .multi_step_form #msform fieldset .product_select::-webkit-input-placeholder {
	color: #000000;
}
.multi_step_form #msform fieldset .form-control:hover, .multi_step_form #msform fieldset .form-control:focus, .multi_step_form #msform fieldset .product_select:hover, .multi_step_form #msform fieldset .product_select:focus {
	border-color: #F15A22;
}
.multi_step_form #msform fieldset .form-control:focus.placeholder, .multi_step_form #msform fieldset .product_select:focus.placeholder {
	color: transparent;
}
.multi_step_form #msform fieldset .form-control:focus:-moz-placeholder, .multi_step_form #msform fieldset .product_select:focus:-moz-placeholder {
	color: transparent;
}
.multi_step_form #msform fieldset .form-control:focus::-moz-placeholder, .multi_step_form #msform fieldset .product_select:focus::-moz-placeholder {
	color: transparent;
}
.multi_step_form #msform fieldset .form-control:focus::-webkit-input-placeholder, .multi_step_form #msform fieldset .product_select:focus::-webkit-input-placeholder {
	color: transparent;
}
.multi_step_form #msform fieldset .product_select:after {
	display: none;
}
.multi_step_form #msform fieldset .product_select:before {
	content: "";
	position: absolute;
	top: 0;
	right: 20px;
	font: normal normal normal 24px/48px Ionicons;
	color: #000000;
}
.multi_step_form #msform fieldset .product_select .list {
	width: 100%;
}
.multi_step_form #msform fieldset .done_text {
	padding-top: 40px;
}
.multi_step_form #msform fieldset .done_text .don_icon {
	height: 36px;
	width: 36px;
	line-height: 36px;
	font-size: 22px;
	margin-bottom: 10px;
	background: #F15A22;
	display: inline-block;
	border-radius: 50%;
	color: #ffffff;
	text-align: center;
}
.multi_step_form #msform fieldset .done_text h6 {
	line-height: 23px;
}
.multi_step_form #msform fieldset .code_group {
	margin-bottom: 60px;
}
.multi_step_form #msform fieldset .code_group .form-control {
	border: 0;
	border-bottom: 1px solid #a1a7ac;
	border-radius: 0;
	display: inline-block;
	width: 30px;
	font-size: 30px;
	color: #000000;
	padding: 0;
	margin-right: 7px;
	text-align: center;
	line-height: 1;
}
.multi_step_form #msform fieldset .passport {
	margin-top: -10px;
	padding-bottom: 30px;
	position: relative;
}
.multi_step_form #msform fieldset .passport .don_icon {
	height: 36px;
	width: 36px;
	line-height: 36px;
	font-size: 22px;
	position: absolute;
	top: 4px;
	right: 0;
	background: #F15A22;
	display: inline-block;
	border-radius: 50%;
	color: #ffffff;
	text-align: center;
}
.multi_step_form #msform fieldset .passport h4 {
	font: 500 15px/23px "Roboto", sans-serif;
	color: #000000;
	padding: 0;
}
.multi_step_form #msform fieldset .input-group {
	padding-bottom: 40px;
}
.multi_step_form #msform fieldset .input-group .custom-file {
	width: 100%;
	height: auto;
}
.multi_step_form #msform fieldset .input-group .custom-file .custom-file-label {
	width: 168px;
	border-radius: 5px;
	cursor: pointer;
	font: 700 14px/40px "Roboto", sans-serif;
	border: 1px solid #99a2a8;
	text-align: center;
	transition: all 300ms linear 0s;
	color: #000000;
}
.multi_step_form #msform fieldset .input-group .custom-file .custom-file-label i {
	font-size: 20px;
	padding-right: 10px;
}
.multi_step_form #msform fieldset .input-group .custom-file .custom-file-label:hover, .multi_step_form #msform fieldset .input-group .custom-file .custom-file-label:focus {
	background: #F15A22;
	border-color: #F15A22;
	color: #fff;
}
.multi_step_form #msform fieldset .input-group .custom-file input {
	display: none;
}
.multi_step_form #msform fieldset .file_added {
	text-align: left;
	padding-left: 190px;
	padding-bottom: 60px;
}
.multi_step_form #msform fieldset .file_added li {
	font: 400 15px/28px "Roboto", sans-serif;
	color: #000000;
}
.multi_step_form #msform fieldset .file_added li a {
	color: #F15A22;
	font-weight: 500;
	display: inline-block;
	position: relative;
	padding-left: 15px;
}
.multi_step_form #msform fieldset .file_added li a i {
	font-size: 22px;
	padding-right: 8px;
	position: absolute;
	left: 0;
	transform: rotate(20deg);
}
.multi_step_form #msform #progressbar {
	margin-bottom: 30px;
	overflow: hidden;
}
.multi_step_form #msform #progressbar li {
	list-style-type: none;
	color: #99a2a8;
	font-size: 9px;
	width: calc(100%/3);
	float: left;
	position: relative;
	font: 500 13px/1 "Roboto", sans-serif;
}
.multi_step_form #msform #progressbar li:nth-child(2):before {
	content: "";
}
.multi_step_form #msform #progressbar li:nth-child(3):before {
	content: "";
}
.multi_step_form #msform #progressbar li:before {
	content: "";
	font: normal normal normal 30px/50px Ionicons;
	width: 50px;
	height: 50px;
	line-height: 50px;
	display: block;
	background: #eaf0f4;
	border-radius: 50%;
	margin: 0 auto 10px auto;
}
.multi_step_form #msform #progressbar li:after {
	content: "";
	width: 100%;
	height: 10px;
	background: #eaf0f4;
	position: absolute;
	left: -50%;
	top: 21px;
	z-index: -1;
}
.multi_step_form #msform #progressbar li:last-child:after {
	width: 150%;
}
.multi_step_form #msform #progressbar li.active {
	color: #F15A22;
}
.multi_step_form #msform #progressbar li.active:before, .multi_step_form #msform #progressbar li.active:after {
	background: #F15A22;
	color: white;
}
.multi_step_form #msform .action-button {
	background: #F15A22;
	color: white;
	border: 0 none;
	border-radius: 5px;
	cursor: pointer;
	min-width: 130px;
	font: 700 14px/40px "Roboto", sans-serif;
	border: 1px solid #F15A22;
	margin: 0 5px;
	text-transform: uppercase;
	display: inline-block;
}
.multi_step_form #msform .action-button:hover, .multi_step_form #msform .action-button:focus {
	background: #0C2340;
	border-color: #0C2340;
}
.multi_step_form #msform .previous_button {
	background: transparent;
	color: #99a2a8;
	border-color: #99a2a8;
}
.multi_step_form #msform .previous_button:hover, .multi_step_form #msform .previous_button:focus {
	background: #0C2340;
	border-color: #0C2340;
	color: #fff;
}

; (function ($) {
    "use strict";
    //* Form js
    function verificationForm() {
        //jQuery time
        var current_fs, next_fs, previous_fs, trans_progbar; //fieldsets
        var left, opacity, scale; //fieldset properties which we will animate
        var animating; //flag to prevent quick multi-click glitches
        $(".next").click(function () {
            if (animating) return false;
            animating = true;
            current_fs = $(this).parent();
            trans_progbar = $(this).parent().next();
            next_fs = $(this).parent().next();
            //activate next step on progressbar using the index of next_fs
            $("#progressbar li").eq($("fieldset").index(trans_progbar)).addClass("active");
            //show the next fieldset
            next_fs.show();
            //hide the current fieldset with style
            current_fs.animate({
                opacity: 0
            }, {
                step: function (now, mx) {
                    //as the opacity of current_fs reduces to 0 - stored in "now"
                    //1. scale current_fs down to 80%
                    scale = 1 - (1 - now) * 0.2;
                    //2. bring next_fs from the right(50%)
                    left = (now * 50) + "%";
                    //3. increase opacity of next_fs to 1 as it moves in
                    opacity = 1 - now;
                    current_fs.css({
                        'transform': 'scale(' + scale + ')',
                        'position': 'absolute'
                    });
                    next_fs.css({
                        'left': left,
                        'opacity': opacity
                    });
                },
                duration: 800,
                complete: function () {
                    current_fs.hide();
                    animating = false;
                },
                //this comes from the custom easing plugin
                easing: 'easeInOutBack'
            });
        });
        $(".next2").click(function () {
            if (animating) return false;
            animating = true;
            current_fs = $(this).parent();
            trans_progbar = $(this).parent().next();
            next_fs = $(this).parent().next().next();
            //activate next step on progressbar using the index of next_fs
            $("#progressbar li").eq($("fieldset").index(trans_progbar)).addClass("active");
            //show the next fieldset
            next_fs.show();
            //hide the current fieldset with style
            current_fs.animate({
                opacity: 0
            }, {
                step: function (now, mx) {
                    //as the opacity of current_fs reduces to 0 - stored in "now"
                    //1. scale current_fs down to 80%
                    scale = 1 - (1 - now) * 0.2;
                    //2. bring next_fs from the right(50%)
                    left = (now * 50) + "%";
                    //3. increase opacity of next_fs to 1 as it moves in
                    opacity = 1 - now;
                    current_fs.css({
                        'transform': 'scale(' + scale + ')',
                        'position': 'absolute'
                    });
                    next_fs.css({
                        'left': left,
                        'opacity': opacity
                    });
                },
                duration: 800,
                complete: function () {
                    current_fs.hide();
                    animating = false;
                },
                //this comes from the custom easing plugin
                easing: 'easeInOutBack'
            });
        });
        $(".next3").click(function () {
            if (animating) return false;
            animating = true;
            current_fs = $(this).parent();
            trans_progbar = $(this).parent();
            next_fs = $(this).parent().next().next();
            //activate next step on progressbar using the index of next_fs
            $("#progressbar li").eq($("fieldset").index(trans_progbar)).addClass("active");
            //show the next fieldset
            next_fs.show();
            //hide the current fieldset with style
            current_fs.animate({
                opacity: 0
            }, {
                step: function (now, mx) {
                    //as the opacity of current_fs reduces to 0 - stored in "now"
                    //1. scale current_fs down to 80%
                    scale = 1 - (1 - now) * 0.2;
                    //2. bring next_fs from the right(50%)
                    left = (now * 50) + "%";
                    //3. increase opacity of next_fs to 1 as it moves in
                    opacity = 1 - now;
                    current_fs.css({
                        'transform': 'scale(' + scale + ')',
                        'position': 'absolute'
                    });
                    next_fs.css({
                        'left': left,
                        'opacity': opacity
                    });
                },
                duration: 800,
                complete: function () {
                    current_fs.hide();
                    animating = false;
                },
                //this comes from the custom easing plugin
                easing: 'easeInOutBack'
            });
        });
        $(".previous").click(function () {
            if (animating) return false;
            animating = true;
            current_fs = $(this).parent();
            trans_progbar = $(this).parent().prev();
            previous_fs = $(this).parent().prev();
            //de-activate current step on progressbar
            $("#progressbar li").eq($("fieldset").index(trans_progbar)).removeClass("active");
            //show the previous fieldset
            previous_fs.show();
            //hide the current fieldset with style
            current_fs.animate({
                opacity: 0
            }, {
                step: function (now, mx) {
                    //as the opacity of current_fs reduces to 0 - stored in "now"
                    //1. scale previous_fs from 80% to 100%
                    scale = 0.8 + (1 - now) * 0.2;
                    //2. take current_fs to the right(50%) - from 0%
                    left = ((1 - now) * 50) + "%";
                    //3. increase opacity of previous_fs to 1 as it moves in
                    opacity = 1 - now;
                    current_fs.css({
                        'left': left
                    });
                    previous_fs.css({
                        'transform': 'scale(' + scale + ')',
                        'opacity': opacity
                    });
                },
                duration: 800,
                complete: function () {
                    current_fs.hide();
                    animating = false;
                },
                //this comes from the custom easing plugin
                easing: 'easeInOutBack'
            });
        });
        $(".previous2").click(function () {
            if (animating) return false;
            animating = true;
            current_fs = $(this).parent();
            trans_progbar = $(this).parent().prev().prev();
            previous_fs = $(this).parent().prev().prev();
            //de-activate current step on progressbar
            $("#progressbar li").eq($("fieldset").index(trans_progbar)).removeClass("active");
            //show the previous fieldset
            previous_fs.show();
            //hide the current fieldset with style
            current_fs.animate({
                opacity: 0
            }, {
                step: function (now, mx) {
                    //as the opacity of current_fs reduces to 0 - stored in "now"
                    //1. scale previous_fs from 80% to 100%
                    scale = 0.8 + (1 - now) * 0.2;
                    //2. take current_fs to the right(50%) - from 0%
                    left = ((1 - now) * 50) + "%";
                    //3. increase opacity of previous_fs to 1 as it moves in
                    opacity = 1 - now;
                    current_fs.css({
                        'left': left
                    });
                    previous_fs.css({
                        'transform': 'scale(' + scale + ')',
                        'opacity': opacity
                    });
                },
                duration: 800,
                complete: function () {
                    current_fs.hide();
                    animating = false;
                },
                //this comes from the custom easing plugin
                easing: 'easeInOutBack'
            });
        });
        $(".previous3").click(function () {
            if (animating) return false;
            animating = true;
            current_fs = $(this).parent();
            trans_progbar = $(this).parent().prev();
            previous_fs = $(this).parent().prev().prev();
            //de-activate current step on progressbar
            $("#progressbar li").eq($("fieldset").index(trans_progbar)).removeClass("active");
            //show the previous fieldset
            previous_fs.show();
            //hide the current fieldset with style
            current_fs.animate({
                opacity: 0
            }, {
                step: function (now, mx) {
                    //as the opacity of current_fs reduces to 0 - stored in "now"
                    //1. scale previous_fs from 80% to 100%
                    scale = 0.8 + (1 - now) * 0.2;
                    //2. take current_fs to the right(50%) - from 0%
                    left = ((1 - now) * 50) + "%";
                    //3. increase opacity of previous_fs to 1 as it moves in
                    opacity = 1 - now;
                    current_fs.css({
                        'left': left
                    });
                    previous_fs.css({
                        'transform': 'scale(' + scale + ')',
                        'opacity': opacity
                    });
                },
                duration: 800,
                complete: function () {
                    current_fs.hide();
                    animating = false;
                },
                //this comes from the custom easing plugin
                easing: 'easeInOutBack'
            });
        });
        $(".previous4").click(function () {
            if (animating) return false;
            animating = true;
            current_fs = $(this).parent();
            trans_progbar = $(this).parent().prev().prev();
            previous_fs = $(this).parent().prev();
            //de-activate current step on progressbar
            $("#progressbar li").eq($("fieldset").index(trans_progbar)).removeClass("active");
            //show the previous fieldset
            previous_fs.show();
            //hide the current fieldset with style
            current_fs.animate({
                opacity: 0
            }, {
                step: function (now, mx) {
                    //as the opacity of current_fs reduces to 0 - stored in "now"
                    //1. scale previous_fs from 80% to 100%
                    scale = 0.8 + (1 - now) * 0.2;
                    //2. take current_fs to the right(50%) - from 0%
                    left = ((1 - now) * 50) + "%";
                    //3. increase opacity of previous_fs to 1 as it moves in
                    opacity = 1 - now;
                    current_fs.css({
                        'left': left
                    });
                    previous_fs.css({
                        'transform': 'scale(' + scale + ')',
                        'opacity': opacity
                    });
                },
                duration: 800,
                complete: function () {
                    current_fs.hide();
                    animating = false;
                },
                //this comes from the custom easing plugin
                easing: 'easeInOutBack'
            });
        });
        $(".submit").click(function () {
            return false;
        })
    };
    //* Add Phone no select... Idk how this affects it but it changes the size of the dropdown fields. DONT DELETE IT!
    function phoneNoselect() {
        if ($('#msform').length) {
            $("#phone").intlTelInput();
            $("#phone").intlTelInput("setNumber", "+880");
        };
    };
    //* Select js
    function nice_Select() {
        if ($('.product_select').length) {
            $('select').niceSelect();
        };
    };
    /*Function Calls*/
    verificationForm();
    phoneNoselect();
    nice_Select();
})(jQuery);

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.2/css/intlTelInput.css'>
<link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.min.css'>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.2/js/intlTelInput.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.2/css/intlTelInput.css'>
<link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.min.css'>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.2/js/intlTelInput.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js'></script>
<style>
@charset "UTF-8";
/*font Variables*/

/*Color Variables*/

@import url("https://fonts.googleapis.com/css?family=Roboto:300i,400,400i,500,700,900");
.multi_step_form {
	background: #f6f9fb;
	display: block;
	overflow: hidden;
}
.multi_step_form #msform {
	text-align: center;
	position: relative;
	padding-top: 50px;
	min-height: 820px;
	max-width: 810px;
	margin: 0 auto;
	background: #ffffff;
	z-index: 1;
}
.multi_step_form #msform .tittle {
	text-align: center;
	padding-bottom: 55px;
}
.multi_step_form #msform .tittle h2 {
	font: 500 24px/35px "Roboto", sans-serif;
	color: #3f4553;
	padding-bottom: 5px;
}
.multi_step_form #msform .tittle p {
	font: 400 16px/28px "Roboto", sans-serif;
	color: #000000;
}
.multi_step_form #msform fieldset {
	border: 0;
	padding: 20px 105px 0;
	position: relative;
	width: 100%;
	left: 0;
	right: 0;
}
.multi_step_form #msform fieldset:not(:first-of-type) {
	display: none;
}
.multi_step_form #msform fieldset h3 {
	font: 500 18px/35px "Roboto", sans-serif;
	color: #3f4553;
}
.multi_step_form #msform fieldset h6 {
	font: 400 15px/28px "Roboto", sans-serif;
	color: #000000;
	padding-bottom: 30px;
}
.multi_step_form #msform fieldset .intl-tel-input {
	display: block;
	background: transparent;
	border: 0;
	box-shadow: none;
	outline: none;
}
.multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag {
	padding: 0 20px;
	background: transparent;
	border: 0;
	box-shadow: none;
	outline: none;
	width: 65px;
}
.multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag .iti-arrow {
	border: 0;
}
.multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag .iti-arrow:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	font: normal normal normal 24px/7px Ionicons;
	color: #000000;
}
.multi_step_form #msform fieldset #phone {
	padding-left: 80px;
}
.multi_step_form #msform fieldset .form-group {
	padding: 0 50px;
	padding-bottom: 20px;
}
.multi_step_form #msform fieldset .fg_2, .multi_step_form #msform fieldset .fg_3 {
	padding-top: 40px;
	display: block;
	overflow: visible;
}
.multi_step_form #msform fieldset .fg_3 {
	padding-bottom: 160px;
}
.multi_step_form #msform fieldset .form-control, .multi_step_form #msform fieldset .product_select {
	border-radius: 30px;
	border: 1px solid #000000;
	padding: 0 20px;
	height: auto;
	font: 400 15px/48px "Roboto", sans-serif;
	color: #000000;
	box-shadow: none;
	outline: none;
	width: 100%;
}
.multi_step_form #msform fieldset .form-control.placeholder, .multi_step_form #msform fieldset .product_select.placeholder {
	color: #000000;
}
.multi_step_form #msform fieldset .form-control:-moz-placeholder, .multi_step_form #msform fieldset .product_select:-moz-placeholder {
	color: #000000;
}
.multi_step_form #msform fieldset .form-control::-moz-placeholder, .multi_step_form #msform fieldset .product_select::-moz-placeholder {
	color: #000000;
}
.multi_step_form #msform fieldset .form-control::-webkit-input-placeholder, .multi_step_form #msform fieldset .product_select::-webkit-input-placeholder {
	color: #000000;
}
.multi_step_form #msform fieldset .form-control:hover, .multi_step_form #msform fieldset .form-control:focus, .multi_step_form #msform fieldset .product_select:hover, .multi_step_form #msform fieldset .product_select:focus {
	border-color: #F15A22;
}
.multi_step_form #msform fieldset .form-control:focus.placeholder, .multi_step_form #msform fieldset .product_select:focus.placeholder {
	color: transparent;
}
.multi_step_form #msform fieldset .form-control:focus:-moz-placeholder, .multi_step_form #msform fieldset .product_select:focus:-moz-placeholder {
	color: transparent;
}
.multi_step_form #msform fieldset .form-control:focus::-moz-placeholder, .multi_step_form #msform fieldset .product_select:focus::-moz-placeholder {
	color: transparent;
}
.multi_step_form #msform fieldset .form-control:focus::-webkit-input-placeholder, .multi_step_form #msform fieldset .product_select:focus::-webkit-input-placeholder {
	color: transparent;
}
.multi_step_form #msform fieldset .product_select:after {
	display: none;
}
.multi_step_form #msform fieldset .product_select:before {
	content: "";
	position: absolute;
	top: 0;
	right: 20px;
	font: normal normal normal 24px/48px Ionicons;
	color: #000000;
}
.multi_step_form #msform fieldset .product_select .list {
	width: 100%;
}
.multi_step_form #msform fieldset .done_text {
	padding-top: 40px;
}
.multi_step_form #msform fieldset .done_text .don_icon {
	height: 36px;
	width: 36px;
	line-height: 36px;
	font-size: 22px;
	margin-bottom: 10px;
	background: #F15A22;
	display: inline-block;
	border-radius: 50%;
	color: #ffffff;
	text-align: center;
}
.multi_step_form #msform fieldset .done_text h6 {
	line-height: 23px;
}
.multi_step_form #msform fieldset .code_group {
	margin-bottom: 60px;
}
.multi_step_form #msform fieldset .code_group .form-control {
	border: 0;
	border-bottom: 1px solid #a1a7ac;
	border-radius: 0;
	display: inline-block;
	width: 30px;
	font-size: 30px;
	color: #000000;
	padding: 0;
	margin-right: 7px;
	text-align: center;
	line-height: 1;
}
.multi_step_form #msform fieldset .passport {
	margin-top: -10px;
	padding-bottom: 30px;
	position: relative;
}
.multi_step_form #msform fieldset .passport .don_icon {
	height: 36px;
	width: 36px;
	line-height: 36px;
	font-size: 22px;
	position: absolute;
	top: 4px;
	right: 0;
	background: #F15A22;
	display: inline-block;
	border-radius: 50%;
	color: #ffffff;
	text-align: center;
}
.multi_step_form #msform fieldset .passport h4 {
	font: 500 15px/23px "Roboto", sans-serif;
	color: #000000;
	padding: 0;
}
.multi_step_form #msform fieldset .input-group {
	padding-bottom: 40px;
}
.multi_step_form #msform fieldset .input-group .custom-file {
	width: 100%;
	height: auto;
}
.multi_step_form #msform fieldset .input-group .custom-file .custom-file-label {
	width: 168px;
	border-radius: 5px;
	cursor: pointer;
	font: 700 14px/40px "Roboto", sans-serif;
	border: 1px solid #99a2a8;
	text-align: center;
	transition: all 300ms linear 0s;
	color: #000000;
}
.multi_step_form #msform fieldset .input-group .custom-file .custom-file-label i {
	font-size: 20px;
	padding-right: 10px;
}
.multi_step_form #msform fieldset .input-group .custom-file .custom-file-label:hover, .multi_step_form #msform fieldset .input-group .custom-file .custom-file-label:focus {
	background: #F15A22;
	border-color: #F15A22;
	color: #fff;
}
.multi_step_form #msform fieldset .input-group .custom-file input {
	display: none;
}
.multi_step_form #msform fieldset .file_added {
	text-align: left;
	padding-left: 190px;
	padding-bottom: 60px;
}
.multi_step_form #msform fieldset .file_added li {
	font: 400 15px/28px "Roboto", sans-serif;
	color: #000000;
}
.multi_step_form #msform fieldset .file_added li a {
	color: #F15A22;
	font-weight: 500;
	display: inline-block;
	position: relative;
	padding-left: 15px;
}
.multi_step_form #msform fieldset .file_added li a i {
	font-size: 22px;
	padding-right: 8px;
	position: absolute;
	left: 0;
	transform: rotate(20deg);
}
.multi_step_form #msform #progressbar {
	margin-bottom: 30px;
	overflow: hidden;
}
.multi_step_form #msform #progressbar li {
	list-style-type: none;
	color: #99a2a8;
	font-size: 9px;
	width: calc(100%/3);
	float: left;
	position: relative;
	font: 500 13px/1 "Roboto", sans-serif;
}
.multi_step_form #msform #progressbar li:nth-child(2):before {
	content: "";
}
.multi_step_form #msform #progressbar li:nth-child(3):before {
	content: "";
}
.multi_step_form #msform #progressbar li:before {
	content: "";
	font: normal normal normal 30px/50px Ionicons;
	width: 50px;
	height: 50px;
	line-height: 50px;
	display: block;
	background: #eaf0f4;
	border-radius: 50%;
	margin: 0 auto 10px auto;
}
.multi_step_form #msform #progressbar li:after {
	content: "";
	width: 100%;
	height: 10px;
	background: #eaf0f4;
	position: absolute;
	left: -50%;
	top: 21px;
	z-index: -1;
}
.multi_step_form #msform #progressbar li:last-child:after {
	width: 150%;
}
.multi_step_form #msform #progressbar li.active {
	color: #F15A22;
}
.multi_step_form #msform #progressbar li.active:before, .multi_step_form #msform #progressbar li.active:after {
	background: #F15A22;
	color: white;
}
.multi_step_form #msform .action-button {
	background: #F15A22;
	color: white;
	border: 0 none;
	border-radius: 5px;
	cursor: pointer;
	min-width: 130px;
	font: 700 14px/40px "Roboto", sans-serif;
	border: 1px solid #F15A22;
	margin: 0 5px;
	text-transform: uppercase;
	display: inline-block;
}
.multi_step_form #msform .action-button:hover, .multi_step_form #msform .action-button:focus {
	background: #0C2340;
	border-color: #0C2340;
}
.multi_step_form #msform .previous_button {
	background: transparent;
	color: #99a2a8;
	border-color: #99a2a8;
}
.multi_step_form #msform .previous_button:hover, .multi_step_form #msform .previous_button:focus {
	background: #0C2340;
	border-color: #0C2340;
	color: #fff;
}
</style>

</head>
<body>
<section class="multi_step_form">
    <form id="msform">
        <!-- Tittle -->
        <div class="tittle">
            <h2>Documents</h2>
            <p>You can upload/download documents here!</p>
        </div>
        <!-- progressbar -->
        <ul id="progressbar">
            <li class="active">Upload/Download</li>
            <li>File Location</li>
            <li>Finish</li>
        </ul>
        <!-- fieldsets -->
        <fieldset>
            <h3>Choose to Upload or Download</h3>
            <h6>Update Later (placeholder)</h6>
            <div class="form-group fg_2">
            </div>
            <button type="button" class="next action-button">Upload</button>
            <button type="button" class="next2 action-button">Download</button>
        </fieldset>
        <fieldset>
            <h3>Choose Where the File is Going (Upload)</h3>
            <h6>Update Later (placeholder)</h6>
            <div class="form-group">
                <select class="product_select">
                    <option data-display="Select">- Setup -</option>
                    <option> </option>
                    <option> </option>
                </select>
            </div>
            <div class="form-group fg_3">
                <select class="product_select">
                    <option data-display="Select">- Setup -</option>
                    <option> </option>
                    <option> </option>
                </select>
            </div>
            <button type="button" class="action-button previous4 previous_button">Back</button>
            <button type="button" class="next2 action-button">Continue</button>
        </fieldset>
        <fieldset>
            <h3>Choose Where the File is Coming From (Download)</h3>
            <h6>Update Later (placeholder)</h6>
            <div class="form-group">
                <select class="product_select">
                    <option data-display="Select">- Setup -</option>
                    <option> </option>
                    <option> </option>
                </select>
            </div>
            <div class="form-group fg_3">
                <select class="product_select">
                    <option data-display="Select">- Setup -</option>
                    <option> </option>
                    <option> </option>
                </select>
            </div>
            <button type="button" class="action-button previous3 previous_button">Back</button>
            <button type="button" class="next3 action-button">Continue</button>
        </fieldset>
        <fieldset>
            <h3>Upload Destination (Upload)</h3>
            <h6>Update Later (placeholder)</h6>
            <div class="input-group">
                <div class="custom-file">
                    <input type="file" class="custom-file-input" id="upload">
                    <label class="custom-file-label" for="upload"><i class="ion-android-cloud-outline"></i>Choose file</label>
                </div>
            </div>
            <ul class="file_added">
                <li>File Added:</li>
                <li><a href="#"><i class="ion-paperclip"></i>example.pdf</a></li>
                <li><a href="#"><i class="ion-paperclip"></i>example.png</a></li>
            </ul>
            <button type="button" class="action-button previous3 previous_button">Back</button>
            <a href="#" class="action-button">Finish</a>
        </fieldset>
        <fieldset>
            <h3>Download Destination (Download)</h3>
            <h6>Update Later (placeholder)</h6>
            <div class="input-group">
                <div class="custom-file">
                    <input type="file" class="custom-file-input" id="upload">
                    <label class="custom-file-label" for="upload"><i class="ion-android-cloud-outline"></i>Choose file</label>
                </div>
            </div>
            <ul class="file_added">
                <li>File Added:</li>
                <li><a href="#"><i class="ion-paperclip"></i>example.pdf</a></li>
                <li><a href="#"><i class="ion-paperclip"></i>example.png</a></li>
            </ul>
            <button type="button" class="action-button previous2 previous_button">Back</button>
            <a href="#" class="action-button">Finish</a>
        </fieldset>
    </form>
</section><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
; (function ($) {
    "use strict";
    //* Form js
    function verificationForm() {
        //jQuery time
        var current_fs, next_fs, previous_fs, trans_progbar; //fieldsets
        var left, opacity, scale; //fieldset properties which we will animate
        var animating; //flag to prevent quick multi-click glitches
        $(".next").click(function () {
            if (animating) return false;
            animating = true;
            current_fs = $(this).parent();
            trans_progbar = $(this).parent().next();
            next_fs = $(this).parent().next();
            //activate next step on progressbar using the index of next_fs
            $("#progressbar li").eq($("fieldset").index(trans_progbar)).addClass("active");
            //show the next fieldset
            next_fs.show();
            //hide the current fieldset with style
            current_fs.animate({
                opacity: 0
            }, {
                step: function (now, mx) {
                    //as the opacity of current_fs reduces to 0 - stored in "now"
                    //1. scale current_fs down to 80%
                    scale = 1 - (1 - now) * 0.2;
                    //2. bring next_fs from the right(50%)
                    left = (now * 50) + "%";
                    //3. increase opacity of next_fs to 1 as it moves in
                    opacity = 1 - now;
                    current_fs.css({
                        'transform': 'scale(' + scale + ')',
                        'position': 'absolute'
                    });
                    next_fs.css({
                        'left': left,
                        'opacity': opacity
                    });
                },
                duration: 800,
                complete: function () {
                    current_fs.hide();
                    animating = false;
                },
                //this comes from the custom easing plugin
                easing: 'easeInOutBack'
            });
        });
        $(".next2").click(function () {
            if (animating) return false;
            animating = true;
            current_fs = $(this).parent();
            trans_progbar = $(this).parent().next();
            next_fs = $(this).parent().next().next();
            //activate next step on progressbar using the index of next_fs
            $("#progressbar li").eq($("fieldset").index(trans_progbar)).addClass("active");
            //show the next fieldset
            next_fs.show();
            //hide the current fieldset with style
            current_fs.animate({
                opacity: 0
            }, {
                step: function (now, mx) {
                    //as the opacity of current_fs reduces to 0 - stored in "now"
                    //1. scale current_fs down to 80%
                    scale = 1 - (1 - now) * 0.2;
                    //2. bring next_fs from the right(50%)
                    left = (now * 50) + "%";
                    //3. increase opacity of next_fs to 1 as it moves in
                    opacity = 1 - now;
                    current_fs.css({
                        'transform': 'scale(' + scale + ')',
                        'position': 'absolute'
                    });
                    next_fs.css({
                        'left': left,
                        'opacity': opacity
                    });
                },
                duration: 800,
                complete: function () {
                    current_fs.hide();
                    animating = false;
                },
                //this comes from the custom easing plugin
                easing: 'easeInOutBack'
            });
        });
        $(".next3").click(function () {
            if (animating) return false;
            animating = true;
            current_fs = $(this).parent();
            trans_progbar = $(this).parent();
            next_fs = $(this).parent().next().next();
            //activate next step on progressbar using the index of next_fs
            $("#progressbar li").eq($("fieldset").index(trans_progbar)).addClass("active");
            //show the next fieldset
            next_fs.show();
            //hide the current fieldset with style
            current_fs.animate({
                opacity: 0
            }, {
                step: function (now, mx) {
                    //as the opacity of current_fs reduces to 0 - stored in "now"
                    //1. scale current_fs down to 80%
                    scale = 1 - (1 - now) * 0.2;
                    //2. bring next_fs from the right(50%)
                    left = (now * 50) + "%";
                    //3. increase opacity of next_fs to 1 as it moves in
                    opacity = 1 - now;
                    current_fs.css({
                        'transform': 'scale(' + scale + ')',
                        'position': 'absolute'
                    });
                    next_fs.css({
                        'left': left,
                        'opacity': opacity
                    });
                },
                duration: 800,
                complete: function () {
                    current_fs.hide();
                    animating = false;
                },
                //this comes from the custom easing plugin
                easing: 'easeInOutBack'
            });
        });
        $(".previous").click(function () {
            if (animating) return false;
            animating = true;
            current_fs = $(this).parent();
            trans_progbar = $(this).parent().prev();
            previous_fs = $(this).parent().prev();
            //de-activate current step on progressbar
            $("#progressbar li").eq($("fieldset").index(trans_progbar)).removeClass("active");
            //show the previous fieldset
            previous_fs.show();
            //hide the current fieldset with style
            current_fs.animate({
                opacity: 0
            }, {
                step: function (now, mx) {
                    //as the opacity of current_fs reduces to 0 - stored in "now"
                    //1. scale previous_fs from 80% to 100%
                    scale = 0.8 + (1 - now) * 0.2;
                    //2. take current_fs to the right(50%) - from 0%
                    left = ((1 - now) * 50) + "%";
                    //3. increase opacity of previous_fs to 1 as it moves in
                    opacity = 1 - now;
                    current_fs.css({
                        'left': left
                    });
                    previous_fs.css({
                        'transform': 'scale(' + scale + ')',
                        'opacity': opacity
                    });
                },
                duration: 800,
                complete: function () {
                    current_fs.hide();
                    animating = false;
                },
                //this comes from the custom easing plugin
                easing: 'easeInOutBack'
            });
        });
        $(".previous2").click(function () {
            if (animating) return false;
            animating = true;
            current_fs = $(this).parent();
            trans_progbar = $(this).parent().prev().prev();
            previous_fs = $(this).parent().prev().prev();
            //de-activate current step on progressbar
            $("#progressbar li").eq($("fieldset").index(trans_progbar)).removeClass("active");
            //show the previous fieldset
            previous_fs.show();
            //hide the current fieldset with style
            current_fs.animate({
                opacity: 0
            }, {
                step: function (now, mx) {
                    //as the opacity of current_fs reduces to 0 - stored in "now"
                    //1. scale previous_fs from 80% to 100%
                    scale = 0.8 + (1 - now) * 0.2;
                    //2. take current_fs to the right(50%) - from 0%
                    left = ((1 - now) * 50) + "%";
                    //3. increase opacity of previous_fs to 1 as it moves in
                    opacity = 1 - now;
                    current_fs.css({
                        'left': left
                    });
                    previous_fs.css({
                        'transform': 'scale(' + scale + ')',
                        'opacity': opacity
                    });
                },
                duration: 800,
                complete: function () {
                    current_fs.hide();
                    animating = false;
                },
                //this comes from the custom easing plugin
                easing: 'easeInOutBack'
            });
        });
        $(".previous3").click(function () {
            if (animating) return false;
            animating = true;
            current_fs = $(this).parent();
            trans_progbar = $(this).parent().prev();
            previous_fs = $(this).parent().prev().prev();
            //de-activate current step on progressbar
            $("#progressbar li").eq($("fieldset").index(trans_progbar)).removeClass("active");
            //show the previous fieldset
            previous_fs.show();
            //hide the current fieldset with style
            current_fs.animate({
                opacity: 0
            }, {
                step: function (now, mx) {
                    //as the opacity of current_fs reduces to 0 - stored in "now"
                    //1. scale previous_fs from 80% to 100%
                    scale = 0.8 + (1 - now) * 0.2;
                    //2. take current_fs to the right(50%) - from 0%
                    left = ((1 - now) * 50) + "%";
                    //3. increase opacity of previous_fs to 1 as it moves in
                    opacity = 1 - now;
                    current_fs.css({
                        'left': left
                    });
                    previous_fs.css({
                        'transform': 'scale(' + scale + ')',
                        'opacity': opacity
                    });
                },
                duration: 800,
                complete: function () {
                    current_fs.hide();
                    animating = false;
                },
                //this comes from the custom easing plugin
                easing: 'easeInOutBack'
            });
        });
        $(".previous4").click(function () {
            if (animating) return false;
            animating = true;
            current_fs = $(this).parent();
            trans_progbar = $(this).parent().prev().prev();
            previous_fs = $(this).parent().prev();
            //de-activate current step on progressbar
            $("#progressbar li").eq($("fieldset").index(trans_progbar)).removeClass("active");
            //show the previous fieldset
            previous_fs.show();
            //hide the current fieldset with style
            current_fs.animate({
                opacity: 0
            }, {
                step: function (now, mx) {
                    //as the opacity of current_fs reduces to 0 - stored in "now"
                    //1. scale previous_fs from 80% to 100%
                    scale = 0.8 + (1 - now) * 0.2;
                    //2. take current_fs to the right(50%) - from 0%
                    left = ((1 - now) * 50) + "%";
                    //3. increase opacity of previous_fs to 1 as it moves in
                    opacity = 1 - now;
                    current_fs.css({
                        'left': left
                    });
                    previous_fs.css({
                        'transform': 'scale(' + scale + ')',
                        'opacity': opacity
                    });
                },
                duration: 800,
                complete: function () {
                    current_fs.hide();
                    animating = false;
                },
                //this comes from the custom easing plugin
                easing: 'easeInOutBack'
            });
        });
        $(".submit").click(function () {
            return false;
        })
    };
    //* Add Phone no select... Idk how this affects it but it changes the size of the dropdown fields. DONT DELETE IT!
    function phoneNoselect() {
        if ($('#msform').length) {
            $("#phone").intlTelInput();
            $("#phone").intlTelInput("setNumber", "+880");
        };
    };
    //* Select js
    function nice_Select() {
        if ($('.product_select').length) {
            $('select').niceSelect();
        };
    };
    /*Function Calls*/
    verificationForm();
    phoneNoselect();
    nice_Select();
})(jQuery);
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS