How to Create Neumorphism Contact Form Widget With Google Captcha For Blogger

Hi friends, Today I gonna provide to Codes to create Neumorphism  Contact Form Widget for Blogger Website with Googe Recaptcha.  So, Here We Go.

What is Neumorphism?

The term "neumorphism" refers to a new approach to skeuomorphic design. Even though it is related to skeuomorphism, neumorphism focuses on the complete UI design style. The focus here is on the color pallet rather than the difference or similarity between the physical and digital worlds.

What is Recaptcha?

Google's reCAPTCHA is a free service that protects websites against spam and abuse. A "CAPTCHA" is a Turing test used to distinguish between humans and bots. You may restrict automated software while allowing your welcome users to enter with ease by adding reCAPTCHA to a site.

How to Install?

• Open your Blogger Dashboard.
• Go to Edit HTML.
• Now, Search for b: skin and Paste CSS given below just above it. 

/* Contact Form */
.ContactForm .widget-content{width:330px;background:#dde1e7;border-radius:10px;padding:40px 30px;box-shadow:-3px -3px 7px #ffffff73,2px 2px 5px rgba(94,104,121,0.288)}
.ContactForm .widget-content .widget-contact-title{font-size: 25px;font-weight: 600;margin-bottom: 25px;color: #000;}
.ContactForm .flex{display:flex;justify-content:between;gap:20px}
.ContactForm textarea{min-width:100%;max-width:100%;min-height:8rem;height:auto}
.ContactForm input,.ContactForm textarea{height:100%;width:100%;padding:15px;font-size:18px;outline:none;border:none;color:#595959;margin-bottom:1rem;background:#dde1e7;border-radius:15px;box-shadow:inset 2px 2px 5px #babecc,inset -5px -5px 10px #ffffff73}
.ContactForm ::placeholder{color:#666666;margin-top:10px}
.ContactForm input:focus,.ContactForm textarea:focus{background:#dde1e7;box-shadow:inset 2px 2px 5px #babecc,inset -1px -1px 2px #ffffff73}
.ContactForm .contact-form-button-submit{margin:25px 0 25px 0;width:100%;height:50px;color:#000;font-size:18px;font-weight:600;background:#dde1e7;border:none;outline:none;cursor:pointer;border-radius:25px;box-shadow:2px 2px 5px #babecc,-5px -5px 10px #ffffff73}
.ContactForm .contact-form-button-submit:focus,.contact-form-button-submit:hover{color:#3498db;box-shadow:inset 2px 2px 5px #babecc,inset -5px -5px 10px #ffffff73}
.ContactForm .contact-form-error-message-with-border:not(:empty),.contact-form-success-message-with-border:not(:empty){padding-left:17px;padding-right:17px;padding-top:6px;padding-bottom:6px;border-radius:5px;line-height:30px;background:#dde1e7;box-shadow:2px 2px 5px #babecc,-5px -5px 10px #ffffff73}
.ContactForm .contact-form-error-message-with-border:not(:empty),.contact-form-success-message-with-border:not(:empty):hover{color:#3498db;box-shadow:inset 2px 2px 5px #babecc,inset -5px -5px 10px #ffffff73}
.ContactForm .contact-form-error-message-with-border:not(:empty):before{content:"\f071";font-family:"Font Awesome 5 Pro";margin-right:5px}
.ContactForm .contact-form-success-message-with-border:not(:empty):before{content:"\f058";font-family:"Font Awesome 5 Pro";margin-right:5px}
.ContactForm img.contact-form-cross{cursor: pointer;}
.ContactForm .centerify{display:grid;place-items:center;margin-bottm:1rem;}

• Now, Search for body and paste the JS script given below just above it.

 <script async='async' src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&amp;render=explicit'/>
 <script>
   //<![CDATA[
(function(_0x280e69,_0x3fbac8){var _0x4fd7c0=_0x5a21,_0x21b6c8=_0x280e69();while(!![]){try{var _0x65efe9=parseInt(_0x4fd7c0(0x8c))/0x1*(parseInt(_0x4fd7c0(0x98))/0x2)+-parseInt(_0x4fd7c0(0x9a))/0x3*(-parseInt(_0x4fd7c0(0x95))/0x4)+-parseInt(_0x4fd7c0(0x9c))/0x5*(parseInt(_0x4fd7c0(0x8d))/0x6)+parseInt(_0x4fd7c0(0x8a))/0x7+-parseInt(_0x4fd7c0(0x9b))/0x8+parseInt(_0x4fd7c0(0x90))/0x9*(-parseInt(_0x4fd7c0(0x91))/0xa)+parseInt(_0x4fd7c0(0x8e))/0xb;if(_0x65efe9===_0x3fbac8)break;else _0x21b6c8['push'](_0x21b6c8['shift']());}catch(_0x174c18){_0x21b6c8['push'](_0x21b6c8['shift']());}}}(_0x56c5,0x1b198));var onloadCallback=function(){var _0x2b88e4=_0x5a21;grecaptcha['render'](_0x2b88e4(0x99),{'sitekey':'6Lc33DkdAAAAAD6UsHIvvt7VWGvPerm54TiEW2EU','theme':_0x2b88e4(0x96),'callback':correctCaptcha,'expired-callback':expiredCaptcha,'error-callback':errorCaptcha});},correctCaptcha=function(_0x1255bc){var _0xdf5e41=_0x5a21;document[_0xdf5e41(0x97)](_0xdf5e41(0x93))[_0xdf5e41(0x8f)][_0xdf5e41(0x94)](_0xdf5e41(0x92));},expiredCaptcha=function(_0x5ec5d6){var _0x4ea973=_0x5a21;document[_0x4ea973(0x97)](_0x4ea973(0x93))[_0x4ea973(0x8f)][_0x4ea973(0x8b)](_0x4ea973(0x92));},errorCaptcha=function(_0x5cd855){var _0x39aec9=_0x5a21;document[_0x39aec9(0x97)]('.contact-form-button-submit')[_0x39aec9(0x8f)][_0x39aec9(0x8b)](_0x39aec9(0x92));};function _0x5a21(_0x5eeb5c,_0x17df9e){var _0x56c592=_0x56c5();return _0x5a21=function(_0x5a2182,_0x2c2085){_0x5a2182=_0x5a2182-0x8a;var _0x1e7628=_0x56c592[_0x5a2182];return _0x1e7628;},_0x5a21(_0x5eeb5c,_0x17df9e);}function _0x56c5(){var _0x52f523=['198376oovOJm','1610zRhQzs','60242jafaHF','add','431VERGaT','3642mKFrEB','1852972InJtbb','classList','234216MGGCaG','30trWKaP','hidden','.contact-form-button-submit','remove','554952bLWhVO','light','querySelector','434YDgjEh','kkupgrader_captcha','3evtjFz'];_0x56c5=function(){return _0x52f523;};return _0x56c5();}
//]]>
</script>

• Now, Find your Old Contact Form Widget (If doesn't exist, then create one.) and replace the whole widget with the below newer version of it.

<b:widget id='ContactForm1' locked='true' title='Contact Us' type='ContactForm' version='1'>
     <b:includable id='main' var='this'>
                    <b:include name='content'/>
                </b:includable>
     <b:includable id='contact-form-content'>
<div class='widget-content'>
<form name='contact-form'>
<div class='widget-contact-title centerify'>Contact Us</div>
<div class='flex'>
<input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' expr:placeholder='data:contactFormNameMsg' name='name' size='30' type='text' value=''/>
<input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' expr:placeholder='data:contactFormEmailMsg + &quot; *&quot;' name='email' size='30' type='text' value=''/>
</div>
<textarea class='form-control' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' expr:placeholder='data:contactFormMessageMsg + &quot; *&quot;' name='email-message' rows='5'>
</textarea>
<div class='centerify mb-4'>
 <div class='m-auto' id='kkupgrader_captcha'/>
     
</div>  
<div class='centerify mb-4'>   
              <button class='contact-form-button-submit   hidden' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' type='button'><data:contactFormSendMsg/></button>
            <span class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
            <span class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
            </div>
</form>
   </div>
    </b:includable>
     <b:includable id='content'>
                    <b:include name='contact-form-content'/>
                </b:includable>
   </b:widget>

Conclusion:-

So, this was How to Create Neumorphism Contact Form Widget With Google Captcha For Blogger. And this Advanced widget will help your Blogger Site to prevent spam and bots. Additionally, it's made up of Neumorphism/ Soft UI which provides it better UI finish.

Stay Tuned with us. If you liked this post please give Feedback or face any issues in then ask in Comment Section.