Buy Plus UI v2.6! Demo Buy Now!

How to Create Stylish Neumorphic Design Contact Us Page

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

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.

How to Create Stylish Neumorphic Design Contact Us Page

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

  1. Go to Blogger Dashboard.
  2. Now Go to Pages section.
  3. Now click on New Page.
    Create a New Page On Blogger
  4. Now give that page name. (Recommended Contact Us)
  5. After that Publish the page.

Step 2

Getting Blog ID

  1. Go to your Blogger dashboard.
  2. Now look in the url section and look for your Blog I'd looking like below.
Copy the Blog I'd and keep it somewhere.

Step 3

Adding Script to Page

  1. Now go to Pages section.
  2. Open the Contact Us Page we created.
  3. Now switch to HTML view from Compose view.
    Html view mode on blogger
  4. 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.

Getting Info...

About the Author

Hello Friends. Welcome to my website. I hope you all are doing good. If you like our work. Please revisit again. And do like and follow our blogs.

Buy me a Coffee

1 comment

  1. Thanks for sharing this tutorial.
    Love from Nexozed.
    Find out cool Blogging Tips, Tricks, Tutorials here Nexozed
Please do not spam in the comment section or your comment will not be approved.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.