Memperbaiki Contact Form Blogger

Memperbaiki Contact Form Blogger

Sejak bulan Juli kemarin banyak yang mengeluhkan contact form blogger yang error di forum ataupun di grup support template premium. Berdasarkan informasi yang saya dapatkan dari wendycode.com, bahwa blogger ada melakukan update pada kontak formulirnya sehingga contact form hanya menampilkan pesan "sedang mengirim..".

Saya juga termasuk salah satu yang mengalami hal tersebut. Oleh karena itu, saya berjelajah di beberapa website panduan untuk mencari tahu bagaimana cara mengatasi hal tersebut.

Dari hasil berjelajah, saya menemukan panduan yang diberikan Arlina Code (dulu Arlina Design) yang merupakan blogger senior yang aktif membuat template blogspot. Beliau juga memberikan cara untuk memperbaiki formulir kontak bawaan blogger dengan menghapus CSS, Javascript, dan Widget bundle blogger.

Mengembalikan Kode HTML Blogger Seperti Semula

Menurut kesimpulan yang saya dapatkan dari artikel dari arlinacode, untuk memperbaiki error pada contact ini, anda harus mengembalikan html blogger seperti semula, Silakan ubah pada edit html pada template anda.

Ganti kode : 

<head>

Menjadi : 

<head>


Ganti kode : 

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*

Menjadi : 

<style type='text/css'>


Ganti kode :

&lt;/head&gt;&lt;!--<head/>--&gt;

Menjadi :

</head>


Ganti kode : 

&lt;!--</body>--&gt;&lt;/body&gt;

Menjadi : 

</body>

Kemudian, simpan tema dan selesai.

Apabila masih belum bekerja dengan baik, silakan tambahkan script ini sebelum </body>


<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'] = '6243576702872104792';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6243576702872104792','//www.yourblog.com/','6243576702872104792');

_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': '6243576702872104792', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

//]]>

</script>

Note : 

Silakan ubah : 

  • 6243576702872104792 dengan blog id blog anda
  • www.yourblog.com dengan alamat blog anda (tanpa https://)


Selanjutnya, jika anda menggunakan JQuery seperti ini :

<script src='https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js'/>

Silakan diganti dengan versi berikut ini :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>


Itulah yang saya dapatkan saat berjalan-jalan ke arlinacode.com untuk cara memperbaiki kontak form bawaan blogger. Namun, menurut saya sangat ribet oleh karena itu, saya mencoba mencari sumber referensi lainnya.

Script Kontak Form Blogger Redirect Email

Akhirnya saya menemukan Kontak Form Blogger Redirect ke Email dari wendycode.com yang menurut saya lebih simple, dan hanya perlu copy paste code html dan script pada halaman blogger. Nah, Untuk anda yang ingin membuat halaman kontak versi Wendycode, anda bisa langsung mengunjungi : https://www.wendycode.com/2022/06/kontak-form-redirect-ke-email-langsung.html

Atau anda bisa copy paste script dibawah ini, karena script ini saya ambil langsung dari link diatas tanpa melakukan perubahan apapun. Untuk anda yang ingin memasangkan ke blog nya, silakan mengikuti langkah berikut ini :

Step 1. Masuk ke halaman contact blogger anda. Bagi yang belum ada halaman kontak, silakan buat halaman contact baru. (masuk pada mode html)

Step 2. Copy semua script dibawah ini.


<style type="text/css">

/* source css https://median-ui.jagodesain.com */

.ContactForm{max-width:500px;font-size:14px}.cArea:not(:last-child){margin-bottom:25px}.cArea label{display:block;position:relative}.cArea label .n{display:block;position:absolute;left:0;right:0;top:0;color:rgba(8,16,43,.4);line-height:1.6em;padding:15px 16px 0;border-radius:4px 4px 0 0;transition:all .1s ease}.cArea label .n.req::after{content:'*';font-size:85%}.cArea textarea{height:100px}.cArea textarea:focus,.cArea textarea[data-text=fl]{height:200px}.cArea input:focus ~ .n,.cArea textarea:focus ~ .n,.cArea input[data-text=fl] ~ .n,.cArea textarea[data-text=fl] ~ .n{padding-top:5px;color:rgba(8,16,43,.7);font-size:90%;background:#ececec}.cArea .h{display:block;font-size:90%;padding:5px 16px 0;opacity:.7;line-height:normal}.nArea .error-message{color:#d32f2f}.ContactForm input[type=text],.ContactForm input[type=number],.ContactForm textarea{display:block;width:100%;outline:0;border:0;border-bottom:1px solid rgba(0,0,0,.25);border-radius:4px 4px 0 0;background:#ececec;padding:25px 16px 8px 16px;line-height:1.6em;transition:all .1s ease}.ContactForm input[type=button]{display:inline-flex;align-items:center;padding:12px 30px;outline:0;border:0;border-radius:4px;color:#fffdfc;background:#f89000;font-size:14px;white-space:nowrap;overflow:hidden;max-width:100%}.cArea .hidden{display:none}.ContactForm input[type=number]:hover,.ContactForm input[type=text]:hover,.ContactForm textarea:hover{border-color:rgba(0,0,0,.42);background:#ececec}.ContactForm input[type=number]:focus,.ContactForm input[type=text]:focus,.ContactForm textarea:focus{border-color:#f89000;background:#ececec}



/* css darkmode sesuaikan class (.drK) dengan templatemu agar dapat berjalan */

.drK .ContactForm input[type=number],.drK .ContactForm input[type=text],.drK .ContactForm textarea,.drK .cArea input:focus ~ .n,.drK .cArea textarea:focus ~ .n,.drK .cArea input[data-text=fl] ~ .n,.drK .cArea textarea[data-text=fl] ~ .n{background: #252526;}.drK .cArea label .n{color:rgba(255,255,255,.25)}.drK .ContactForm input[type=number],.drK .ContactForm input[type=text],.drK .ContactForm textarea{color:#ececec;}

</style>



<div class='ContactForm s-2' id='ContactForm1'>

  <form name='cForm'>

    <div class='cArea'>

      <label>

        <input class='cInpt cName' id='namaUser' name='name' type='text'/>

        <span class='n req'>Nama</span>

      </label>

    </div>

    <div class='cArea'>

      <label>

        <input class='cInpt cMail' id='nomorUser' name='Nomor hp' type='number'/>

        <span class='n req'>Nomor Hp / WA</span>

      </label>

    </div>

    <div class='cArea'>

      <label>

        <textarea class='cInpt cMsg' id='pesanUser' name='Pesan' rows='3'></textarea>

        <span class='n req'>Pesan</span>

      </label>

    </div>

    <div class='cArea'>

      <input class='cBtn' id='kirimPesan' type='button' value='Kirim' />

    </div>

    <div class='cArea nArea'>

      <p class='cNtf' id='error-message'></p>

    </div>

  </form>

</div>





<script>

/*<![CDATA[*/ 

// javascript by wendycode.com

var sharedFreeBy = 'www.wendycode.com'; // Credit jika di hapus script tidak dapat berfungsi

var email = 'yourmail@gmail.com'; //Alamat Email Anda

var subjectEmail = 'Hallo Saya Ingin Bertanya '; //Subjek Email Namun Hanya Muncul Di SmartPhone Saja



//format pesan opsinal bisa di ubah atau tidak

var pengirim = 'Nama : ';

var noPengirim = 'Nomor Telpon / WA : ';

var kirimVia = 'Email ini dikirim via : ';



var _0x56c4c4=_0x18c5,_0x167513=_0x1a4e;function _0x1a4e(a,b){var c=_0x488e();return(_0x1a4e=function(d,g){var b=c[d-=357];if(void 0===_0x1a4e.GdhWHg){var i=function(g){for(var b,a,h="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=",c="",f="",d=0,i=0;a=g.charAt(i++);~a&&(b=d%4?64*b+a:a,(d++)%4)&&(c+=String.fromCharCode(255&b>>(-2*d&6))))a=h.indexOf(a);for(var e=0,j=c.length;e<j;e++)f+="%"+("00"+c.charCodeAt(e).toString(16)).slice(-2);return decodeURIComponent(f)},h=function(d,g){var a,e,b=[],c=0,h="";for(a=0,d=i(d);a<256;a++)b[a]=a;for(a=0;a<256;a++)c=(c+b[a]+g.charCodeAt(a%g.length))%256,e=b[a],b[a]=b[c],b[c]=e;a=0,c=0;for(var f=0;f<d.length;f++)c=(c+b[a=(a+1)%256])%256,e=b[a],b[a]=b[c],b[c]=e,h+=String.fromCharCode(d.charCodeAt(f)^b[(b[a]+b[c])%256]);return h};_0x1a4e.EhAfxf=h,a=arguments,_0x1a4e.GdhWHg=!0}var e=d+c[0],f=a[e];return f?b=f:(void 0===_0x1a4e.WeteHA&&(_0x1a4e.WeteHA=!0),b=_0x1a4e.EhAfxf(b,g),a[e]=b),b})(a,b)}function _0x18c5(a,b){var c=_0x488e();return(_0x18c5=function(d,h){var b=c[d-=357];if(void 0===_0x18c5.sWtfAl){var g=function(g){for(var b,a,h="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=",c="",f="",d=0,i=0;a=g.charAt(i++);~a&&(b=d%4?64*b+a:a,(d++)%4)&&(c+=String.fromCharCode(255&b>>(-2*d&6))))a=h.indexOf(a);for(var e=0,j=c.length;e<j;e++)f+="%"+("00"+c.charCodeAt(e).toString(16)).slice(-2);return decodeURIComponent(f)};_0x18c5.KvByMF=g,a=arguments,_0x18c5.sWtfAl=!0}var e=d+c[0],f=a[e];return f?b=f:(b=_0x18c5.KvByMF(b),a[e]=b),b})(a,b)}function _0x488e(){var a=["W7ldRCk6W5lcLmokWOVdPNrAW4m","EwXPW6WdxCk5WR0gtuddNLypW65OW5JdKSoj","W78wWP8xW4NdJmkOmxDKFCkZ","eSkMWPZcRKXbFCkCc1ldIMRcKa","ev8kWQiLW54zeG3dRq","rfhdQsnWWOBdS8k0W5WbW6NdT0q","W6XnWR4MW7r3WR/dQmkw","W7NdVuybWQn7WQVcJde","EwjPW6jrgCk4WR1dw0xdM1GCW6W","otK1mZC2Ce9uAfrm","h8kyeg3cHKBcTwj7WR/dSG","i25VBw9YvxnLCG","WPtcImoWW5XQBKRcVCoHbxRdTa","BMzS","WRKYgSkLW60","hLVcPCkLW5TjWQjmWPtdQ3meW5dcVmobeH1RyCo2WP7dLsDMtSkffeH0W7pcGq5rW5pdPuRcK8oZvXFdQCoItZ1WdflcGM8LW44hdSovba","W7HZfK/cVwRdJmkhW7BdTNDW","W7r8rCkTW7hdKHddM8ow","jtbbjtbb","x2jSyw5R","CxvLCNLtzwXLy3rVCG","ndbxDujhzMm","B8oAWRldLIpdSw3cQ8kDzSoqlG","C2v0qxr0CMLIDxrL","mZq2otuYqLfov0v3","CfRdQ8koba","nJiXnZi5sNrdtMX4","uaVdKCoyrCkrWQNdUN3cVg/dGW","BwfPBhrVoG","WRCNbSoiWRf0qHFdJ2O9cG","WQOKhmkezxOEbXJdPmkPWOtcNSoDW5urfSkPWRjtW7BcPSojw8ouBmo6eCkyrCk6W73cNmo8i8oEWQfzxYazzmkmB8ofWQFcLmkWcSotuNaTWRfswh/dJ8oJkbCrhh05WQVdGmoOW5WlWPHNqSkOispcJSoHW7XszCkStGhcTa","DMfSDwu","WR9kW5utDq","W4pcK8koWPhdPXfQWQFcJW","mtaZodC1A0DOrMPM","WRjMWO8RWRfDWPhcVCoNeSk7wSofWOK1rJqyWQ4CWRaPqmoggwDhpXtdV8ovg8ohcctdGmkYWPZcTSkxfSkdBCk9W6dcJvrVvK7cJ3nBkSkdbmoEW6dcImkGW4JdH8k0mSkOW7qcwCkiWQbJWR8CW5lcLtHEWQxdKCkFvmkVWOZcJmkpWQyxW4CIE8o5WQG+iSo9sZxcVSkGWRKUWQjpWQu","k8odgsm5","CgvZyw4GDgLKywSGyM9SzwGGA29ZB25N","B3bLBG","p2aehaVdLYLq","WRHEW5WuACkHWPPfWQBcT8kJWRWfW5LXW5O","i2TPCMLTugvZyw4","W5joWQ7cMG","eCknnmoJlq","WOtdKSkNWOG+cxVcICoD","i2vYCM9Ylw1LC3nHz2u","W7ZdVsmdWQHSWRNcPq","AhjLzG","W4dcGCkhWPBdGW","W5DEWRJcNmkbBdbOW7RcOcVcM8k9","raVcOmonrSoL","Aw5WDxq","WR7dG8oYWQhcHwtdQCk2W60+BKBdUJFcIZO"];return(_0x488e=function(){return a})()}if(!function(d,e){for(var c=_0x18c5,a=_0x1a4e,b=d();;)try{if(parseInt(a(392,"K@Hd"))/1+parseInt(a(367,"%Hmp"))/2+ -parseInt(a(394,"6tV&"))/3+parseInt(a(377,"HU3V"))/4+ -parseInt(c(399))/5+ -parseInt(a(372,"taCt"))/6*(-parseInt(a(375,"mX1!"))/7)+ -parseInt(c(386))/8*(parseInt(c(391))/9)==297205)break;b.push(b.shift())}catch(f){b.push(b.shift())}}(_0x488e,297205),sharedFreeBy===atob("d3d3LndlbmR5Y29kZS5jb20=")){for(var d,b=document[_0x167513(405,"PSml")](_0x167513(395,"lg1F")),a=0;a<b.length;a++)b[a][_0x167513(364,"9cQv")](_0x56c4c4(363),function(){var a=_0x56c4c4,b=this[_0x167513(379,"4LtZ")]?"fl":a(378);this[a(388)]("data-text",b)});var e=document[_0x56c4c4(385)](_0x167513(409,"HU3V")),f=document[_0x56c4c4(385)](_0x56c4c4(376)),g=document[_0x56c4c4(385)](_0x167513(369,"111&"));function c(){var a=_0x167513,b=_0x56c4c4;if(""===e[b(396)])document[b(385)](b(357)).innerHTML=a(373,"[DnI");else if(""===f[a(401,"&!c@")])document[a(368,"X[^a")](b(357)).innerHTML=a(366,"[DnI");else if(""===g[a(397,"PSml")])document[a(361,"zn4w")]("#error-message")[a(382,"0&Ld")]=b(402);else{var d=a(380,"Cgm8"),j="&subject="+subjectEmail,h="",k="&body=",c="";if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i[a(407,"zn4w")](navigator[a(398,"Z]8j")])){var d=b(393),c="";h=a(371,"nGOD")}var l=pengirim+e[a(397,"PSml")]+"%0A"+noPengirim+f[a(408,"hSpL")]+a(362,"K@Hd")+g[a(360,"Z]8j")],i=location[b(359)],m=d+email+h+j+k+l+b(383)+c+c+kirimVia+i;window[b(403)](m,b(384)),window[a(404,"QVvE")].href=i}}document[_0x167513(370,"RrVq")](_0x56c4c4(406)).addEventListener(_0x167513(390,"ZHD!"),c)}else window.location[_0x56c4c4(359)]=atob(_0x167513(400,"nGOD"))

/*]]>*/</script>

Nb : 

  • Jangan hapus var sharedFreeBy = 'www.wendycode.com'; karena bisa menyebabkan script tidak bekerja / error.
  • Ubah yourmail@gmail.com dengan email kamu
  • Ubah Hallo Saya Ingin Bertanya dengan kata pembuka / subjek email (hanya berfungsi ketika pengguna menggunakan smartphone).

Baiklah, sekian informasi yang bisa saya bagikan untuk mengatasi permasalahan kontak form blogspot yang error. Saya sendiri menggunakan cara yang kedua dengan membuat halaman kontak yang dibagikan oleh wendycode. Semoga bermanfaat bagi anda yang masih kesulitan dalam memperbaiki masalah contact form yang error.