Bootstrap Snippet show hide form using HTML CSS jQuery

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/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<div class="fix_btn">
        <button type="button" class="btn btn-success btn-rounded waves-effect waves-light" data-toggle="tooltip" data-placement="right" title="" data-original-title="Contact Form">Contact Now</button>
    </div>
    <div class="main_contact_form my_form d-block d-lg-block d-md-block d-sm-block">
        <div class="card">
            <div class="card-body px-lg-5">
                <form class="text-center" style="color: #757575;" method="post" name="myform" id="myform">
                    <p>Intrested in Bhumiraj Hills</p>
                    <p style="color: #d2ab66;">1BHK | 2BHK</p>
                    <div class="md-form mt-3 d-control">
                        <input type="text" id="materialSubscriptionFormPasswords" class="form-control name" name="name" onkeyup="realty1();" onblur="check1();">
                        <label for="materialSubscriptionFormPasswords" style="color: #fff;">Name</label>
                    </div>
                    <div class="md-form d-control">
                        <input type="text" id="materialSubscriptionFormEmail" class="form-control  email" name="email" onkeyup="realty2();" onblur="check2();">
                        <label for="materialSubscriptionFormEmail" style="color: #fff;">E-mail</label>
                    </div>
                    <div class="md-form d-control">
                        <input type="text" id="materialSubscriptionFormEmail" class="form-control d-control mobile" name="mobile" onkeyup="realty3();numberMobile(event);" onblur="check3();">
                        <label for="materialSubscriptionFormEmail" style="color: #fff;">Mobile</label>
                        
                    </div>
                        <input type="hidden" name="comment" id="comment" value="Interested Bhumiraaj Hills">
                        <input type="hidden" name="action" id="action" value="quick">
                    
                    <button type="button" class="btn btn-success btn-rounded waves-effect waves-light" onclick="formdata();">Submit</button>
                </form>
            </div>
        </div>
        <div class="hider_form_box" style="display: none;">
            <span id="frm_hdr_box"><i class="fas fa-chevron-left  animated tada infinite" style="overflow: hidden;"></i></span>
        </div>
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
.fix_btn {
    position: fixed;
    top: 236px;
    left: -20px;
    z-index: 9;
    transform: rotate(270deg);
    transform: translate(270deg);
}
label{
    color:#000;
}
.main_contact_form {
    position: fixed;
    top: 121px;
    z-index: 9;
    width: 364px;
    margin-left: -364px;
    transition: .5s
}
.dstyleform {
    position: fixed;
    top: 121px;
    z-index: 999;
    left: 0px;
    width: 364px;
    transition: .5s;
}
.hider_form_box {
    position: absolute;
    left: 364px;
    top: 185px;
    height: 30px;
    width: 30px;
    background: red;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    $(document).ready(function() {
        $('.fix_btn').click(function() {
            $('.my_form').removeClass('main_contact_form').addClass('dstyleform');
            $('.fix_btn').hide();
            $('.hider_form_box').show();
        });
        $('.hider_form_box').click(function() {
            $('.my_form').removeClass('dstyleform').addClass('main_contact_form');
            $('.fix_btn').show();
            $('.hider_form_box').hide();
        });
    });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"show hide form"
Bootstrap 4.1.1 Snippet by durgesh361

Related: See More

Questions / Comments:

"show hide form" Bootstrap 4.1.1 Snippet by durgesh361

Related: See More

Questions / Comments:

"show hide form"
Bootstrap 4.1.1 Snippet by durgesh361