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 namaContact.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);
}
}
}
View
Buat sebuh view baru dengan namavcontact.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">
.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>
Terima kasih!!!
Semoga bermanfaat...
No comments:
Post a Comment