Bootstrap Snippet Nice E-Mail form in Modal/Window 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="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
                <!-- The Modal -->
                <div class="modal fade" style="display:none;" id="sendMail">
                    <div class="modal-dialog" role="dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Cancel">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                            </button>
                            <h4 class="modal-title"><span class="glyphicon glyphicon-envelope" style="color:#dee3f0;"></span> Send E-Mail</h4>
                        </div>
                    <div class="modal-body">
                        <form name="emailModal" id="emailModal" method="post" action="PATH TO YOUR MAIL SCRIPT HERE">
                        <div class="input-group">
                            <label for "email">E-Mail:</label>
                            <input name="email" class="form-control" type="email" autofocus id="email" form="emailModal" placeholder="E-Mail">
                        </div>
                    <br />  
                        <div class="checkbox-slider--b-flat checkbox-slider-md">
                            <label>
                            <input type="checkbox" id="addMail"><span>·Send a copy to another E-Mail address</span>
                            </label>
                        </div>
                    <div class="input-group" id="mailCC" style="display: none;">
                        <br />
                    <label for "mailCC">CC:</label>
                        <input name="email2" class="form-control" type="email" form="emailModal" placeholder="CC E-Mail address ">
                    </div>
                </div>
                        <div class="modal-footer">
                            <button type="submit" form="emailModal" class="btn btn-success" style="background-color: #2597cd;"><span class="glyphicon glyphicon-send"></span>·Send it!</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                            </form>
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
/* "Titatoggle" Toggle Button/Checkbox by Jan Enning - https://github.com/kleinejan */
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600italic,900italic,200italic,200,700italic);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700);
h4.modal-title {
color: #f0f0f0;
font-family: 'Roboto Slab';
font-weight: 600;
font-size: 22px;
}
.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}
.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  -o-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
$(function() {  
    $( '#addMail' ).on('change', function (){
        if (this.checked) {
            $("#mailCC").show();    
        } else {
            $("#mailCC").hide();
        }
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Nice E-Mail form in Modal/Window"
Bootstrap 3.2.0 Snippet by atchoo78

Related: See More

Questions / Comments:

"Nice E-Mail form in Modal/Window" Bootstrap 3.2.0 Snippet by atchoo78

Related: See More

Questions / Comments:

"Nice E-Mail form in Modal/Window"
Bootstrap 3.2.0 Snippet by atchoo78