How to Create a Blogger Contact Form with Captcha Verification

How to Create a Contact Form on Blogger with Easy and Latest Google Captcha Verification. With the captcha feature, blogger contacts will be safe.

 Creating a Blogger Contact Form Page - The contact page is a must-have feature on a blog or website. Where with the contact page, visitors will find it easier to contact the administrator or blog owner if there are things that need to be asked or other things, for example related to cooperation.

Blogger-Contact-Form-with-Captcha-Verification
Blogger Contact Form with Captcha Verification


Installing a contact page on a blog is very easy, depending on what platform you use, if you create a contact page on wordpress, you can use the contact form 7 plugin which supports the captcha verification feature.


Then how on Blogger? Blogger has also provided a contact widget that can be installed easily, but unfortunately it doesn't support captcha verification and can only be installed on the sidebar, not on static pages.


Creating a Contact Form With Captcha Verification on Blogger

Captcha verification is very useful to avoid spamming and bot users, usually this process is applied to the comments field or login form to ensure that the user is indeed not booted.


Now in this tutorial I will share a tutorial on how to add a contact form on the blogger page with Captcha Verification , the goal is to avoid spam emails sent via the contact form on blogger. 


1. The first step is to login to your blogger account dashboard .

2. Then go to the Page menu , then create a New Page

a Blogger Contact Form
Blogger Contact Form with Captcha Verification


3. Create a page name for example " Contact Us " or whatever. Then change the Compose page view to HTML mode .

How to Create a Blogger Contact Form
How to Create a Blogger Contact Form page


4. Then copy the code below and paste it on the page.


// Contact Form code
// 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.xxxxx.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>

Then replace the code marked with your blogger ID and blog address.

Change Code description
1073714491323681147 Replace this ID with your Blog ID
www.xxxxx.com Change your Blog or Site URL

5. If you have then click publish page .

It should be noted that in order for the contact form to run properly, the jquery plugin needs to be installed, so go to the Themes menu > Edit HTM L. Next, look for the closing code </head> and paste the code below just above the code. 


Contact Form with Captcha Verification



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

6. Save .

So far, the tutorial on installing a contact form with Captcha Verification is successful, now look at the contact page that you created earlier and try to test it by sending a message.

Closing

So, that was how to create a blogger contact form page with captcha verification, if an error occurs or it doesn't work, please comment, hopefully it will be useful.