Betiok
5/20/2017 - 4:22 PM

Quote Form

Quote Form

.overlay {
    background: #000;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease 0s;
    }

.show-form .overlay {
    visibility: visible;
    opacity: 0.5;
}

.book-consultation-form {
    background: #000;
    position: fixed;
    width: 100%;
    height: 100%;
    max-width: 600px;
    right: -100%;
    top: 0;
    z-index: 999;
    padding: 0;
    transition: all 0.3s ease 0s;
}

.show-form .book-consultation-form {
    right: 0;
}
/* Toggle Form */

$('.btn-inquire').click(function(ev){
    ev.preventDefault();
    $('body').toggleClass('show-form');
});

$('.overlay, .btn-close').click(function(ev){
    ev.preventDefault();
    $('body').removeClass('show-form');
});
<div class="btn-inquire">
    <?php _e( 'Inquire Now', 'html5blank' ); ?>
</div>

<div class="book-consultation-form-wrap">
    <div class="book-consultation-form">
        <div class="btn-inquire">
            <?php _e( 'Inquire Now', 'html5blank' ); ?>
        </div>

        <span class="btn-close"></span>

        <?php if ( shortcode_exists( 'contact-form-7' ) ) {
            echo do_shortcode('[contact-form-7 id="1"]');
        } ?>
    </div>
</div>
<div class="overlay"></div>