Contact us form is only the way for visitors on any website to contact to the administrator of that website and every website on internet has its own contact us page.
In WordPress or any other Content Management Systems the captcha verification is most common but in blogger for captcha verification you can only use Google captcha verification which is not easy to implement.
Captcha verification is only used to avoid spamming and to avoid the use of bots on your website for commenting purpose or any other purpose.
Keeping this problem in view I have created a contact us form for blogger users with captcha verification if you want to see the demo of this captcha verification form for blogger click the button below to see the demo.
At the point when I began this blog I shared the code for get in touch with us shape and give you the means to add it into your blogger blog or site.
I made a few progressions in that code and added manual human test check usefulness in it.
Advantages of using Captcha Verification:
There are plenty of advantages that you will be having after adding this contact form in your blogger blog or wordpress website but the main thing for which I have created this contact form with captcha verification is to avoid spamming.
If your website has too much visitors then you will be having a problem of spamming emails and to avoid these spam emails you have to use this contact us form with captcha verification so that you will not get spam emails or messages from your visitors.
Working of Captcha Verification Form:
The working of this captcha verification form is just simple it will hide the submit button until the correct captcha is entered and after the correct captcha is entered the submit button will be automatically enabled and visible.
You can see the working of this captcha verification form on the demo page.
Implementation guide:
I am providing you the steps to implement this contact us form with captcha verification in blogger but if you are trying to add this in WordPress the steps will be the same with some little bit of changes.
To implement this or to add this contact us form with captcha verification in blogger follow the steps as they are provided.
Steps to follow:
- Go to Blogger Dashboard
- Go to Pages Section
- Click Create New Page
- Give your page a suitable title eg: Contact Us and provide useful description.
- Now copy the code provided below and paste it as a post content
<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><script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<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>
<script type='text/javascript'>
if (typeof(BLOG_attachCsiOnload) != "undefined" && BLOG_attachCsiOnload != null) { window["blogger_templates_experiment_id"] = "templatesV1";window["blogger_blog_id"] = "000000000000000000";BLOG_attachCsiOnload(""); }_WidgetManager._Init("//www.blogger.com/rearrange?blogID\x3d000000000000000000","https://itsthemeworld.blogspot.com/","000000000000000000");
_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": "000000000000000000", "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>
- Save Theme/Template
If you your blog does not use jquery plugin in some cases then please add this line of code at the start of the code provided above.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
Replacements in Code:
| Replacement | Description |
|---|---|
| 000000000000000000 | Replace this ID with your blog id. |
| https://itsthemeworld.blogspot.com | Replace this URL With your blog or website URL. |