michael2
9/11/2017 - 12:41 AM

u4 enquire form - request callback merged > easy to use > responsive example here: http://www.weddingcarriages.com.au/index.html

u4 enquire form - request callback merged > easy to use > responsive

example here: http://www.weddingcarriages.com.au/index.html

u4.html
content_copyfile_download
<div id="enquire-dropdown">
<a class="enquire-trigger closeBtn">&#xf00d;</a>
    <div class="container">
        <div class="flexRow">
            <div class="dropContact col-2 mobile-hide">
                <h3>Contact Us</h3>

                <!----  CONTACT DETAILS ------>
                <!----  COPY HTML From Contact Page ------>
                <!----  CONTACT DETAILS ------>

            </div>
            <!----  ONLINE ENQUIRY ------>
            <div class="mceNonEditable col-2">
                <form action="/havealook/servlet/Havealook" method="post" name="form7" onsubmit="return validate7()">
                    <input type="hidden" name="screen" value="emailForm" />
                    <input type="hidden" name="mailTo" value="EMAIL" />
                    <input type="hidden" name="returnTo" value="/thank-you.html" />
                    <input type="hidden" name="showAll" value="false" />
                    <div id="enquiry" class="contact">
                        <h3>Online Enquiry</h3>
                        <div class="enqRow">
                            <span class="name FontAwesome"></span>
                            <input type="text" name="a_Name" maxlength="250" placeholder="Full Name*" />
                        </div>
                        <div class="enqRow">
                            <span class="phone FontAwesome"></span>
                            <input type="tel" name="b_Phone" maxlength="250" placeholder="Phone*" />
                        </div>
                        <div class="enqRow">
                            <span class="email FontAwesome"></span>
                            <input type="text" name="c_Email" maxlength="250" placeholder="Email*" />
                        </div>
                        <!--
                        <div class="enqRow alignLeft"><span>Please call me back</span>
                            <input type="checkbox" name="d_Please_call_me_back" value="Please call me back">
                        </div>
                        <div class="enqRow">
                            <span class="clock FontAwesome"></span>
                            <input type="text" name="e_Best_time_to_Call" maxlength="250" placeholder="Best time to Call">
                        </div>
                        -->
                        <div class="enqRow">
                            <span class="question FontAwesome"></span>
                            <textarea name="ZZ_Comments" placeholder="Enquiry"></textarea>
                            <div class="required">* Required fields</div>
                        </div>
                        <div class="enqRow">
                            <input class="button" type="submit" name="email" value="Send" />
                        </div>
                    </div>
                </form>
            </div>
            <!---- END ONLINE ENQUIRY ------>
        </div>
    </div>
</div>
new_gist_file.css
content_copyfile_download
/*Add to Home Screen Button */

.addtohome, .addtohome * {
  
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

.addtohome {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 20px;  
  margin: auto;
  display: none;
  z-index: 1000000;  
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;  
  padding: 8px 2%;
}

.addToHome .flexCenter {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
           
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
}

.addToHomeLogo {
  display: inline-block;
  width: 65px;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
}
.addToHomeLogo img {
  width: 100%;
  height: auto;
}

.addtohome .addHomeText {
  display: inline-block;
  width: calc(94% - 65px);
  margin-left: 2%;
  color: #fff;
  font-weight: 300;
  font-size: 0.85em;
  line-height: 1.4em;
  padding: 8px 0 6px;
}
.addIcon {
  margin: 0 2px;
  width: 12px;
  height: 12px;
  display: inline-block;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  position: relative
}
.addIcon:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  height: 1px;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
}
.addIcon:after {
  content: "\f176";
  font-family: FontAwesome;
  font-size: 10px;
  position: absolute;
  top: -10px;
  left: 3px;
  margin: auto;
}
.addtohome:after {
  position: absolute;
  bottom: -10px;
  left: 46%;
  width: 0px;
  height: 0px;
  content: "";
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(0, 0, 0, .8);
}
.addtohome:before {
  content:  "\f057";
  font-family: FontAwesome;
  color: #fff;
  position: absolute;
  top: 1px;
  right: 3px;
}



/* Drop Down Enquiry */

#enquire-dropdown {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.95);
    display: none;
    overflow: hidden;
}

#enquire-dropdown .container {
    width: 100%;
    height: 100%;
    height: 100vh;
    max-width: 1100px !important;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: initial;
}

#enquire-dropdown .flexRow {
    width: 100%;
    text-align: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    /*-webkit-align-items: center;
   -ms-flex-align: center;
           align-items: center;*/
    -webkit-justify-content: space-between;
    -ms-flex-pack: justfiy;
    justify-content: space-between;
}

#enquire-dropdown .col-2 {
    width: calc(50% - 20px);
    margin: 10px;
}

#enquire-dropdown #enquiry {
    color: #fff;
    background: none;
    font-size: 1em;
    width: 100%;
    max-width: 450px;
    margin: auto;
    float: none;
}

.dropContact {
    text-align: center;
    color: #fff;
    border-right: 1px solid rgba(255,255,255,0.5);
}

#enquire-dropdown h3 {
    color: #fff;
    margin-bottom: 25px;
    font-size: 1.8em;
    font-weight: inherit;
    text-align: center;
}

#enquire-dropdown #enquiry input,
#enquire-dropdown #enquiry textarea {
    border: none;
    padding: 7px 15px 7px 45px;
    -webkit-appearance: none;
    /*border-radius: 15px;*/
    font-family: inherit;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    width: 100% !important;
    font-size: 0.9em;
    box-sizing: border-box;
}

#enquire-dropdown #enquiry input[type="submit"] {
    margin-bottom: 10px;
    border: 0;
    color: #fff;
    padding: 10px 0;
    cursor: pointer;
    width: 100%;
}

.alignLeft {
    text-align: left;
    padding: 4px 25px;
    font-size: 0.9em;
}

#enquire-dropdown #enquiry .alignLeft input {
    width: auto !important;
    display: inline-block;
    margin: 0 15px;
    background: rgba(255, 255, 255, 0);
    -webkit-appearance: checkbox;
}

.required {
    font-size: 0.9em;
    text-align: left;
}

.closeBtn {
    color: #fff !important;
    background: none !important;
    font-size: 2.8em;
    font-weight: 100;
    letter-spacing: 1px;
    padding: 2px 13px;
    position: absolute;
    right: 20px;
    text-decoration: none;
    text-transform: uppercase;
    top: 20px;
    line-height: 1.6em;
    font-family: FontAwesome;
    cursor: pointer;
}

.closeBtn,
#enquire-dropdown #enquiry input[type="submit"] {
    -moz-transition: .25s;
    -webkit-transition: .25s;
    -ms-transition: .25s;
    -o-transition: .25s;
    transition: .25s;
}

/*  INPUT ICONS */

#enquire-dropdown .enqRow {
    position: relative;
}

#enquire-dropdown .enqRow span.FontAwesome {
    position: absolute;
    top: 8px;
    left: 28px;
    font-size: 0.9em;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#enquire-dropdown .enqRow span.FontAwesome:before {
    font-family: FontAwesome;
}

#enquire-dropdown .phone:before {
    content: "\f095";
}

#enquire-dropdown .email:before {
    content: "\f003";
}

#enquire-dropdown .name:before {
    content: "\f007";
}

#enquire-dropdown .question:before {
    content: "\f0e6";
}

#enquire-dropdown .clock:before {
    content: "\f017";
}


#enquire-dropdown ::-webkit-input-placeholder {
    color: #fff;
    opacity: 0.6;
}

#enquire-dropdown :-moz-placeholder {
    color: #fff;
    opacity: 0.6;
}

#enquire-dropdown ::-moz-placeholder {
    color: #fff;
    opacity: 0.6;
}

#enquire-dropdown :-ms-input-placeholder {
    color: #fff;
    opacity: 0.6;
}

/* MEDIA QUERIES */

@media all and (max-width: 700px) and (min-width: 0px) {
    #enquire-dropdown .mobile-hide {
        display: none !important;
    }
    #enquire-dropdown .col-2 {
        width: calc(100% - 20px);
    }
}

/* COLOR MODIFIER */

.closeBtn:hover,
.closeBtn:active,
#enquire-dropdown .enqRow span.FontAwesome:before, #enquire-dropdown a {
    color: #2ea547 !important;
}

#enquire-dropdown a:hover {
    color: #fff;
}

#enquire-dropdown #enquiry input[type="submit"] {
    background: #2ea547 !important;
}

#enquire-dropdown #enquiry input[type="submit"]:hover, #enquire-dropdown #enquiry input[type="submit"]:active {
    background: #000 !important;
}
link html.html
content_copyfile_download
<a class="enquiry enquire-trigger" href="#enquire-dropdown">Enquire Online</a>
footer.js
content_copyfile_download
<script type="text/javascript">
$(document).ready(function() {
    //DROP DOWN CODE
    $('.enquire-trigger').click(function() {
        $('#enquire-dropdown').slideToggle(500, function() { // CHANGE 'slow' to 'fast' if you want it faster or use a number without ' ' 1000=1sec
            // Animation complete.
        });
    });


    //CALLBACK CODE
    $('a.fancybox-media')
        .attr('rel', 'media-gallery')
        .fancybox({
            openEffect: 'fade',
            closeEffect: 'fade',
            prevEffect: 'none',
            nextEffect: 'none',
            arrows: false,
            helpers: {
                media: {},
                buttons: {}
            }
        });
});


// JAVASCRIPT VALIDATION MUST NOT BE FORM2
function validate7() {

    var errors = 0;

    if (document.form7.a_Name.value.length < 1) {
        alert('Please Enter Name');
        errors++;
    }
    if (document.form7.b_Phone.value.length < 1) {
        alert('Please Enter Phone');
        errors++;
    }
    if (document.form7.c_Email.value.length < 1) {
        alert('Please Enter Email');
        errors++;
    }

    if (errors == 0)
        return true;
    else return false;
}
</script>

<script>
	$(document).ready(function(){
		var isiPhone = navigator.userAgent.toLowerCase().indexOf("iphone") != -1 ? true : false;
		var isiPod   = navigator.userAgent.toLowerCase().indexOf("ipod")   != -1 ? true : false;
		var isChrome = navigator.userAgent.toLowerCase().indexOf("crios")  != -1 ? true : false;


		if( (isiPhone || isiPod) && !isChrome){
		  	addtohome();
		}

	});
  
	function addtohome(){
		$('.addtohome').show();
		$('.addtohome').delay(2000).animate({'bottom':'5px', 'opacity': 1}, 1000);
		$('.addtohome').click(function(){
		$(this).fadeOut();
	});
}
</script>
add_to_pageNames.html
content_copyfile_download
<div class="addtohome">
<div class="flexCenter">
<div class="addToHomeLogo"><img src="/favicon.png" alt="logo"></div>
<div class="addHomeText">Tap <span class="addIcon"></span> and then 'Add to Home Screen' to save this website to your iPhone.</div>
</div>
</div>