Bootstrap Forms:

Bootstrap Form with Slide Up/Down Animation

Space is a really big thing in any website. You need physical space to add content and new features to a web page. Also, if your page becomes too busy, then the website will look unprofessional and your traffic decreases. A messy page makes it so that the it’s harder for the users to read and understand what is going on in the page and will make your loading times slower all of which will result in losing visitors and getting a lower overall score in SEO ranking.

Now that you know how important physical space can be in a website, you will probably try not to waste any when designing the next section of your site. There are many tricks and methods you can use to save up some space and avoid cluttering the page. One of these methods is using Bootstrap CSS forms with slide ability as presented in this post. If you scroll down, you will see a code to a Bootstrap form stylish template which normally hides the form but upon clicking, the form appears with a drop-down animation. This means the form is kept short and to the point and the initial loading time is unaffected by the Bootstrap forms effect which is such a great thing.

Bootstrap Forms Effect

Bootstrap Form Stylish

Bootstrap CSS Forms

<!-- This script got from frontendfreecode.com -->
<div class="conatiner">
    <h2>SlideUp and SlideDown effect with CSS Animation</h2>
    <hr />
    <div class="mb-4">
        <button type="button" class="btn btn-secondary mr-2" data-target="slide-down">Slide Down</button>
        <button type="button" class="btn btn-info" data-target="slide-up">Slide Up</button>
    </div>
    <div class="card" data-target="slide-content">
        <div class="card-body">
            <form class="needs-validation" novalidate>
                <div class="form-group">
                    <label for="exampleInputPassword1">Name</label>
                    <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" required>
                    <div class="invalid-feedback">
                        You must enter email before submitting.
                    </div>
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required>
                    <div class="invalid-feedback">
                        You must enter email before submitting.
                    </div>
                </div>
                <button class="btn btn-primary" type="submit">Submit form</button>
            </form>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

html,
body {
    padding: 30px;
}

[data-target=slide-content] {
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.slide-down {
    animation: slide-down 0.3s linear both;
}

.slide-up {
    animation: slide-up 0.3s linear both;
}

@keyframes slide-down {
    0% {
        visibility: hidden;
        height: 0;
    }

    95% {
        visibility: visible;
        height: 250px;
    }
    /* Set height to 'auto' after animation for spacing showing form-invalid feedback message */
    100% {
        visibility: visible;
        height: auto;
    }
}

@keyframes slide-up {
    from {
        visibility: visible;
        height: 250px;
    }

    to {
        visibility: hidden;
        height: 0;
    }
}

const slideUpBtn = document.querySelector('[data-target="slide-up"]');
const slideDownBtn = document.querySelector('[data-target="slide-down"]');
const slideContent = document.querySelector('[data-target="slide-content"]');
slideDownBtn.addEventListener("click", slideDown);
slideUpBtn.addEventListener("click", slideUp);

function slideDown(e) {
    e.preventDefault();
    slideContent.classList.add("slide-down");
    slideContent.classList.remove("slide-up");
}

function slideUp(e) {
    e.preventDefault();
    slideContent.classList.add("slide-up");
    slideContent.classList.remove("slide-down");
}
(function () {
    "use strict";
    window.addEventListener(
        "load",
        function () {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName("needs-validation");
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function (form) {
                form.addEventListener(
                    "submit",
                    function (event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add("was-validated");
                    },
                    false
                );
            });
        },
        false
    );
})();

<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css'>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js'></script>

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

<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css'>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js'></script>
<style>
html,
body {
    padding: 30px;
}

[data-target=slide-content] {
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.slide-down {
    animation: slide-down 0.3s linear both;
}

.slide-up {
    animation: slide-up 0.3s linear both;
}

@keyframes slide-down {
    0% {
        visibility: hidden;
        height: 0;
    }

    95% {
        visibility: visible;
        height: 250px;
    }
    /* Set height to 'auto' after animation for spacing showing form-invalid feedback message */
    100% {
        visibility: visible;
        height: auto;
    }
}

@keyframes slide-up {
    from {
        visibility: visible;
        height: 250px;
    }

    to {
        visibility: hidden;
        height: 0;
    }
}
</style>

</head>
<body>
<div class="conatiner">
    <h2>SlideUp and SlideDown effect with CSS Animation</h2>
    <hr />
    <div class="mb-4">
        <button type="button" class="btn btn-secondary mr-2" data-target="slide-down">Slide Down</button>
        <button type="button" class="btn btn-info" data-target="slide-up">Slide Up</button>
    </div>
    <div class="card" data-target="slide-content">
        <div class="card-body">
            <form class="needs-validation" novalidate>
                <div class="form-group">
                    <label for="exampleInputPassword1">Name</label>
                    <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" required>
                    <div class="invalid-feedback">
                        You must enter email before submitting.
                    </div>
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required>
                    <div class="invalid-feedback">
                        You must enter email before submitting.
                    </div>
                </div>
                <button class="btn btn-primary" type="submit">Submit form</button>
            </form>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
const slideUpBtn = document.querySelector('[data-target="slide-up"]');
const slideDownBtn = document.querySelector('[data-target="slide-down"]');
const slideContent = document.querySelector('[data-target="slide-content"]');
slideDownBtn.addEventListener("click", slideDown);
slideUpBtn.addEventListener("click", slideUp);

function slideDown(e) {
    e.preventDefault();
    slideContent.classList.add("slide-down");
    slideContent.classList.remove("slide-up");
}

function slideUp(e) {
    e.preventDefault();
    slideContent.classList.add("slide-up");
    slideContent.classList.remove("slide-down");
}
(function () {
    "use strict";
    window.addEventListener(
        "load",
        function () {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName("needs-validation");
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function (form) {
                form.addEventListener(
                    "submit",
                    function (event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add("was-validated");
                    },
                    false
                );
            });
        },
        false
    );
})();
</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

Bootstrap Accordions	Bootstrap Buttons
Bootstrap Cards	Bootstrap Footers
Bootstrap Forms	Bootstrap Grids
Bootstrap Headers	Bootstrap Paginations
Bootstrap Popups	Bootstrap Progress Bars
Bootstrap Search Boxes	Bootstrap Sidebars
Bootstrap Sliders	Bootstrap Tables
Bootstrap Tabs	Bootstrap Thumbnails
Bootstrap Timeline	Bootstrap Toggle Switches
React Accordions	React Buttons
React Forms	React Headers
React Menus	React Popups
React Progress Bars	React Sidebars

Feel The Power

Bootstrap Forms:

Bootstrap Form with Slide Up/Down Animation

Bootstrap Forms Effect

Bootstrap Form Stylish

Bootstrap CSS Forms