So hello Blogger's how are you. I hope you are doing good. Welcome to Tech Aadi blog and here I am Sadab Ali.
Today we are going to see tutorial of How to Create Stylish Neumorphic Design Contact Us Page for Blogger.
So let's start the process.
Before proceeding please backup your blog template for any kind of errror and easy restoration.
Adding Neumorphic Style Contact Us Form
There are three steps you have to follow to create the contact us page.
Step 1
Creating Contact Us Page
- Go to Blogger Dashboard.
- Now Go to
Pagessection. - Now click on
New Page. - Now give that page name. (Recommended Contact Us)
- After that Publish the page.
Step 2
Getting Blog ID
- Go to your Blogger dashboard.
- Now look in the url section and look for your Blog I'd looking like below.
Step 3
Adding Script to Page
- Now go to Pages section.
- Open the Contact Us Page we created.
- Now switch to HTML view from Compose view.
- Copy the below given codes and paste it in the page. (Remember in HTML mode)
<div class='tech-aadi-net' id='ContactForm1'>
<form name='ContactForm'>
<div class='tech-aadi-in icon-user'>
<input id='ContactForm1_contact-form-name' name='name' placeholder='Name' type='text'/>
<label>Name</label>
</div>
<div class='tech-aadi-in icon-email'>
<input id='ContactForm1_contact-form-email' name='email' placeholder='Email' type='text'/>
<label>Email</label>
</div>
<div class='tech-aadi-in icon-msg'>
<textarea id='ContactForm1_contact-form-email-message' name='message' placeholder='Content' rows='3'></textarea>
<label>Content</label>
</div>
<div class='tech-aadi-in outset'>
<input id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
</div>
<div class='tech-aadi-notif'>
<div id='ContactForm1_contact-form-error-message'></div>
<div id='ContactForm1_contact-form-success-message'></div>
</div>
</form>
</div>
<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script>
<script>
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) {
window['blogger_templates_experiment_id'] = 'templatesV1';
window['blogger_blog_id'] = '0000000000000000000';
BLOG_attachCsiOnload('');
}
_WidgetManager._Init('//www.blogger.com/rearrange?blogID\0000000000000000000', '//www.domain-name.com/', '0000000000000000000');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {
'contactFormMessageSendingMsg': 'To Send...',
'contactFormMessageSentMsg': 'Your Message Has Been Sent..',
'contactFormMessageNotSentMsg': 'Cannot send message. Please try again later.',
'contactFormInvalidEmailMsg': 'A valid email address.',
'contactFormEmptyMessageMsg': 'The message field cannot be left blank.',
'title': 'Contact Form',
'blogId': '0000000000000000000',
'contactFormNameMsg': 'Name',
'contactFormEmailMsg': 'Email',
'contactFormMessageMsg': 'Message',
'contactFormSendMsg': 'Send',
'submitUrl': 'https://www.blogger.com/contact-form.do'
}, 'displayModeFull'));
var inputs = document.querySelectorAll('.tech-aadi-in input[type=text], .tech-aadi-in input[type=email], .tech-aadi-in textarea');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.addEventListener('input', function() {
var bg = this.value ? 'show' : 'none';
this.setAttribute('class', bg);
});
}
</script>
<style>
/* CSS blogger contact form */
.tech-aadi-net{position:relative;display:inline-block;width:100%;max-width:500px;padding:30px 10px 10px 10px;background-color:#f2f3f7;border-radius:10px}
.tech-aadi-in{position:relative;margin-bottom:30px;margin-right:5px}
.tech-aadi-in input[type=text]::placeholder,.tech-aadi-in textarea::placeholder{color:#999!important;font-size:14px}
.tech-aadi-in input:focus::placeholder,.tech-aadi-in textarea:focus::placeholder {color: transparent!important}
.tech-aadi-in label{border-radius:10px;color:#999;font-size:12px;font-weight:400;position:absolute;pointer-events:none;left:30px;top:-15px;transition:.2s ease all;padding:0 10px;background-color:#f2f3f7;box-shadow:-3px -2px 4px rgb(255 255 255 / 90%), 5px 5px 8px rgb(0 0 0 / 7%);display:none}
.tech-aadi-in input[type=text]:focus + label,.tech-aadi-in input[type=text].show + label,.tech-aadi-in textarea:focus + label,.tech-aadi-in textarea.show + label{display:block;}
.tech-aadi-in input[type=text],.tech-aadi-in textarea,.tech-aadi-in.outset input[type=button]{background-color:#f2f3f7;box-shadow: inset 0.2rem 0.2rem 0.5rem rgb(0 0 0 / 7%), inset -0.2rem -0.2rem 0.5rem rgb(255 255 255 / 90%);padding:15px 15px 15px 40px;border-radius:5px;border:none;outline:none;width:100%}
.tech-aadi-in.outset input[type=button]{background-color:#f2f3f7;box-shadow: -3px -2px 4px rgb(255 255 255 / 90%), 5px 5px 8px rgb(0 0 0 / 7%);width: 100px;text-align: center;padding-left:15px;margin: -50px auto;color:#999;font-weight:bold}
.tech-aadi-in.outset input[type=button]:active {box-shadow: inset 0.2rem 0.2rem 0.5rem rgb(0 0 0 / 7%), inset -0.2rem -0.2rem 0.5rem rgb(255 255 255 / 90%)}
.tech-aadi-in input[type=text]:active,.tech-aadi-in input[type=text]:focus,.tech-aadi-in textarea:active,.tech-aadi-in textarea:focus{outline:none}
.tech-aadi-notif{color:#ff0000}
.tech-aadi-in.icon-user:before{content:"";position:absolute;left:10px;top:0;bottom:0;width:20px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='%23aaaaad'><path d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'></path></svg>") center / contain no-repeat}
.tech-aadi-in.icon-email:before{content:"";position:absolute;left:10px;top:0;bottom:0;width:20px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='%23aaaaad'><path d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z'></path></svg>") center / contain no-repeat}
.tech-aadi-in.icon-msg:before{content:"";position:absolute;left:10px;top:-50px;bottom:0;width:20px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='%23aaaaad'><path d='M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H10V20.09L12.09,18H6V16H14.09L16.09,14H6V12H18.09L20,10.09V8L14,2H6M13,3.5L18.5,9H13V3.5M20.15,13C20,13 19.86,13.05 19.75,13.16L18.73,14.18L20.82,16.26L21.84,15.25C22.05,15.03 22.05,14.67 21.84,14.46L20.54,13.16C20.43,13.05 20.29,13 20.15,13M18.14,14.77L12,20.92V23H14.08L20.23,16.85L18.14,14.77Z'></path></svg>") center / contain no-repeat}
/* CSS dark mode adjust class */
.drkM .tech-aadi-net,.drkM .tech-aadi-in label,.drkM .tech-aadi-in input[type=text],.drkM .tech-aadi-in textarea,.drkM .tech-aadi-in.outset input[type=button]{background-color:#2d2d30;color:#aaaaad}
.drkM .tech-aadi-in input[type=text],.drkM .tech-aadi-in textarea,.drkM .tech-aadi-in.outset input[type=button]:active{box-shadow: inset 0.2rem 0.2rem 0.5rem rgb(36 36 36), inset -0.2rem -0.2rem 0.5rem rgb(32 32 32)}
.drkM .tech-aadi-in.outset input[type=button],.drkM .tech-aadi-in label{box-shadow:-3px -2px 4px rgb(36 36 36), 5px 5px 8px rgb(32 32 32)}
</style>Change the marked part like this in script with your Blog ID that we got in Step 2 000000000000000000, Please change your Blog address with the marked part like this www.domain-name.com .
After following all this steps I hope you have successfully installed the Stylish Neumorphic Design Contact Us Page for Blogger Blog. If you got any error kindly contact us.
Conclusion
So today we have talked about How to Create Stylish Neumorphic Design Contact Us Page for Blogger blog. I hope you like this article and please follow our blog for daily post like this.