Bootstrap Snippet Simple Subscribe form using HTML CSS Bootstrap 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.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<section>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
        <hgroup>
          <h2>
            Subscribe for
            <div class="dropdown frecuency">
                <input type="text" id="frecuency" value="0" />
                <span class="dropdown-toggle" type="button" data-toggle="dropdown">
                    weekly
                    <span class="caret"></span>
                </span>
                <ul class="dropdown-menu" role="menu">
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-val="0">
                        daily 
                        <span class="glyphicon glyphicon-ok"></span>
                    </a></li>
                    <li class="selected" role="presentation"><a role="menuitem" tabindex="-1" href="#" data-val="1">
                        weekly
                        <span class="glyphicon glyphicon-ok"></span>
                    </a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-val="2">
                        monthly 
                        <span class="glyphicon glyphicon-ok"></span>
                    </a></li>
                </ul>
            </div>
            newsletter 
          </h2>
          <h1 class="free">For Free</h1>
         </hgroup>
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
section {
    padding: 100px 0;
    text-align: center;
}
.frecuency {
    display: inline-block;
    border: none;
    font-style: italic;
    background-color: transparent;
    cursor: pointer;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform .35s ease-in;
    transition: -webkit-transform .35s ease-in;
    border-bottom: none;
    padding-bottom: 2px;
}
.frecuency > input {
    display: none;
}
.frecuency:focus,
.frecuency.open {
    outline: none;
    border-bottom: 5px solid #39b3d7;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-transition: -webkit-transform .35s ease-in;
    transition: -webkit-transform .35s ease-in;
}
.frecuency .dropdown-menu {
    margin-top: 10px;
    border-radius: 0px;
    text-align: left;
    min-width: 100px;
}
.frecuency .dropdown-menu > li > a {
    position: relative;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
$(function () {
    $('.frecuency .dropdown-menu > li > a').on('click', function(event) {
        var $control = $(this).closest('.dropdown'),
            caret = '<span class="caret"></span>';
        
        $control.find('input').val($(this).data('val'));
        $control.find('.dropdown-toggle').html($(this).text() + caret);
        $control.find('.dropdown-menu > li.selected').removeClass('selected');
        $(this).closest('li').addClass('selected');
    }); 
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Simple Subscribe form"
Bootstrap 3.1.0 Snippet by mouse0270

Related: See More

Questions / Comments:

"Simple Subscribe form" Bootstrap 3.1.0 Snippet by mouse0270

Related: See More

Questions / Comments:

"Simple Subscribe form"
Bootstrap 3.1.0 Snippet by mouse0270