Floating Contact Form using jQuery AJAX

jQuery floating contact form gives modern look and feel to our website. This tutorial has an example to show a sticky floating contact form in a webpage. In this example, we have a contact icon which will be sliding up and down based on the page scroll. On clicking this icon the contact form display is controlled by jQuery show hide effect.

View DemoDownload

Floating Contact Form

Initially, we are showing sticky contact icon to slide over the content scroll. On clicking this icon, the contact form will be floated on the content area.

jquery-floating-contact

The floating contact form markup is,

<div id="contact-box">
	<div id="btnContact" onClick="showContact();"><img src="contact.png" /></div>
	<div id="frmContact">
		<div id="mail-status"></div>
		<div>
			<label style="padding-top:20px;">Name</label>
			<span id="userName-info" class="info"></span><br/>
			<input type="text" name="userName" id="userName" class="demoInputBox">
		</div>
		<div>
			<label>Email</label>
			<span id="userEmail-info" class="info"></span><br/>
			<input type="text" name="userEmail" id="userEmail" class="demoInputBox">
		</div>
		<div>
			<label>Subject</label> 
			<span id="subject-info" class="info"></span><br/>
			<input type="text" name="subject" id="subject" class="demoInputBox">
		</div>
		<div>
			<label>Content</label> 
			<span id="content-info" class="info"></span><br/>
			<textarea name="content" id="content" class="demoInputBox" cols="60" rows="6"></textarea>
		</div>
		<div>
			<button name="submit" class="btnAction" onClick="sendContact();">Send</button>
		</div>
	</div>
</div>
<div class="txt-content"><!-- content area --></div>

jQuery Sticky Floating

We are using jQuery sticky-float plugin to create sticky floating effect to the contact form on page scroll. We should call the plugin function like,

$(document).ready(function() {
	$('#contact-box').stickyfloat({ duration: 400, offsetY:200});
});

The contact-box selector which includes both contact icon and form to be floated with the content on scrolling. The showContat() function will invoked on clicking contact icon to display contact form. The function is,

function showContact() { 
	if ($("#frmContact").css('display')=='none')	$("#frmContact").show();
	else	$("#frmContact").hide();
}

Other than that, we have contact form jQuery validation, mail sending scripts as we have seen in previous contact form tutorials. Download source to get complete code.

View DemoDownload

This jQuery code tutorial was published on October 29, 2014.

↑ Back to Top