no-style

close

Contact Us Form with Captcha Verification For Blogger

Contact form with captcha verification for blogger
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.

Demo

When I started this blog I shared the code for contact us form and provide you the steps to add it into your blogger blog or website.

I made some advancements in that code and added captcha verification functionality 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:

  1. Go to Blogger Dashboard
  2. Go to Pages Section
  3. Click Create New Page
  4. Give your page a suitable title eg: Contact Us and provide useful description.
  5. Now copy the code provided below and paste it as a post content.
  6. <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"] = "457558259419389908";BLOG_attachCsiOnload(""); }_WidgetManager._Init("//www.blogger.com/rearrange?blogID\x3d457558259419389908","https://softwebtuts.blogspot.com/","457558259419389908");
    _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": "457558259419389908", "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>
  7. 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>

So after you have implemented this captcha verification contact us form in your blogger blog you have to replace some of the things which are marked or highlighted in the above code and that are listed below with their descriptions provided in front of them.

Replacements in Code:

ReplacementDescription
457558259419389908Replace this ID with your blog id.
https://softwebtuts.blogspot.comReplace this URL With your blog or website URL.

Without this configuration your captcha verification form will not work so please before viewing the live version of this captcha verification contact us form make sure to replace the highlighted things in the above code.

So after adding the code and after replacing the highlighted code your contact us form with captcha verification is all done now go and have a look on the live version of this contact us form with captcha verification for blogger.

If you are trying to add this contact form with captcha verification in wordpress website then your form will not be submitted because for that you will need another code to submit that form.

Conclusion:

So I hope that you will understand all the things which I have told you in the above steps and if you still have any kind of problem or any kind of issue related to this article please leave your feedback below in the comment section and I will try to resolve all your issues as soon as I can.

Post a Comment

Was this article useful? Please Leave Your Feedback by writing what's in your mind, below.

no-style

no-style

Recent Comments

{getWidget} $results={3} $label={comments} $type={list}