Cara Membuat Contact Form Blogger dengan Verifikasi Captcha

// 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.idecara.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>

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

Penutup