Ditulis oleh: Ditulis pada: 3/13/2015
Sebenarnya tidak perlu pusing-pusing untuk memasang contact form di Wordpress, kita bisa memanfaatkan plugin untuk itu. Misalnya kita bisa menggunakan plugin Contact Form 7 atau juga Jetpack.
Namun semakin banyaknya plugin yang kita pasang, maka akan semakin banyak kode js dan css pada web kita dan itu akan membebani loading blog. Memang benar, untuk loading blog pada Wordpress bisa kita akali dengan plugin lainnya untuk menggunakan cache atau langsung pasang kode untuk menggunakan cache di .htaccess.
Namun jika kita mengecek web kita dengan PageSpeed Insight atau lainnya, maka akan tetap memiliki blocking-rendering yang banyak pada web kita dari js dan css.
Nah salah satu cara untuk mengurangi blocking-rendering dari js dan css adalah dengan mengurangi penggunaan penggunaan plugin. Salah satu plugin yang bisa kita kurangi adalah plugin untuk contact form.
Lantas bagaimana dengan contact form web kita? Saya sangat perlu dengan contact form tersebut!
Tenang saja, saya punya solusinya. Di sini kita tidak akan menggunakan contact form dengan PHP karena menurut saya itu akan beresiko pada database web kita. Kita gunakan yang aman-aman saja yaitu dengan menggunakan contact form Blogger.
Beberapa waktu yang lalu saya sudah pernah membagikan cara membuat popup contact form Blogger, nah caranya sama dengan itu namun kita tidak akan menggunakan popup. Yang kita gunakan adalah iframe contact form blogger yang akan kita pasang di halaman wordpress.
Langkah Pertama
Silahkan buat blog baru di Blogger khusus untuk contact form web wordpress kita. Kemudian silahkan ganti dengan template blank yang saya buat. Silahkan unduh blank template DI SINI.
Kemudian silahkan buat postingan dengan judul apa saja terserah Anda, lalu copy kode di bawah ini dan paste di postingan tersebut dalam mode HTML kemudian publikasikan postingannya.
<style scoped="scoped" type="text/css">
.post-body {padding: 0!important;}
.contact-form-box{width:100%;margin:0;padding:0;background:none!important;z-index:100000}
form{padding-right:0!important}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{width:100%;height:auto;margin: 5px auto 15px 0;padding: 10px;background: #ebebeb;border: 1px solid #ccc;color:#777;border-radius:3px;box-shadow: 0px 4px 0px 0px #c7c5c7;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{background: #fffff7;outline:none}
#ContactForm1_contact-form-email-message{width:100%;height: 100px;margin: 5px auto;padding: 10px;background: #ebebeb;border: 1px solid #ccc;color:#777;font-family:Arial, sans-serif;border-radius:3px;box-shadow: 0px 4px 0px 0px #c7c5c7;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
#ContactForm1_contact-form-submit {display:inline-block;height: 35px;float: left;color: #FFF;padding: 0 20px;margin: 10px 0 5px 0;cursor: pointer;background-color:#f4836a;background-image:none;box-shadow: 0px 4px 0px 0px #c75b45;border:1px solid #eb7d67;border-radius:3px;text-shadow:0px 1px 0px #de5135;}
#ContactForm1_contact-form-submit:hover {background-color:#f5785f;}
#ContactForm1_contact-form-submit:active {background-color:#f4836a;position:relative;top:2px;box-shadow: 0px 2px 0px 0px #c75b45;}
#ContactForm1_contact-form-submit:focus{background-color:#f4836a;outline:none}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 100%;margin-top:10px;text-align:left;background:none;border:none;box-shadow:none}
img.contact-form-cross{background:none;border:none;box-shadow:none;}
.contact-form-cross{vertical-align:middle!important}
</style>
<div class="contact-form-box">
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br />
<div style="clear: both;">
</div>
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1033789108675092647';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1033789108675092647','//contact-ayointernet.blogspot.com/','1033789108675092647');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '1033789108675092647', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
Silahkan ganti kode yang saya block orange dengan ID blog contact form Anda dan yang merah dengan URL blog contact form Anda. Sehingga tampilan blognya akan seperti INI.
Nah pembuatan contact form Blogger sudah beres, kini tinggal menempelkannya di Wordpress.
Langkah Kedua
Silahkan buat halaman (Page) baru untuk contact form dan copy kode di bawah ini kemudian paste di page baru tersebut pada mode Text lalu publikasikan halamannya.
<style scoped="scoped" type="text/css">
.box-contact{
width:100%;
height:auto;
overflow:hidden;
margin:0 auto;
}
.boxcontact-iframe{
width:100%;
height:380px;
overflow:hidden;
position:relative;
margin:0 auto;
background:none;
}
.boxcontact-iframe iframe{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
padding:0
}
</style>
<script type="text/javascript">
//<![CDATA[
function ct(e){document.write('<iframe src="http://contact-ayointernet.blogspot.com/');document.write(e);document.write('" frameborder="no" allowfullscreen="allowfullscreen" scrolling="no"></iframe>')}
//]]>
</script>
<div class="box-contact">
<div class="boxcontact-iframe">
<script type="text/javascript">ct("/");</script>
</div>
</div>
Kode yang saya block merah silahkan ganti dengan URL blog contact form Anda yang tadi dibuat.
Dengan mengganti plugin contact form 7 dengan contact form Blogger ini akan membebaskan 2 buah js dan 1 css dari web kita. Lumayan kan? Hehehehe.... selamat mencoba.