Cara menggunakan membuat form contact javascript

Membuat Formulir Kontak Email

Membuat Formulir Kontak Email yang saya maksudkan dalam artikel ini adalah, dimana saat pengunjung website mengirimkan pesan melalui formulir kontak. Maka pesan tersebut diterima melalui email terkait. Ini berbeda dengan Formulir kontak yang tersedia pada sebuah website pada umumnya. Formulir kontak yang tersedia pada sebuah website kebanyakan terkirim ke dashboard admin, dan sebagian website memberikan notifikasi kepada pengelola melalui email saat sebuah pesan dikirim seorang pengunjung. Selanjutnya pengelola website dapat mengambil tindakan atas pesan yang diterima melalui dashboard admin setelah melakukan login terlebih dahulu sebagai admin website.

Karena keberadaan sebuah formulir kontak pada sebuah website sangat penting dan tidak dapat ditinggalkan, dan melalui formulir kontak pengunjung dapat melakukan atau menjalin komunikasi dengan pengelola website tentang hal-hal yang berkaitan dengan website itu sendiri, layanan, produk, fitur, dan banyak lagi.

Hal tersebut tentu sangat baik untuk sebuah website, karena dapat menjadi bagian dari UX Design. Namun bagaimana jika ternyata seorang pengelola website bukanlah orang yang seharusnya menerima pesan tersebut? Dengan kata lain, pengelola website hanyalah seorang webmaster yang diberikan atau memiliki tugas mengelola website saja. Sedangkan pesan yang dikirimkan oleh pengunjung, seharusnya diterima oleh pihak lain, dalam hal ini misalnya pemilik website(Owner).

Karena hal diatas kemudian saya memiliki inisiatif untuk membuat sebuah formulir kontak, dimana pesan yang dikirim pengunjung dapat diterima pihak lain(owner) melalui email.

Cara Membuat Formulir Kontak Email Pada PopojiCms

Untuk Membuat Formulir Kontak Email, yang pertama harus dilakukan adalah membuat sebuah element tema dengan menggunakan CLARK. Tentu dalam hal ini anda harus melakukan instal CLARK terlebih dahulu, dan bagi anda yang belum melakukan instal CLARK, silahkan baca artikel berjudul Cara Instal CLARK dan unduh komponen CLARK di halaman unduhan!

Kebali tentang pembuatan element tema, dalam hal ini sebagai contoh kita akan buat sebuah element tema degan nama "sendmail". Berikut adalah detail pembuatan element sendmail.php:

• Nama Element: sendmail
• Element Untuk TEma: Pilih tema yang anda gunakan
• Tipe Element: Tulis Script
• Judul Meta: Send Mail
• Deskripsi Meta: Send Mail
• Kata Kunci Meta: sendmail
• Pada editor script: Silahkan isi dengan script yang dapat anda copy dari file contact.php
• Tambahkan Style Tema:   No
• Klik Submit

Selanjutnya, pada folder utama website anda(root_directory) buatlah sebuah file php dengan nama contact-form.php, berikut adalah isi dari file contact-form.php

<?php 
//////////////////////////
//Specify default values//
//Tentukan nilai default//
//////////////////////////

//Email Anda(Penerima pesan yang dikirim dari formulir kontak)
//Your E-mail(Recipients of the messages sent from the contact form)
$your_email = '';

//Default Subject
$default_subject = 'Tentukan Subject';

//Notifikasi jika nama tidak sesuai dengan spesifikasi
//Message if 'name' field not specified
$name_not_specified = "<script language='javascript'>
						window.alert('Please type a valid name')
						window.location.href='https://www.yourwebsite.com/sendmail';
					</script>";


//Notifikasi jika pesan tidak sesuai spesifikasi
//Message if 'message' field not specified
$message_not_specified = "<script language='javascript'>
						window.alert('Please type a vaild message')
						window.location.href='https://www.yourwebsite.com/sendmail';
					</script>";

//Notifikasi jika pesan berhasil dikirim
//Message if e-mail sent successfully
$email_was_sent = "<script language='javascript'>
						window.alert('Thank you, your message has been sent. Please be patient waiting for a response from us, because all users must we serve wholeheartedly. Sometimes we give no response to 1 x 24 hours of work.')
						window.location.href='https://www.yourwebsite.com';
					</script>";

//Notifikasi jika pesan gagal dikirim(tidak ada konfigurasi server)
//Message if e-mail not sent (server not configured)
$server_not_configured = "<script language='javascript'>
						window.alert('Sorry, mail server not configured. Contact your webmaster!')
						window.location.href='https://www.yourwebsite.com/contact';
					</script>";


///////////////////////////
//Proses Formulir Kontak //
//Contact Form Processing//
///////////////////////////
$errors = array();
if(isset($_POST['message']) and isset($_POST['name'])) {
	if(!empty($_POST['name']))
		$sender_name = stripslashes(strip_tags(trim($_POST['name'])));

	if(!empty($_POST['message']))
		$message   = stripslashes(strip_tags(trim($_POST['message'])));

	if(!empty($_POST['email']))
		$sender_email = stripslashes(strip_tags(trim($_POST['email'])));

	if(!empty($_POST['subject']))
		$subject   = stripslashes(strip_tags(trim($_POST['subject'])));


	//Message if no sender name was specified
	//Pesan jika nama pengirim tidak ditentukan
	if(empty($sender_name)) {
		$errors[] = $name_not_specified;
	}

	//Message if no message was specified
	//Pesan jika pesan tidak ditentukan
	if(empty($message)) {
		$errors[] = $message_not_specified;
	}

	$from = (!empty($sender_email)) ? 'From: '.$sender_email : '';

	$subject = (!empty($subject)) ? $subject : $default_subject;

	$message = (!empty($message)) ? wordwrap($message, 70) : '';

	//sending message if no errors
	//mengirim pesan jika tidak ada kesalahan
	if(empty($errors)) {
		if (mail($your_email, $subject, $message, $from)) {
			echo $email_was_sent;
		} else {
			$errors[] = $server_not_configured;
			echo implode('<br>', $errors );
		}
	} else {
		echo implode('<br>', $errors );
	}
} else {
	// if "name" or "message" vars not send ('name' attribute of contact form input fields was changed)
	//Jika "nama" atau "pesan" vars tidak mengirim (atribut 'nama' Field input form Kontak berubah)
	echo '"name" and "message" variables were not received by server. Please check "name" attributes for your input fields';
}
?>

Silahkan buka file sendmail.php yang baru saja kita buat menggunakan text editor dan pastikan "name" serta "id" pada setiap field sesuai dengan parameter pada file contact.php atau samakan dengan "name" serta "id" dengan script sendmail.php dibawah ini.

<?=$this->layout('index');?>

  <section id="breadcrumbs" class="light_section with_bottom_border">
    <div class="container">

      <div class="row">
        <div class="col-sm-12">
          <ol class="breadcrumb">
            <li>
              <a href="<?=BASE_URL;?>"><?=$this->e($front_home);?></a>
            </li>
            <li class="active"><h2><a href="<?=BASE_URL.'/contact';?>"><?=$this->e($front_contact);?></a></h2></li>
          </ol>
        </div>

      </div>
    </div>
  </section>


<section id="services" class="light_section parallax">
  <div class="container">
    <div class="row">
      <div class="widget widget_contact col-sm-6">
        <h3><?=$this->e($front_mail_contact);?></h3>
        <form class="contact-form" method="post" action="<?=BASE_URL;?>/contact-form.php">
          <p class="contact-form-name">
            <label for="name"><?=$this->e($front_contact_name);?> <span class="required">*</span></label>
            <input type="text" aria-required="true" size="30" value="" name="name" id="name" class="form-control" placeholder="Name">
          </p>
          <p class="contact-form-email">
            <label for="email"><?=$this->e($front_contact_mail);?> <span class="required">*</span></label>
            <input type="email" aria-required="true" size="30" value="" name="email" id="email" class="form-control" placeholder="Email">
          </p>
          <p class="contact-form-subject">
            <label for="subject"><?=$this->e($front_contact_subject);?> <span class="required">*</span></label>
            <input type="text" aria-required="true" size="30" value="" name="subject" id="subject" class="form-control" placeholder="Subject">
          </p>
          <p class="contact-form-message">
            <label for="message"><?=$this->e($front_contact_massage);?></label>
            <textarea aria-required="true" rows="8" cols="45" name="message" id="message" class="form-control" placeholder="Message"></textarea>
          </p>
          <p class="contact-form-submit vertical-margin-40">
            <!-- div class="g-recaptcha" data-sitekey="<?=$this->pocore()->call->posetting[21]['value'];?>"></div -->
            <!-- <input type="submit" value="Send" id="contact_form_submit" name="contact_submit" class="theme_button"> -->
            <button type="submit" id="contact_form_submit" name="contact_submit" class="theme_button"><i class="rt-icon-sent"></i> <?=$this->e($front_contact_btn);?></button>
          </p>
        </form>
      </div>

      <div class="widget widget_contact col-sm-6">
				<div style="background: url('<?=$this->asset('/example/world-map.png', false)?>') no-repeat center center; background-size: 100%;">
          <p>
            <i class="fa fa-phone"></i><strong><?=$this->e($front_contact_phone);?>: &nbsp;</strong> <?=$this->pocore()->call->posetting[6]['value'];?>
          </p>
				  <p>
				    <strong><i class="rt-icon-mobile"></i><?=$this->e($front_contact_mobile);?>: &nbsp;</strong> 0821 7526 8793 <br>
				  </p>
          <p>
            <i class="rt-icon-email"></i><strong><?=$this->e($front_mail);?>: &nbsp;</strong> <a href="mailto:<?=$this->pocore()->call->posetting[5]['value'];?>"><?=$this->pocore()->call->posetting[5]['value'];?></a>
          </p>
				  <p>
				    <i class="rt-icon-printer"></i><strong><?=$this->e($front_fax);?>: &nbsp;</strong> <?=$this->pocore()->call->posetting[7]['value'];?>
				  </p>
          <p>
            <i class="rt-icon-globe-outline"></i><strong><?=$this->e($front_contact_website);?>: &nbsp;</strong><a href="./"><?=$this->pocore()->call->posetting[1]['value'];?></a>
          </p>
          <p>
            <i class="rt-icon-location-arrow-outline"></i><strong><?=$this->e($front_contact_address);?>: &nbsp;</strong> <?=htmlspecialchars_decode($this->pocore()->call->posetting[8]['value']);?> 
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="light_section">
	<div class="container">
		<div class="row">
			<div class="col-sm-12">
				<div id="map"></div>
			</div>
		</div>
	</div>
</section>


	

Untuk class(style) form sendmail ini dapat anda sesuaikan dengan style yang ada pada tema masing-masing.

UPDATE(Sebelumnya saya lupa meninggalkan script js berikut)

Selanjutnya silahkan copy javascript berikut ini lalu sesuaikan pada tema yang sedang digunakan. Bisa anda tambahkan pada file js yang sudah ada, bisa juga dengan pembuatan file js baru kemudian panggil pada index.php

jQuery(document).ready(function() {
	///////////
	//Plugins//
	///////////
  //contact form processing
  jQuery('form.contact-form').on('submit', function( e ){
    e.preventDefault();
    var $form = jQuery(this);
    jQuery($form).find('span.contact-form-respond').remove();
    //checking on empty values
    var formFields = $form.serializeArray();
    for (var i = formFields.length - 1; i >= 0; i--) {
    	if (!formFields[i].value.length) {
    		$form.find('[name="' + formFields[i].name + '"]').addClass('invalid').on('focus', function(){jQuery(this).removeClass('invalid')});
    	};
    };
    //if one of form fields is empty - exit
    if ($form.find('[name]').hasClass('invalid')) {
    	return;
    };
    //sending form data to PHP server if fields are not empty
    var request = $form.serialize();
    var ajax = jQuery.post( "contact-form.php", request )
      .done(function( data ) {
        jQuery($form).find('[type="submit"]').attr('disabled', false).parent().append('<span class="contact-form-respond highlight">'+data+'</span>');
    })
      .fail(function( data ) {
        jQuery($form).find('[type="submit"]').attr('disabled', false).parent().append('<span class="contact-form-respond highlight">Mail cannot be sent. You need PHP server to send mail.</span>');
    })
  });

});

Update tersedia untuk artikel ini

Bagaimana cara membuat form pada web di HTML?

Form action untuk apa?

Atribut apa saja yang di gunakan membuat form dalam document HTML?

Apa itu form pada HTML?