Formulir Kontak Manual

Para blogger tentu sudah tidak asing lagi dengan yang namanya “Formulir Kontak”. Formulir kontak berguna sebagai media interaksi pengunjung agar terhubung langsung ke email pengelola blog. Formulir ini berbeda dengan meninggalkan komentar & memiliki skala yang lebih luas, contoh: memberikan saran berkenaan dengan blog atau permintaan posting, bertanya tentang suatu topik posting ketika komentar pada posting tersebut telah ditutup, dan sebagainya

Banyak layanan pihak ketiga yang menyediakan fasilitas ini, antara lain: EmailMeForm, Kontactr, Foxyform & FreeContactForm. Nah, sekarang bagaimana jika kita ingin membuat formulir kontak sendiri? Salah satu alternatifnya adalah dengan menggunakan PHP (Hypertext Preprocessor), seperti yang akan Optimasi Blog deskripsikan berikut.

Web Hosting

Langkah awal, kita harus memiliki hosting. Mungkin salah satu situs web yang menyediakannya secara gratis adalah 000webhost.com (jika tidak berkeberatan, taut tersebut merupakan afiliasi Optimasi Blog di 000webhost) atau dapat menggunakan hosting lain. Kemudian buat satu subdomain gratis yang disediakan oleh layanan tersebut. Silakan buka akun email sesuai dengan email yang didaftarkan pada 000webhost untuk melihat konfirmasi akun. Jika sudah, kembali ke 000webhost & beranjak ke Cpanel. Klik icon “File Manager” dan masukkan kata sandi sesuai dengan waktu pendaftaran atau ganti kata sandi berbeda (baru) dengan melakukan akses ke “View FTP Detail”. Sekarang kita berada dalam File Manager, buka berkas public_html. Hapus file “default.php”, kemudian buat file baru bernama “index.php” yang berisi Silence is golden.

<?php
// Silence is golden.
?>

Nah, sekarang subdomain gratis telah dapat kita pergunakan untuk menyimpan berbagai berkas. Selanjutnya masih di dalam berkas public_html, kita membuat file PHP yang nantinya akan dimunculkan sebagai formulir isian kontak.

<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) {
ob_start("ob_gzhandler");
}
else {
ob_start();
}
?>
<?php error_reporting( 0 );?>
<?php
//Memperbaiki kesalahan pemberitahuan pada debug
$nameError = '';
$emailError = '';
$commentError = '';
//Mengecek apakah isi form sudah dikirim
if(isset($_POST['submitted'])) {
 //Mengecek apakah chaptcha rahasia terisi
 if(trim($_POST['checking']) !== '') {
  $captchaError = true;
 } else {
  //Mengecek apakah kolom nama sudah diisi
  if(trim($_POST['contactName']) === '') {
   $nameError = 'Silakan isi nama Anda terlebih dahulu'; //Pesan error jika kolom nama kosong
   $hasError = true;
  } else {
   $name = trim($_POST['contactName']);
  }
  //Mengecek apakah kolom alamat email sudah diisi dan valid
  if(trim($_POST['email']) === '')  {
   $emailError = 'Anda lupa untuk memasukkan alamat email';//Pesan error jika kolom email kosong
   $hasError = true;
  } else if (!preg_match("/^[a-z0-9]+([_\\.-][a-z0-9]+)*@([a-z0-9]+([\.-][a-z0-9]+)*)+\\.[a-z]{2,}$/i", trim($_POST['email']))) {
   $emailError = 'Alamat email yang Anda masukkan tidak valid';//Pesan error jika alamat email tidak valid
   $hasError = true;
  } else {
   $email = trim($_POST['email']);
  }
  //Mengecek apakah kolom isi pesan sudah disi
  if(trim($_POST['comments']) === '') {
   $commentError = 'Apakah Anda ingin mengirim pesan kosong? Silakan isi pesan Anda';//Pesan error jika kolom pesan masih kosong
   $hasError = true;
  } else {
   if(function_exists('stripslashes')) {
    $comments = stripslashes(trim($_POST['comments']));
   } else {
    $comments = trim($_POST['comments']);
   }
  }
  //Mengirimkan pesan, jika semua kolom telah diisi dengan valid
  if(!isset($hasError)) {
   $emailTo = 'email@example.com';//Alamat email tujuan, ganti dengan email anda
   $subject = 'Pesan via formulir kontak dari '.$name;//Judul pesan yang masuk ke email kita dari form kontak
   $sendCopy = trim($_POST['sendCopy']);//Opsi untuk mengirimkan salinan pesan kepada pengirim
   $body = "Nama: $name \n\nEmail: $email \n\nIsi Pesan: $comments";//Isi Email
   $headers = 'From: Optimasi Blog <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;//Header email
   mail($emailTo, $subject, $body, $headers);
   if($sendCopy == true) {
    $subject = 'Pesan Anda dari nama blog Anda';//Judul pesan salinan kepada pengirim apabila checkbox kirim salinan dicentang
    $headers = 'From: admin blog <email@example.com>';//Header email pesan salinan, silakan diedit nama dan alamat emailnya
    mail($email, $subject, $body, $headers);
   }
   $emailSent = true;
  }
 }
} ?>
<!DOCTYPE html>
<html>
<head>
<title>Formulir Kontak</title>
<link rel="stylesheet" href="/css/style.css.php"/>
</head>
<body>
<?php if(isset($emailSent) && $emailSent == true) { ?>
 <h3>Terima kasih, <?=$name;?></h3>
 <p>Pesan Anda telah dikirim, kami akan segera membalas secepat mungkin.</p>
<?php } else { ?>
 <?php if(isset($hasError) || isset($captchaError)) { ?>
  <p class="error">Maaf, tampaknya ada masalah dalam pengiriman pesan Anda, silakan coba lagi :)<p>
 <?php } ?>
 <form action="contact-form.php" id="contactForm" method="post">
  <p class="contact-form-author">
   <label for="contactName">Nama <small>*</small></label>
   <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" size="30" tabindex="1" class="requiredField" />
   <?php if($nameError != '') { ?>
    <span class="error"><?=$nameError;?></span>
   <?php } ?>
  </p>
  <p class="contact-form-email">
   <label for="email">Email <small>*</small></label>
   <input type="text" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" size="30" tabindex="2" class="requiredField email" />
   <?php if($emailError != '') { ?>
    <span class="error"><?=$emailError;?></span>
   <?php } ?>
  </p>
  <p class="contact-form-message">
   <label for="commentsText">Pesan <small>*</small></label>
   <textarea name="comments" id="commentsText" cols="45" rows="8" tabindex="3" class="requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
   <?php if($commentError != '') { ?>
    <span class="error"><?=$commentError;?></span>
   <?php } ?>
  </p>
  <p class="inline">
   <input type="checkbox" name="sendCopy" id="sendCopy" tabindex="4" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked="checked"'; ?> /><label for="sendCopy">Kirim salinan pesan ini ke email Anda.</label>
  </p>
  <p class="screenReader">
   <label for="checking" class="screenReader">Biarkan seperti ini!</label><input type="text" name="checking" id="checking" size="10" tabindex="5" class="screenReader" value="<?php if(isset($_POST['checking']))  echo $_POST['checking'];?>" />
   </p><!--Chaptca rahasia-->
   <p class="contact-form-submitted">
    <input name="submitted" type="submit" id="submitted" tabindex="6" value="Kirim Pesan" />
   </p>
 </form><!-- #contactForm -->
<?php } ?>
</body>
</html>

Untuk kode yang berwarna merah merupakan kompres file dengan menggunakan gzip & warna biru diisi dengan email serta nama blog, sesuaikan dengan keterangan yang diberi warna hijau. Beri nama file di atas menjadi “contact-form.php” (tanpa tanda petik). Adapun <link rel="stylesheet" href="/css/style.css.php"/> akan kita buat terpisah dari file induk (contact-form.php)

Buat direktori baru dengan nama “css” (tanpa tanda petik). Masuk ke dalam direktori css, kemudian tambahkan file baru dengan nama “style.css” (tanpa tanda petik) yang isinya lebih kurang sebagai berikut.

<?php header("Content-type: text/css"); ?>
body,
input,
textarea {
 color: #444;
 font: 93.75%/1.6em Georgia, serif;
}
body {
 background: #fff;
 margin: 0;
 padding: 0;
 text-align: left;
 width: 100%;
}
body:before, body:after {
 content: "";
 display: table;
}
body:after {
 clear: both;
}
p {
 font-size: 1em;
 line-height: 1.6em;
 margin-bottom: .8em;
 margin-top: 0;
}
small,
.error {
 color: #f00;
 font-size: .8em;
 line-height: 2em;
}
h3 {
 font-size: 1.3333em;
 line-height: 1.2em;
 margin-bottom: .6em;
}
input,
textarea {
 font-size: 1em; /* Corrects font size not being inherited in all browsers */
 margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
 vertical-align: baseline; /* Improves appearance and consistency in all browsers */
 *vertical-align: middle; /* Improves appearance and consistency in all browsers */
}
input {
 line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
 *overflow: visible;  /* Corrects inner spacing displayed oddly in IE6/7 */
}
input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
 border: 0;
 padding: 0;
}
input[type=text],
input[type=email],
textarea {
 color: #666;
 border: 1px solid #ddd;
 border-radius: 3px;
}
input[type=text]:focus,
input[type=email]:focus,
textarea:focus {
 color: #111;
}
input[type=text],
input[type=email] {
 padding: 6px;
 width: 50%;
}
input[type=text]#checking {
 width: 10%;
}
input[type="checkbox"] {
 box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */
 margin-right: 6px;
 padding: 0; /* Addresses excess padding in IE8/9 */
}
label.screenReader {
 margin-right: 6px;
}
input[type="submit"] {
 border: 1px solid #ddd;
 border-color: #ccc #ccc #bbb #ccc;
 border-radius: 3px;
 background: #fafafa; /* Old browsers */
 background: -moz-linear-gradient(top,  #fafafa 60%, #e6e6e6 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#fafafa), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #fafafa 60%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #fafafa 60%,#e6e6e6 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #fafafa 60%,#e6e6e6 100%); /* IE10+ */
 background: linear-gradient(top,  #fafafa 60%,#e6e6e6 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
 box-shadow: inset 0 2px 1px #fff;
 color: rgba(0,0,0,.8);
 cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
 -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
 font: 1em/1.6em Georgia, serif;
 padding: .4em .8em;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
input[type="submit"]:hover {
 background: #f5f5f5; /* Old browsers */
 background: -moz-linear-gradient(top,  #f5f5f5 60%, #dcdcdc 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#f5f5f5), color-stop(100%,#dcdcdc)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #f5f5f5 60%,#dcdcdc 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #f5f5f5 60%,#dcdcdc 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #f5f5f5 60%,#dcdcdc 100%); /* IE10+ */
 background: linear-gradient(top,  #f5f5f5 60%,#dcdcdc 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#dcdcdc',GradientType=0 ); /* IE6-9 */
 border-color: #bbb #bbb #aaa #bbb;
}
input[type="submit"]:focus,
input[type="submit"]:active {
 border-color: #aaa #bbb #bbb #bbb;
 box-shadow: inset 0 2px 3px rgba(0,0,0,.15);
 box-shadow: inset 0 2px 2px rgba(0,0,0,.15);
}
textarea,
.contact-form-author input[type="text"],
.contact-form-email input[type="text"] {
 display: block;
}
textarea {
 overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
 padding: 6px 0 6px 6px;
 resize: vertical;
 vertical-align: top; /* Improves readability and alignment in all browsers */
 width: 95%;
}
@media screen and (max-width:800px) {
 body {
  font-size: .8667em;
 }
}
@media screen and (max-width:320px) {
 body {
  font-size: .8em;
 }
}
@media screen and (max-width:240px) {
 body {
  font-size: .7333em;
 }
}

Silakan Anda kustomisasi pengkodean CSS (Cascading Style Sheets) di atas, sehingga sesuai dengan keinginan dan/atau template Anda. Jangan lupa membuat satu file baru (dalam folder css) lagi untuk mengompresi CSS tersebut & beri nama “style.css.php” (tanpa tanda petik).

<?php
ob_start("ob_gzhandler");
ob_start("compress");
// required header info and character set
header("Content-type: text/css; charset: UTF-8");
// duration of cached content (Cache for 1 weeks)
$offset = 60 * 60 * 24 * 7;
$ts = gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
// cache control to process
header ('Cache-Control: max-age=' . $offset . ', must-revalidate');
//set etag-header
header('ETag: "'.md5($ts).'"');
// expiration header format
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s",time() + $offset) . " GMT";
// send cache expiration header to browser
header($ExpStr);
// initialize compress function for white-space removal
ob_start("compress");
// Begin function compress
function compress($buffer) {
// remove comments
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
// remove tabs, spaces, new lines, etc.
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
// remove unnecessary spaces
$buffer = str_replace('{ ', '{', $buffer);
$buffer = str_replace(' }', '}', $buffer);
$buffer = str_replace('; ', ';', $buffer);
$buffer = str_replace(', ', ',', $buffer);
$buffer = str_replace(' {', '{', $buffer);
$buffer = str_replace('} ', '}', $buffer);
$buffer = str_replace(': ', ':', $buffer);
$buffer = str_replace(' ,', ',', $buffer);
$buffer = str_replace(' ;', ';', $buffer);
return $buffer;}
require_once('style.css');
ob_end_flush();
?>

Dua file dalam direktori css, yakni style.css dan style.css.php dengan pemanggilan <link rel="stylesheet" href="/css/style.css.php"/> pada file contact-form.php

Sekarang formulir kontak telah siap dimanfaatkan serta diletakkan pada blog, biasanya dalam halaman kontak. Sebelumnya — mungkin ini sifatnya opsional (tambahan) — menambah beberapa pengaturan pada .htaccess agar lebih maksimal. Baris pertama umumnya telah otomatis ditambahkan, tinggal melakukan konfigurasi untuk baris-baris selanjutnya. Taut kredit khusus untuk Mutohar Alwi dalam posting Cara Setting Expired Header.

# Do not remove this line, otherwise mod_rewrite rules will stop working
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# Prevents directory  listing
IndexIgnore *

# Strong HTACCESS Protection
<Files ~ "^.*\.([Hh][Tt][Aa])">
order allow,deny
deny from all
satisfy all
</Files>

<ifModule mod_headers.c>
    Header set Connection keep-alive
</ifModule>

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

# BEGIN Browser Cache
<IfModule mod_mime.c>
AddType text/css .css
AddType application/x-javascript .js
AddType text/html .html .htm
AddType text/richtext .rtf .rtx
AddType image/svg+xml .svg .svgz
AddType text/plain .txt
AddType text/xsd .xsd
AddType text/xsl .xsl
AddType text/xml .xml
AddType video/asf .asf .asx .wax .wmv .wmx
AddType video/avi .avi
AddType image/bmp .bmp
AddType application/java .class
AddType video/divx .divx
AddType application/msword .doc .docx
AddType application/x-msdownload .exe
AddType image/gif .gif
AddType application/x-gzip .gz .gzip
AddType image/x-icon .ico
AddType image/jpeg .jpg .jpeg .jpe
AddType application/vnd.ms-access .mdb
AddType audio/midi .mid .midi
AddType video/quicktime .mov .qt
AddType audio/mpeg .mp3 .m4a
AddType video/mp4 .mp4 .m4v
AddType video/mpeg .mpeg .mpg .mpe
AddType application/vnd.ms-project .mpp
AddType application/vnd.oasis.opendocument.database .odb
AddType application/vnd.oasis.opendocument.chart .odc
AddType application/vnd.oasis.opendocument.formula .odf
AddType application/vnd.oasis.opendocument.graphics .odg
AddType application/vnd.oasis.opendocument.presentation .odp
AddType application/vnd.oasis.opendocument.spreadsheet .ods
AddType application/vnd.oasis.opendocument.text .odt
AddType audio/ogg .ogg
AddType application/pdf .pdf
AddType image/png .png
AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
AddType audio/x-realaudio .ra .ram
AddType application/x-shockwave-flash .swf
AddType application/x-tar .tar
AddType image/tiff .tif .tiff
AddType audio/wav .wav
AddType audio/wma .wma
AddType application/vnd.ms-write .wri
AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A604800
ExpiresByType application/x-javascript A31536000
ExpiresByType text/html A3600
ExpiresByType text/richtext A3600
ExpiresByType image/svg+xml A3600
ExpiresByType text/plain A3600
ExpiresByType text/xsd A3600
ExpiresByType text/xsl A3600
ExpiresByType text/xml A3600
ExpiresByType video/asf A31536000
ExpiresByType video/avi A31536000
ExpiresByType image/bmp A31536000
ExpiresByType application/java A31536000
ExpiresByType video/divx A31536000
ExpiresByType application/msword A31536000
ExpiresByType application/x-msdownload A31536000
ExpiresByType image/gif A31536000
ExpiresByType application/x-gzip A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType application/vnd.ms-access A31536000
ExpiresByType audio/midi A31536000
ExpiresByType video/quicktime A31536000
ExpiresByType audio/mpeg A31536000
ExpiresByType video/mp4 A31536000
ExpiresByType video/mpeg A31536000
ExpiresByType application/vnd.ms-project A31536000
ExpiresByType application/vnd.oasis.opendocument.database A31536000
ExpiresByType application/vnd.oasis.opendocument.chart A31536000
ExpiresByType application/vnd.oasis.opendocument.formula A31536000
ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
ExpiresByType application/vnd.oasis.opendocument.text A31536000
ExpiresByType audio/ogg A31536000
ExpiresByType application/pdf A31536000
ExpiresByType image/png A31536000
ExpiresByType application/vnd.ms-powerpoint A31536000
ExpiresByType audio/x-realaudio A31536000
ExpiresByType application/x-shockwave-flash A31536000
ExpiresByType application/x-tar A31536000
ExpiresByType image/tiff A31536000
ExpiresByType audio/wav A31536000
ExpiresByType audio/wma A31536000
ExpiresByType application/vnd.ms-write A31536000
ExpiresByType application/vnd.ms-excel A31536000
ExpiresByType application/zip A31536000
</IfModule>
<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
</IfModule>
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
</IfModule>
AddOutputFilterByType DEFLATE text/css application/x-javascript text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon
</IfModule>
<FilesMatch "\.(css|js)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Alwi"
</IfModule>
</FilesMatch>
<FilesMatch "\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Alwi"
</IfModule>
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|swf|tar|tif|tiff|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Alwi"
</IfModule>
</FilesMatch>
# END Browser Cache

Isi keseluruhan public_html (subdomain) yang terdiri dari satu folder css dan tiga buah file (.htaccess, index.php, dan contact-form.php).

Implementasi Formulir Kontak dalam Blog

Setelah melakukan beberapa langkah-langkah di atas pada hosting kita untuk mendukung fasilitas kontak. Sekarang bagaimana cara melakukan konfigurasi formulir kontak tersebut dalam blog? Cukup ringkas, buat halaman statis baru (contoh: h**p://namablog.blogspot.com/p/kontak.html) dengan beberapa kalimat sebagai pembuka. Kemudian tambahkan markah berikut di bawah kalimat pembuka.

<object type="text/html" data="h**p://namasubdomain/contact-form.php"></object>

Perhatikan namasubdomain (warna merah) harus sesuai dengan yang kita daftarkan, contoh: optimasi.netai.net, optimasi.site90.com, dan sebagainya. Kemudian tambahkan CSS berikut pada template untuk mengatur markah object & letakkan di bawah ]]></b:skin>.

<b:if cond='data:blog.url == "h**p://namablog.blogspot.com/p/kontak.html"'>
<style>
object {
  overflow: hidden;
  height:630px;
  width:100%;
}
</style>
</b:if>

Kemungkinan yang banyak diutak-atik adalah CSS object pada properti height agar formulir kontak tampil penuh, ketika memunculkan pesan error pada saat mengklik tombol “Kirim Pesan”. Taut demonstrasi dapat dilihat pada halaman Kontak Optimasi Blog. Berikut beberapa penampakkan hasil uji coba formulir komentar pada akun email pengelola blog.

Bosan membacanya? Oleh karena terlalu panjang, meskipun sebenarnya dapat dikustomisasi lebih singkat. Posting membuat formulir kontak ini merupakan bahan dokumentasi penulis serta sedikit menambah wawasan kita tentang ‘dunia’ hosting & bagaimana melakukan optimalisasi terhadap sejumlah file didalamnya. Tidak menutup kemungkinan terdapat kekeliruan dalam penyampaian atau pengkodean di atas, sehingga dibutuhkan kritik serta saran agar dapat memperbaiki posting ini.

Bahan Bacaan: How to create a built-in contact form for your WordPress theme oleh Jean-Baptiste Jung

Posted by Hii Sekai