Slide-In Contact Form Menggunakan JQuery

Hallo sahabat dumenity berjumpa lagi dalam tutorial dumetschool, pada tutorial kali ini saya akan membahas tentang Slide-In Contact Form Menggunakan JQuery. Dalam tutorial ini, mari kita lihat bagaimana membuat form kontak Slide-In menggunakan jQuery.  Dalam contoh ini, saya telah menunjukkan tombol kontak di bagian atas konten halaman. Pada event klik tombol ini, saya mengalihkan tampilan formulir kontak dengan efek geser dengan mengendalikan visibilitas elemen formulir menggunakan fungsi jQuery slideDown () dan slideUp ().

Saat pengguna memasukkan dan mengirimkan informasi kontak dengan menggeser formulir kontak, fungsi Ajax jQuery akan dipanggil. Fungsi ini memanggil file PHP untuk meminta pengiriman email kontak ke penerima yang ditentukan. Setelah menjalankan script mail, kode PHP akan merespon status mail terkirim. Setelah menunjukkan respons ini ke browser, formulir kontak akan meluncur ke atas. Dalam contoh ini, saya telah menggunakan fungsi mail in-built PHP. Teman – teman bisa mengganti script email PHP dengan kode pengiriman email menggunakan Gmail SMTP.

Slide-In Contact Form HTML

Di bawah kode HTML yang digunakan untuk membuat slide-in contact form. Kode ini berisi link tombol kontak yang akan memicu fungsi jQuery untuk menjalankan skrip geser. Setelah memasukkan kolom formulir, tombol kirim digunakan untuk memvalidasi input form kontak yang dimasukkan oleh pengguna dan meminta AJAX untuk meminta document PHP.

<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 fungsi jQuery

Skrip jQuery ini digunakan untuk memanggil fungsi slideDown () dan slideUp () saat menampilkan form kontak toggling. Juga, saya telah menentukan kode untuk mengirimkan permintaan skrip  PHP pada formulir kirim. Saat mengirimkan formulir kontak, skrip email akan merespons permintaan AJAX. Respon ini akan digunakan untuk mengenali pengguna. Setelah mengenali pengguna, formulir kontak akan meluncur ke atas.

<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>

Oke untuk melihat hasilnya silahakan teman – teman coba sendiri, itulah tadi pembahasan saya tentang Slide-In Contact Form Menggunakan JQuery. Semoga bermanfat.