Bootstrap Snippet Custom Bootstrap Accordion Contact form with <code>$(Document).onclick</code> toggle 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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<aside class="contact-section fixed-bottom">
    <div class="accordion" style="z-index:9999">
        <div class="panel contact-panel">
            <div class="panel-heading accordion-toggle collapsed" role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="color:#fff!important;">
                <span><h5 style="margin-bottom:0!important;"><i class="fa fa-envelope">·</i>Contact Us today to get a quote ·</h5></span>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                    <form class="form-horizontal" role="form" method="post" id="contactForm" name="contactForm">
                        <div class="form-group">
                            <label for="name" class="col-sm-3 control-label">Name</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="" autocomplete="off" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="email" class="col-sm-3 control-label">Email</label>
                            <div class="col-sm-9">
                                <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="" autocomplete="off" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="message" class="col-sm-3 control-label">Message</label>
                            <div class="col-sm-9">
                                <textarea class="form-control" rows="4" name="message" required placeholder="Message Content Here" autocomplete="off" value=""></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="human" class="col-sm-3 control-label">Are You <u><strong>Human</u>?</strong></label>
                            <div class="col-sm-9">
                                <input id="field_human" class="field_human has-error" type="checkbox" required name="human" autocomplete="off">
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
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
*, *:before, *:after {
         -webkit-box-sizing: border-box !important;
            -moz-box-sizing: border-box !important;
                 box-sizing: border-box !important;
}
body {
    width: 100%;
    height: 100%;
    font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
    overflow-x:hidden;
    padding: 0px;
}
html {
    width: 100%;
    height: auto;
    padding: 0px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 35px;
    text-transform: uppercase;
    font-family:"octin-stencil", sans-serif;
    font-style:normal;
    font-weight:800;
    letter-spacing:1px;
}
.text-vertical-center {
    display: table-cell;
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
/*!
    * accordionForms.js - Bootstrap Accordion Hover and Click Event form toggle attribute
    
    * Version: v1.5.7
    * LGPL v3 LICENSE INFO
    * This file is part of a Bootstrap Form Element. Copyright
    * 2015 Soldier-up Designs - Website Development Company.
    * accordionForms.js is a free software: you can redistribute it and/or modify
    * it under the terms of the GNU Lesser General Public License as published by
    * the Free Software Foundation, either version 3 of the License, or
    * (at your option) any later version.
    * accordionForms.js is distributed as a free tool that can help you
    * add a few extra dynamics to your Web Design code. However,
    * this code and any associated code "IS" "WITHOUT ANY WARRANTY";
    * without even the implied warranty of "MERCHANTABILITY" or
    * "FITNESS FOR A PARTICULAR PURPOSE".  See the GNU Lesser
    * General Public License for more details.
    
    * to download source navigate to: http://soldierupdesigns.com/js/bootstrap-accordion.js
*/
/*! 
    ==================== Code Starts Below ======================
*/
//return all check-boxes and unchecked
var checkboxes = document.getElementsByTagName('input');
//check all check all input elements to see if they are check-boxes
for (var i = 0; i < checkboxes.length; i++)
{
    //If the input is a check-box run script else skip over
    if (checkboxes[i].type == 'checkbox')
    {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Custom Bootstrap Accordion Contact form with <code>$(Document).onclick</code> toggle"
Bootstrap 3.3.0 Snippet by blayderunner123

Related: See More

Questions / Comments:

"Custom Bootstrap Accordion Contact form with <code>$(Document).onclick</code> toggle" Bootstrap 3.3.0 Snippet by blayderunner123

Related: See More

Questions / Comments:

"Custom Bootstrap Accordion Contact form with <code>$(Document).onclick</code> toggle"
Bootstrap 3.3.0 Snippet by blayderunner123