Frontend Free Code

Frontend Free Code

Developers Codes

Javascript Codes

Suggested Posts

Feel The Power

Bootstrap Forms:

Dynamic Contact Form with Bootstrap

Previous Code Next Code

Contact form is an essential element for all websites, and you have to care about this factor because most visitors and audiences like to contact the website’s owner. We have provided the Dynamic Contact Form with Bootstrap for you to use functionally in this post. This Dynamic HTML Form helps the website’s owner have a good relationship with your audience and use their attitudes and criticisms. As you can see here, this Dynamic Contact Form has a beautiful design and can attract many people easily. The main theme of this bootstrap is green and blue. The right part is blue, and the left side is green.

These Bootstrap Forms have a dark green background. The title for contacting is white. Plus, there are three fields in this bootstrap, and they are white. You can see three related icons next to each part. The first section is for the student’s name with a graduated student icon. The second one is for the student’s phone with a cellphone icon. Finally, the last field is for the student’s email with an “@” icon. If you want to use more information, you can easily select “Add,” and other fields appear in this Contact Form Effect.

#

Bootstrap Forms

#

Dynamic Contact Form

#

Contact Form Effect

#

Dynamic HTML Form

<!-- This script got from 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://frontendfreecode.com">Free Frontend</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 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">Free Frontend</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

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