Slide-In Contact Form using jQuery

Last modified on July 12th, 2018 by Vincy.

In this tutorial, let us see how to create a Slide-In contact form using jQuery. In a previous tutorial, we have seen floating contact form while scrolling the web page vertically. In this example, I have shown a contact button on top of the page content. On the click event of this button, I toggled the contact form display with the sliding effect by controlling the visibility of the form element using jQuery slideDown() and slideUp() functions. Previously, we have seen jQuery code example for creating a sliding menu.

kids-hand-shake

When the user enters and submits the contact information by sliding down the contact form, the jQuery Ajax function will be called. This function calls the PHP file to request for sending the contact email to the specified recipient. After executing the mail script, the PHP code will respond the mail sent status. After showing this response to the browser, the contact form will slide up. In this example, I have used PHP in-built mail function. You can replace this PHP mail script with the code for sending email using Gmail SMTP.

View Demo

Slide-In Contact Form HTML 

Below HTML code is used to create a slide-in contact form. This code contains a contact button link which will trigger the jQuery function to execute the sliding script. After entering the form fields, the submit button is used to validate the contact form input entered by the user and to invoke AJAX to request PHP mail script.

<div class="body-content">
    <div id="form-outer">
        <div id="frm-contact">
            <div>
                <input type="text" name="userName" id="userName"
                    class="demoInputBox" PlaceHolder="Name">
            </div>
            <div>
                <input type="text" name="userEmail" id="userEmail"
                    class="demoInputBox" PlaceHolder="Email">
            </div>
            <div>
                <input type="text" name="subject" id="subject"
                    class="demoInputBox" PlaceHolder="Subject">
            </div>
            <div>
                <textarea name="content" id="content"
                    class="demoInputBox" rows="3" PlaceHolder="Content"></textarea>
            </div>
            <div id="mail-status">
                <button name="submit" class="btnAction"
                    onclick="sendContact();">Send</button>
            </div>
        </div>
        <div id="btn-contact">Contact Me</div>
    </div>

    <div class="txt-content">
        <p>Mauris blandit orci id risus tristique, non mattis ante
            finibus. Duis volutpat tempor magna non posuere. Mauris a
            vestibulum ligula, id commodo metus. Proin hendrerit, enim
            at ullamcorper mattis, libero nisi blandit nulla, eu porta
            tortor orci vel ipsum. Curabitur ullamcorper imperdiet lorem
            nec pretium. Morbi finibus, mauris vitae feugiat euismod,
            purus magna blandit nunc, ac tincidunt mi lacus eget leo.</p>
    </div>
</div>

Slide Down/Up jQuery Function

This jQuery script is used to call the slideDown() and slideUp() function while toggling contact form display. Also, I have specified the code for sending the request for the PHP mail script on the form submit. On submitting the contact form, the mail script will respond to the AJAX request. This response will be used to acknowledge the user. After acknowledging the user, the contact form will slide up.

<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {

		$("#btn-contact").on("click", function() {

			if ($("#frm-contact").is(":hidden")) {
				$("#frm-contact").slideDown("slow");
			} else {
				$("#frm-contact").slideUp("slow");
			}
		});

	});

	function sendContact() {
		var valid;
		valid = validateContact();
		if (valid) {
			jQuery.ajax({
				url : "contact_mail.php",
				data : 'userName=' + $("#userName").val() + '&userEmail='
						+ $("#userEmail").val() + '&subject='
						+ $("#subject").val() + '&content=' + $(content).val(),
				type : "POST",
				success : function(data) {
					$("#mail-status").html(data);
					setTimeout(ajaxCallback, 2000);
				},
				error : function() {
				}
			});
		}
	}

	function ajaxCallback() {

		var btnHTML = '<button name="submit" class="btnAction" onclick="sendContact();">Send</button';
		$("#mail-status").html(btnHTML);
		$("#frm-contact").slideUp("slow");
	}

	function validateContact() {
		var valid = true;
		$(".demoInputBox").css('background-color', '');

		if (!$("#userName").val()) {
			$("#userName").css('background-color', '#f7dddd');
			valid = false;
		}
		if (!$("#userEmail").val()) {
			$("#userEmail").css('background-color', '#f7dddd');
			valid = false;
		}
		if (!$("#userEmail").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
			$("#userEmail").css('background-color', '#f7dddd');
			valid = false;
		}
		if (!$("#subject").val()) {
			$("#subject").css('background-color', '#f7dddd');
			valid = false;
		}
		if (!$("#content").val()) {
			$("#content").css('background-color', '#f7dddd');
			valid = false;
		}

		return valid;
	}
</script>

Slide-In Contact Form using jQuery – Output

The screenshot shows the contact form output while sliding down on the click event of the Contact Me button

slide-in-contact-form-output

View DemoDownload

This jQuery code tutorial was published on January 5, 2018.

↑ Back to Top

Share this Article