Membuat Formulir Kontak Email

Gambar 264. Create contact form Email that I am referring to in this article are, where website visitors send you a message through the contact form. The message was received via email.

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 = 'mail@gmail.com';

//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"><h1><a href="<?=BASE_URL.'/contact';?>"><?=$this->e($front_contact);?></a></h1></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

Post Terkait
Author

Administrator

03 Desember 2017

Hey..... Apa kabar? Semua artikel dan layanan yang kami sediakan di sini semata-mata untuk kepentingan pengguna dan klien. Jadi jika Anda merasa membutuhkan pelayanan kami silahkan jangan ragu untuk menghubungi. Kami juga bersedia untuk melayani konsultasi online melalui media sosial, melalui komentar dan melalui halaman testimonial yang telah kami sediakan. Selain itu Anda juga dapat menggunakan kontak form yang tersedia.

Jika apa yang anda dapatkan dari situs ini bermanfaat, silahkan dukung dengan like dan share . Terimakasih telah berkunjung, silahkan kembali kapanpun anda merasa membutuhkan layanan yang kami sediakan.

Status Akun Iklan 11 Juni 2024

Saya sampaikan bahwa status akun iklan sudah saya cek dan saya kelola. Sehingga pagi ini siap untuk di jalankan.

Abaikan notifikasi/tanda yang ada; Dibatasi anggaran, merah, kuning, apapun itu mohon di abaikan. Saya sudah pertimbangkan dan sesuaikan di masing-masing akun. Pagi ini, pukul 04.45 WIB saya baru selesai periksa dan setting semua akun. Sehingga tidak ada lagi yang perlu di tanyakan. Silahkan jalankan iklan.
Ingin berbagi dengan multibisnisindo dan memberikan kontribusi....? Tulis pengalamanmu Di Sini

Terimakasih
JOPanda

6 Komentar

FerneSem
FerneSem
Hello my friend.
Our employees wrote to you yesterday maybe...
Can I offer paid advertising on your site?
Administrator
Administrator
No.... I am sorry, but i paid the ads from google. Thank you for visit my blog.
Yohanes Guntur
Yohanes Guntur
Pesan sudah saya balas, silahkan cek email apakah balasan diterima atau tidak.
Edison sinaga
Edison sinaga
Dengan menggunakan form contact spt yg dibahas bisa menjawab dr email ?
Administrator
Administrator
Untuk mengetahui hal tersebut, silahkan coba kirimkan sebuah pesan melalui form kontak pada link berikut:
https://www.multibisnisindo.com/sendmail
Administrator
Administrator
Tentu bisa, karena pengirim pesan wajib menyertakan email. Pengecualian jika pengirim pesan menyertakan email yang tidak aktif atau email palsuSPAM.