content logo

Bootstrap Forms:

Dynamic Contact Form with Bootstrap

We need to use forms in websites where information is to be taken from the user. In this code, we have put the contact form for use. The background of the website in this form is a gradient with a green theme and is the glass form itself. Forms can be added with the add button. This is a responsive form.

#Bootstrap Forms #Dynamic Contact Form #Contact Form Effect #Dynamic HTML Form

<!-- This script got from www.frontendfreecode.com -->
<div class="container h-100">
    <div class="d-flex justify-content-center">
        <div class="card mt-5 col-md-4 animated bounceInDown myForm">
            <div class="card-header">
                <h4>Students Contact Details</h4>
            </div>
            <div class="card-body">
                <form>
                    <div id="dynamic_container">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text br-15"><i class="fas fa-user-graduate"></i></span>
                            </div>
                            <input type="text" placeholder="Student Name" class="form-control" />
                        </div>
                        <div class="input-group mt-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text br-15"><i class="fas fa-phone-square"></i></span>
                            </div>
                            <input type="text" placeholder="Student Phone" class="form-control" />
                        </div>
                        <div class="input-group mt-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text br-15"><i class="fas fa-at"></i></span>
                            </div>
                            <input type="email" placeholder="Student Email" class="form-control" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-footer">
                <a class="btn btn-secondary btn-sm" id="add_more"><i class="fas fa-plus-circle"></i> Add</a>
                <a class="btn btn-secondary btn-sm" id="remove_more"><i class="fas fa-trash-alt"></i> Remove</a>
                <button class="btn btn-success btn-sm float-right submit_btn"><i class="fas fa-arrow-alt-circle-right"></i> Submit</button>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Free Code</a>
                                                                            
html,
body {
    height: 100%;
    margin: 0;
    background: rgb(2, 0, 36);
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(149, 199, 20, 1) 0%, rgba(0, 212, 255, 1) 96%);
}
.myForm {
    background-color: rgba(0, 0, 0, 0.5) !important;
    padding: 15px !important;
    border-radius: 15px !important;
    color: white;
}
input {
    border-radius: 0 15px 15px 0 !important;
}
input:focus {
    outline: none;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
}
.br-15 {
    border-radius: 15px 0 0 15px !important;
}
#add_more {
    color: white !important;
    background-color: #fa8231 !important;
    border-radius: 15px !important;
    border: 0 !important;
}
#remove_more {
    color: white !important;
    background-color: #fc5c65 !important;
    border-radius: 15px !important;
    border: 0 !important;
    display: none;
}
.submit_btn {
    border-radius: 15px !important;
    background-color: #95c714 !important;
    border: 0 !important;
}
var i = 0;
$(document).ready(function () {
    $("#add_more").on("click", function () {
        var colorR = Math.floor(Math.random() * 256);
        var colorG = Math.floor(Math.random() * 256);
        var colorB = Math.floor(Math.random() * 256);
        i++;
        var html =
            '<div id="append_no_' +
            i +
            '" class="animated bounceInLeft">' +
            '<div class="input-group mt-3">' +
            '<div class="input-group-prepend">' +
            '<span class="input-group-text br-15" style="color:rgb(' +
            colorR +
            "," +
            colorG +
            "," +
            colorB +
            '">' +
            '<i class="fas fa-user-graduate"></i></span>' +
            "</div>" +
            '<input type="text" placeholder="Student Name"  class="form-control"/>' +
            "</div>" +
            '<div class="input-group mt-3">' +
            '<div class="input-group-prepend">' +
            '<span class="input-group-text br-15" style="color:rgb(' +
            colorR +
            "," +
            colorG +
            "," +
            colorB +
            '">' +
            '<i class="fas fa-phone-square"></i></span>' +
            "</div>" +
            '<input type="text" placeholder="Student Phone" class="form-control"/>' +
            "</div>" +
            '<div class="input-group mt-3">' +
            '<div class="input-group-prepend">' +
            '<span class="input-group-text br-15" style="color:rgb(' +
            colorR +
            "," +
            colorG +
            "," +
            colorB +
            '">' +
            '<i class="fas fa-at"></i></span>' +
            "</div>" +
            '<input type="email" placeholder="Student Email" class="form-control"/>' +
            "</div></div>";
        $("#dynamic_container").append(html);
        $("#remove_more").fadeIn(function () {
            $(this).show();
        });
    });
    $("#remove_more").on("click", function () {
        $("#append_no_" + i)
            .removeClass("bounceInLeft")
            .addClass("bounceOutRight")
            .fadeOut(function () {
                $(this).remove();
            });
        i--;
        if (i == 0) {
            $("#remove_more").fadeOut(function () {
                $(this).hide();
            });
        }
    });
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.frontendfreecode.com -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<style>
html,
body {
    height: 100%;
    margin: 0;
    background: rgb(2, 0, 36);
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(149, 199, 20, 1) 0%, rgba(0, 212, 255, 1) 96%);
}
.myForm {
    background-color: rgba(0, 0, 0, 0.5) !important;
    padding: 15px !important;
    border-radius: 15px !important;
    color: white;
}
input {
    border-radius: 0 15px 15px 0 !important;
}
input:focus {
    outline: none;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
}
.br-15 {
    border-radius: 15px 0 0 15px !important;
}
#add_more {
    color: white !important;
    background-color: #fa8231 !important;
    border-radius: 15px !important;
    border: 0 !important;
}
#remove_more {
    color: white !important;
    background-color: #fc5c65 !important;
    border-radius: 15px !important;
    border: 0 !important;
    display: none;
}
.submit_btn {
    border-radius: 15px !important;
    background-color: #95c714 !important;
    border: 0 !important;
}
</style>

</head>
<body>
<div class="container h-100">
    <div class="d-flex justify-content-center">
        <div class="card mt-5 col-md-4 animated bounceInDown myForm">
            <div class="card-header">
                <h4>Students Contact Details</h4>
            </div>
            <div class="card-body">
                <form>
                    <div id="dynamic_container">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text br-15"><i class="fas fa-user-graduate"></i></span>
                            </div>
                            <input type="text" placeholder="Student Name" class="form-control" />
                        </div>
                        <div class="input-group mt-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text br-15"><i class="fas fa-phone-square"></i></span>
                            </div>
                            <input type="text" placeholder="Student Phone" class="form-control" />
                        </div>
                        <div class="input-group mt-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text br-15"><i class="fas fa-at"></i></span>
                            </div>
                            <input type="email" placeholder="Student Email" class="form-control" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-footer">
                <a class="btn btn-secondary btn-sm" id="add_more"><i class="fas fa-plus-circle"></i> Add</a>
                <a class="btn btn-secondary btn-sm" id="remove_more"><i class="fas fa-trash-alt"></i> Remove</a>
                <button class="btn btn-success btn-sm float-right submit_btn"><i class="fas fa-arrow-alt-circle-right"></i> Submit</button>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Frontend Free Code</a></div>
<script>
var i = 0;
$(document).ready(function () {
    $("#add_more").on("click", function () {
        var colorR = Math.floor(Math.random() * 256);
        var colorG = Math.floor(Math.random() * 256);
        var colorB = Math.floor(Math.random() * 256);
        i++;
        var html =
            '<div id="append_no_' +
            i +
            '" class="animated bounceInLeft">' +
            '<div class="input-group mt-3">' +
            '<div class="input-group-prepend">' +
            '<span class="input-group-text br-15" style="color:rgb(' +
            colorR +
            "," +
            colorG +
            "," +
            colorB +
            '">' +
            '<i class="fas fa-user-graduate"></i></span>' +
            "</div>" +
            '<input type="text" placeholder="Student Name"  class="form-control"/>' +
            "</div>" +
            '<div class="input-group mt-3">' +
            '<div class="input-group-prepend">' +
            '<span class="input-group-text br-15" style="color:rgb(' +
            colorR +
            "," +
            colorG +
            "," +
            colorB +
            '">' +
            '<i class="fas fa-phone-square"></i></span>' +
            "</div>" +
            '<input type="text" placeholder="Student Phone" class="form-control"/>' +
            "</div>" +
            '<div class="input-group mt-3">' +
            '<div class="input-group-prepend">' +
            '<span class="input-group-text br-15" style="color:rgb(' +
            colorR +
            "," +
            colorG +
            "," +
            colorB +
            '">' +
            '<i class="fas fa-at"></i></span>' +
            "</div>" +
            '<input type="email" placeholder="Student Email" class="form-control"/>' +
            "</div></div>";
        $("#dynamic_container").append(html);
        $("#remove_more").fadeIn(function () {
            $(this).show();
        });
    });
    $("#remove_more").on("click", function () {
        $("#append_no_" + i)
            .removeClass("bounceInLeft")
            .addClass("bounceOutRight")
            .fadeOut(function () {
                $(this).remove();
            });
        i--;
        if (i == 0) {
            $("#remove_more").fadeOut(function () {
                $(this).hide();
            });
        }
    });
});
</script>

</body>
</html>
Preview