Tutorial CodeIgniter: Cara Membuat Halaman Contact Form Valid Google AMP

Halaman contact form atau halaman kontak berfungsi untuk mempermudah pengunjung website jika ingin menghubungi Admin atau pemilik suatu website.

Seiring dengan perkembangan teknologi, baru-baru ini google meluncurkan project dengan nama Google AMP (Accelerated Mobile Pages) dan beberapa hari yang lalu saya telah membagikan template website codeigniter yang telah valid Google AMP (cek disini). Namun setelah saya pasang pada website saya ternyata halaman contact form bermasalah alias error di validasi AMP.

Nah untuk itu pada kesempatan ini saya akan membagikan source code halaman contact form yang valid dengan google AMP. Sebelumnya lihat demonya dulu:

Controller

Buat sebuah controller dengan nama Contact.php kemudian isi dengan code berikut:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Contact extends CI_Controller {

function __construct() {
parent::__construct();
$this->load->library('email');
}

public function index(){
$this->load->view('vcontact');
}

function sendto(){
$next= $this->input->get('next');
$name= $this->input->get('name');
$replyto= $this->input->get('replyto');
$subject= $this->input->get('subject');
$message= $this->input->get('message');
$message_send="Hey Naz Cules,<br><br>
Someone just submitted your form on ".$next.". Here's what they had to say:<br><br>
<table><tbody><tr><td>Nama</td><td>:</td><td>".$name."</td></tr><tr><td>Replay to</td><td>:</td><td>".$replyto."</td></tr><tr><td>Subject</td><td>:</td><td>".$subject."</td></tr><tr><td>Messages</td><td>:</td><td>".$message."</td></tr></tbody></table>
";
$config['mailtype'] = 'html';
$config['wordwrap'] = TRUE;
$config['charset'] = 'iso-8859-1';
$config['newline'] = "\r\n";
$this->email->initialize($config);

$this->email->from("admin@nazcules.xyz","Naz Cules");
$this->email->to("naz.cules@gmail.com");
$this->email->subject($subject);
$this->email->message($message_send);

if($this->email->send()){
$this->session->set_flashdata("msg", "Thanks for your messages!");
redirect($next);
}else{
$this->session->set_flashdata("msg", "Oops! Someting wrong....");
redirect($next);
}
}
}
Ganti bagian yang saya tandai dengan informasi yang Anda miliki.

View

Buat sebuh view baru dengan nama vcontact.php kemudian copy code berikut:

<h3 id='contact-form'>Let’s Talk</h3>
<?php echo $this->session->flashdata('msg'); ?>
<form action="<?php echo base_url('contact/sendto');?>" method="get" target="_top" name="sentMessage" id="contactForm">
<input type="hidden" name="next" value="<?php echo base_url('contact/#contact-form');?>" />
<div class="styled-input"><div class="styled-input-in">
<input type="text" name="name" required /><label>Name</label><span class="span1"></span><span class="span2"></span>
</div></div>
<div class="styled-input"><div class="styled-input-in">
<input type="email" name="replyto" required /><label>Email</label><span class="span1"></span><span class="span2"></span>
</div></div>
<div class="styled-input"><div class="styled-input-in">
<input type="text" name="subject" required /><label>Subject</label><span class="span1"></span><span class="span2"></span>
</div></div>
<div class="styled-input wide"><div class="styled-input-in">
<textarea name="message" required></textarea><label>Message</label><span class="span1"></span><span class="span2"></span>
</div></div>
<button type="submit" class="btn btn-default btn-labeled"><span class="btn-label"><i class="fa fa-send"></i></span>Send</button>
</form>

Style

Untuk menghasilkan desain seperti demo di atas tambahkan link style font awesome berikut di bagian <head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
Untuk style contact form dan button tambahkan style berikut di file .css anda.

.btn{border-radius:2px;border:0;transition:.2s ease-out;color:#fff;margin:6px 0;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}
.btn:hover{color:#fff;box-shadow:0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15)}
.btn.active,.btn:active,.btn:focus{outline:0;color:#fff}
.btn-primary{background:#4285F4}.btn-primary:focus,.btn-primary:hover{background-color:#5a95f5}.btn-primary.active{background-color:#0b51c5}
.btn-secondary{background-color:#a6c}.btn-secondary:focus,.btn-secondary:hover{background-color:#b579d2;color:#fff}.btn-secondary.active{background-color:#739}.btn-secondary.active:focus,.btn-secondary.active:hover{color:#fff}
.btn-default{background:#2BBBAD}.btn-default:focus,.btn-default:hover{background-color:#30cfc0}.btn-default.active{background-color:#186860}
.btn-success{background:#00C851}.btn-success:focus,.btn-success:hover{background-color:#00d255}.btn-success.active{background-color:#006228}
.btn-info{background:#33b5e5}.btn-info:focus,.btn-info:hover{background-color:#4abde8}.btn-info.active{background-color:#14799e}
.btn-warning{background:#F80}.btn-warning:focus,.btn-warning:hover{background-color:#ff961f}.btn-warning.active{background-color:#c80}
.btn-danger{background:#C00}.btn-danger:focus,.btn-danger:hover{background-color:#db0000}.btn-danger.active{background-color:maroon}
.btn-link,.btn-link:focus,.btn-link:hover{background-color:transparent;color:#000}
.btn-label{position:relative;left:-12px;display:inline-block;padding:6px 12px;background:rgba(0,0,0,0.15);border-radius:3px 0 0 3px}
.btn-labeled{padding-top:0;padding-bottom:0;margin-left: 0;margin-right: 0;font-family: 'Merriweather Sans', sans-serif;}a.btn {color: #f5f5f5;}
.btn-label-right {position: relative;right: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 0 3px 3px 0;}
.btn.disabled, .btn[disabled] {cursor: not-allowed;filter: alpha(opacity=65);-webkit-box-shadow: none;box-shadow: none;opacity: .65;}
.btn-search {border-radius: 0 4px 4px 0;}


#contactForm input:focus~label,#contactForm input:valid~label,#contactForm textarea:focus~label,#contactForm textarea:valid~label{color:#f26649;top:-2.25rem;-webkit-transition:all 125ms ease;transition:all 125ms ease}
#contactForm .styled-input{float:left;width:33.3333%;margin:2rem 0 0;padding:0 10px 0 0;position:relative;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#contactForm .styled-input-in{position:relative}
#contactForm{margin-right:-10px}
#contactForm .styled-input label{color:#999;padding:1rem 0;position:absolute;top:0;left:0;-webkit-transition:all .25s ease;transition:all .25s ease;pointer-events:none;line-height:1}
#contactForm .styled-input.wide{width:100%;margin-bottom: 20px;}
#contactForm input, #contactForm textarea {padding: 1rem 0;border: none;border-bottom: 1px solid #f1f2f3;width: 100%;font-size: 1rem;background: 0;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
#contactForm input~.span1, #contactForm textarea~.span1 {display: block;width: 0;height: 1px;background: #f26649;position: absolute;left: 50%;-webkit-transition: width .4s ease-in-out;transition: width .4s ease-in-out;}
#contactForm input~.span2, #contactForm textarea~.span2 {display: block;width: 0;height: 1px;background: #f26649;position: absolute;right: 50%;-webkit-transition: width .4s ease-in-out;transition: width .4s ease-in-out;}
#contactForm input~span{bottom:0}
#contactForm textarea~span{bottom:0}
#contactForm input:focus,#contactForm textarea:focus{outline:0}
#contactForm input:focus~.span1,#contactForm input:focus~.span2,#contactForm textarea:focus~.span1,#contactForm textarea:focus~.span2{width:50%}
#contactForm textarea{width:100%;min-height:5em;margin-bottom: -7px;}
@media screen and (max-width:800px){#contactForm .styled-input {width:100%;}
}

Warning!!!

Halaman contact form dengan source code di atas tidak bisa berjalan di server local (localhost). Jadi Anda harus mencobanya di server hostingan Anda.

Tambahan Untuk Pengguna Blogger

Bagi Anda yang pemilik blog dengan platform blogger dan menggunakan template AMP bisa menggunakan code berikut pada page contact form blog Anda.
<h3 class='title'>
Contact Form Blog Naz Cules</h3>
<p>
Silahkan isi form di bawah ini untuk menghubungi admin. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.</p>
<form action="https://nazcules.xyz/contact/sendto/" method="get" target="_top" name="sentMessage" id="contactForm">
<input type="hidden" name="next" value="http://blog.nazcules.xyz/p/contac-from.html" />
<div class="styled-input">
<div class="styled-input-in">
<input type="text" name="name" required /><label>Name</label><span class="span1"></span><span class="span2"></span>
</div>
</div>
<div class="styled-input">
<div class="styled-input-in">
<input type="email" name="replyto" required /><label>Email</label><span class="span1"></span><span class="span2"></span>
</div>
</div>
<div class="styled-input">
<div class="styled-input-in">
<input type="text" name="subject" required /><label>Subject</label><span class="span1"></span><span class="span2"></span>
</div>
</div>
<div class="styled-input wide">
<div class="styled-input-in">
<textarea name="message" required></textarea><label>Message</label><span class="span1"></span><span class="span2"></span>
</div>
</div>
<button type="submit" class="btn btn-default btn-labeled"><span class="btn-label"><i class="fa fa-send"></i></span>Send</button>
</form>
Untuk yang berwana hijau silahka ganti https://nazcules.xyz/ dengan alamat domain Anda, untuk yang berwarna biru ganti dengan alamat contact form blog Anda.

Terima kasih!!!
Semoga bermanfaat...