Cara Membuat Contact Form Blogger dengan Verifikasi Captcha

Cara Membuat Contact Form di Blogger dengan Verifikasi Captcha Google dengan Mudah dan Terbaru. Dengan fitur captcha kontak blogger akan aman.
Cara Membuat Contact Form dengan Verifikasi Captcha di Blogger

Membuat Halaman Contact Form Blogger - Halaman kontak merupakan fitur yang wajib harus ada pada sebuah blog ataupun website. Dimana dengan adanya laman kontak tersebut pengunjung akan lebih mudah menghubungi Administrator atau pemilik blog jika ada hal-hal yang perlu ditanyakan atau hal lain misal terkait kerjasama.

Memasang halaman kontak di blog sangat mudah, tergantung platform apa yang digunakan, jika di wordpress membuat halaman kontak bisa menggunakan plugin contact form 7 yang sudah mendukung fitur verifikasi captcha.

Lalu bagaimana di Blogger? Blogger juga sudah menyediakan widget kontak yang bisa dipasang dengan mudah, tapi sayangnya tidak mendukung verifikasi captcha dan hanya bisa dipasang pada sidebar bukan pada halaman statis.

Membuat Contact Form Dengan Verifikasi Captcha di Blogger

Verifikasi Captcha sangat berguna untuk menghindari spamming dan pengguna bot, biasanya proses ini diterapkan pada kolom komentar atau form login untuk memastikan bahwa pengguna tersebut memang bukan boot.

Nah pada tutorial kali ini saya akan berbagi tutorial cara menambahkan formulir kontak di halaman blogger dengan Verifikasi Captcha, tujuannya agar terhindar dari spam email masuk yang dikirim melalui formlir kontak di blogger. Untuk demonya bisa kamu cek diakhir artikel.

1. Langkah pertama adalah login ke dashboard blogger akun kamu.
2. Lalu pergi kebagian menu Halaman, selanjut nya buat Halaman Baru

Contacts Form Blogger Captcha

3. Buat Nama halaman contohnya "Contact Us" atau apapun itu. Kemudian ubah tampilan halaman Compose menjadi mode HTML.
 
Contacts Form Blogger Captcha

4. Selanjutnya copy kode dibawah dan paste pada di halaman tersebut.


// Kode Contact Form Blogger ini Saya dapat di Softweb Tuts
// CSS
<style type="text/css">
form .hidden{display:none}
#ContactForm1,#comments,.post-body form.paypalpay br{display:none}
.post-body form.paypalpay{margin:0;text-align:center}
#ContactForm1_contact-form-email,#ContactForm1_contact-form-name{font-family:Quicksand,sans-serif;display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,.08)}
#ContactForm1_contact-form-email-message{font-family:'Google Sans',sans-serif;width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,.08)}
#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{background:#fff;outline:0;border-color:rgba(0,0,0,.18)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}form{color:#888}
.contact-form-button.contact-form-button-submit{cursor:pointer;display:block;position:relative;background:var(--theme);border:3px solid var(--theme);color:#fff;font-weight:500;text-align:center;font-size:1rem;margin:20px auto;padding:12px 20px;border-radius:99em;overflow:hidden;box-shadow:2px 2px 10px 0 rgba(0,0,0,.1);transition:all .3s cubic-bezier(.25,.1,.25,1);transition-timing-function:cubic-bezier(.25,.1,.25,1);background-size:100% auto}
.contact-form-button.contact-form-button-submit:hover{background:#fff;color:var(--theme);box-shadow:none}.inline-block{display:inline-block}
#CaptchaImageCode canvas{width:200px}#CaptchaImageCode canvas,.inline-block #UserCaptchaCode{width:150px;height:60px}
.inline-block #UserCaptchaCode{border:1px solid #dadfdf;background:#fff;font-size:15px;color:#878484;border-radius:0;position:relative;top:-20px;padding:15px;height:auto;margin-left:10px;text-align:center}
.btn{border-radius:5px}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>

// HTML
<form name="contact-form">
<div class="formcolumn1">
<input id="ContactForm1_contact-form-name" name="name" pattern='[a-z-A-Z-\s-.]*' placeholder="Name" size="30" type="text" value="" required=''/>
</div>
<div class="formcolumn2">
<input id="ContactForm1_contact-form-email" name="email" pattern='[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}' placeholder="Email" size="30" type="text" value="" required=''/>
</div>
<div class="formcolumn3">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="7" required=''>
</textarea>
</div>
<div class='captcha-field'>
<div id="CaptchaImageCode" class="CaptchaTxtField inline-block">
<canvas id="CapCode" class="capcode">
</canvas>
</div>
<input type="button" class="ReloadBtn hidden" onclick='CreateCaptcha();'/>
<div class='input inline-block'/>
<input type="text" id="UserCaptchaCode" onkeyup="validate()" class="CaptchaTxtField" placeholder='ABCDEF'/>
</div>
<input class="ripplelink btnSubmit btn3" id="ContactForm1_contact-form-submit" type="button" value="Submit Form"/>
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message"></div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

// JavaScript
<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1073714491323681147';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1073714491323681147','//www.inputekno.com/','1073714491323681147');
_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': '1073714491323681147', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
 //]]></script>

<script>//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('8 i;5 j(){8 a,t=v 1a("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");1b(a=0;a<6;a++)8 e=t[3.9(3.b()*t.7)],o=t[3.9(3.b()*t.7)],c=t[3.9(3.b()*t.7)],r=t[3.9(3.b()*t.7)],n=t[3.9(3.b()*t.7)],h=t[3.9(3.b()*t.7)];i=e+""+o+c+r+n+h,$("#1c").1d().1e(\'<w 1f="x" 1g="1h" k="1i" y="1j"></w>\');8 l=(c=1k.1l("x")).1m("2d"),C=c.k/2,d=v 1n;d.1o="z://1p.1q.10/-1r/1s/1t/1u/1v/1w.1x",d.1y=5(){8 a=l.1z(d,"1A");l.11=a,l.1B(15,15,c.k,c.y),l.1C="1D 1E",l.11="#1F",l.1G="1H",l.1I(i,C,1J)}}5 12(){m p(i)==p($("#4").f())}5 p(a){m a.1K(" ").1L("")}5 1M(){m $("#4").f().7<6?($("#q-g-s").13(),!1):($("#q-g-s").1N(),14(),!0)}5 14(){8 a=12();""==$("#4").f()||1O==$("#4").f()||"1P"==$("#4").f()?(u("1Q 1R 16 1S 1T 1U 16 1V."),$("#4").17()):0==a?(u("18 1W 19"),$("#4").f("").1X("1Y","1Z"),j(),$("#4").17().20()):($("#21").22(23),u("18 19"))}$(5(){j()}),$("#q-g-s").13();$(\'g[24="25-g"], g\').26("<a 27=\'z://28.29.10\' 2a=\'2b\' 2c=\'2e\' 2f=\'2g:2h\'>2i 2j 2k 2l</a>");',62,146,'|||Math|UserCaptchaCode|function||length|var|floor||random||||val|form||cd|CreateCaptcha|width||return|||removeSpaces|ContactForm1_contact||submit||alert|new|canvas|CapCode|height|https|||||||||||||||||||||||||||com|fillStyle|ValidateCaptcha|hide|CheckCaptcha||the|focus|Captcha|Matched|Array|for|CaptchaImageCode|empty|append|id|class|capcode|200|80|document|getElementById|getContext|Image|src|lh3|googleusercontent|WrfhuyrSq3E|XlaFUJIKvsI|AAAAAAAABIM|60gHvagCnb8y2DSPH9nInmtDIM2YgdfOACLcBGAsYHQ|h70|Captcha_BG|png|onload|createPattern|repeat|fillRect|font|26px|Roboto|888|textAlign|center|fillText|55|split|join|validate|show|null|undefined|Please|Enter|captcha|shown|in|Picture|Not|attr|placeholder|ABCDEF|select|WrongCaptchaError|fadeOut|100|name|contact|after|href|softwebtuts|blogspot|rel|dofollow|terget||_blank|style|visibility|hidden|Shared|By|Softweb|Tuts'.split('|'),0,{}))
//]]></script>

Kemudian ganti kode yang ditandai dengan ID blogger dan Alamat blog kamu.

Ganti Kode Deskripsi
1073714491323681147 Ganti ID ini dengan ID Blog kamu
www.inputekno.com Ganti URL Blog atau Situs kamu

5. Jika sudah Kemudian klik publishkan halaman.

Perlu diperhatikan agar contact form berjalan dengan baik perlu terpasang Plugin jquery, jadi buka menu Tema > Edit HTML. Selanjutnya cari kode penutup </head> dan Paste kode dibawah tepat diatas kode tersebut. 

Contacts Form Blogger Captcha

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

6. Save Tema.

Sampai disini tutorial memasang contact form dengan Verifikasi Captcha berhasil, sekarang lihat halaman kontak yang sudah kamu buat tadi dan coba test dengan cara mengirim pesan.


Penutup

Nah itu tadi cara membuat halaman contact form blogger dengan verifikasi captcha, jika terjadi error atau tidak berfungsi silakan berkomentar, semoga bermanfaat.
Photography, Traveler, Blogger, Graphic Designer.
Gabung dalam percakapan