Memasang Contact Form Blogger Di Wordpress

Sebenarnya tidak perlu pusing-pusing untuk memasang contact form di Wordpress, kita dapat memanfaatkan plugin untuk itu. Misalnya kita dapat memakai plugin Contact Form 7 atau juga Jetpack.

Namun semakin banyaknya plugin yang kita pasang, maka akan semakin banyak isyarat js dan css pada web kita dan itu akan membebani loading blog. Memang benar, untuk loading blog pada Wordpress dapat kita akali dengan plugin lainnya untuk memakai cache atau eksklusif pasang isyarat untuk memakai cache di .htaccess.

Namun kalau kita mengecek web kita dengan PageSpeed Insight atau lainnya, maka akan tetap mempunyai blocking-rendering yang banyak pada web kita dari js dan css.

Nah salah satu cara untuk mengurangi blocking-rendering dari js dan css ialah dengan mengurangi penggunaan penggunaan plugin. Salah satu plugin yang dapat kita kurangi ialah plugin untuk contact form.

Lantas bagaimana dengan contact form web kita? Saya sangat perlu dengan contact form tersebut!

Tenang saja, aku punya solusinya. Di sini kita tidak akan memakai contact form dengan PHP alasannya ialah berdasarkan aku itu akan beresiko pada database web kita. Kita gunakan yang aman-aman saja yaitu dengan memakai contact form Blogger.

Beberapa waktu yang kemudian aku sudah pernah membagikan cara menciptakan popup contact form Blogger, nah caranya sama dengan itu namun kita tidak akan memakai popup. Yang kita gunakan ialah iframe contact form blogger yang akan kita pasang di halaman wordpress.

Langkah Pertama

Silahkan buat blog gres di Blogger khusus untuk contact form web wordpress kita. Kemudian silahkan ganti dengan template blank yang aku buat. Silahkan unduh blank template DI SINI.

Kemudian silahkan buat postingan dengan judul apa saja terserah Anda, kemudian copy isyarat 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 isyarat yang aku block orange dengan ID blog contact form Anda dan yang merah dengan URL blog contact form Anda. Sehingga tampilan blognya akan ibarat INI.

Nah pembuatan contact form Blogger sudah beres, sekarang tinggal menempelkannya di Wordpress.

Langkah Kedua

Silahkan buat halaman (Page) gres untuk contact form dan copy isyarat di bawah ini kemudian paste di page gres tersebut pada mode Text kemudian 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 aku 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.

Sumber https://www.kompiajaib.com/

Share this post