"Submit Form"
Bootstrap 3.3.0 Snippet by castcaller

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse0">
<div class="row">
<div class="col-md-1"><div class="step s0">1</div></div>
<div class="col-md-11 step-text">List your Casting Call</div>
</div>
</a>
</h4>
</div>
<div id="collapse0" class="panel-collapse collapse in">
<div class="panel-body">
<div class="line-wizard l1"></div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-11 step-text">
<div class="form-group">
<div class="input-group margin-bottom-sm col-sm-4 col-xs-12">
<span class="input-group-addon"><i class="fa fa-film fa-fw" aria-hidden="true"></i></span>
<input class="form-control" type="text" placeholder="Project Title">
</div>
<br>
<div class="input-group margin-bottom-sm col-sm-4 col-xs-12">
<span class="input-group-addon"><i class="fa fa-briefcase fa-fw" aria-hidden="true"></i></span>
<input class="form-control" type="text" placeholder="Company Name">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.step {
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 25px;
color: #fff;
line-height: 50px;
text-align: center !important;
background: #5bc0de;
transition: all 1s;
}
.step-ok {
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 25px;
color: #fff;
line-height: 50px;
text-align: center !important;
background: #39B54A;
}
.step-fll-prev {
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 30px !important;
text-align: center !important;
cursor: pointer;
}
.step-fll {
color: #fff;
margin-left: 3px;
line-height: 38px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(function() {
$('.next').click(function() {
var numStep = $(this).attr( "num-step" );
var clStep = '#collapse' + (parseInt(numStep) + 1);
$(clStep).collapse('show');
$('#accordion .in').collapse('hide');
console.log(clStep);
/*cambiar estilo e imagen a botón*/
$('.s' + numStep).addClass('step-ok').removeClass('step');
$('.s' + numStep).empty().append('<i class=\"fa fa-check\" aria-hidden=\"true\"><\/i>');
});
$('.prev').click(function() {
var numStep = $(this).attr( "num-step" );
var clStep = '#collapse' + (parseInt(numStep) - 1);
$(clStep).collapse('show');
$('#accordion .in').collapse('hide');
});
$('.btn-primary').click(function() {
var delay = 4000;
setTimeout(function(){ window.location = 'p3'; }, delay);
});
$('.btn-secondary').click(function() {
$('.step-ok').addClass('step').removeClass('step-ok');
$('.s0').empty().append('1');
$('.s1').empty().append('2');
$('#collapse0').collapse('show');
$('#accordion .in').collapse('hide');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit
login-form
Login Form
Contact Form

Questions / Comments: