Create Stylish Contact Us Form Page 2021 It's not difficult task to do it's just a matter of html coding that you have to copy and paste into you blogger theme edit section.
What Beginner Blogger think, that in blogger contact us layout only the source by which they can receive visitors queries if they want to contact him. Dammm true.... If so comments down what you was thinking when you was Beginner in Blogging Platform.
Day by day all are growing in every field as per in programing aslo change alot by html you can do many stylish design of your blog post (Contact Us Page) and make visitors engaged and take there attention from other site to yours.
Why a Blogger should have a Contact Us Page
To avoid spamming like if you gonna use your Email if by chance anyone spam your Email that there will big problem to find valuable mail's of visitors.
It's main reason why blogger should have contact form you can you best plugin to design contact us page in WordPress.
Another is if any visitors wanna contact you so they can use contact us page and connect with you.
#How To Add Contact Us Page?
To make it work first you have to add default contact form Gadget in blogger sidebar before making fancy contact us static page.
- Sign into your Blogger Dashboard > Layout > Sidebar Section > Add Elements > Select Contact Form > Click Save & Done
How to Hide Default Sidebar Contact From Static Gadget?
To Hide Default Sidebar Contact From Gadget what you need to do just a simple step is : Go to Blogger Dashboard Theme Section > Edit Html > Find Html Code - ]]></b: skin >Above this Code Paste > # ContactForm1{display: none! important; } > Save Edit & Done Refresh your blog website and see sidebar contact form will disappear.
After adding contact form gadget in sidebar of your blogger it not look good if you create custom contact us page so you need to hide it by just following this simple steps:
1. Go to Blogger Dashboard > Theme Section > Edtit Theme > Once html code appear then click CTRL + F to open the html search box.
2. Inside the HTMl Search Box copy and page below code and hit enter to find it.
2. Inside the HTMl Search Box copy and page below code and hit enter to find it.
]]></b: skin >3. Add the below CSS code just above > ]]></b: skin
# ContactForm1{display: none! important; }4. Now save the edit theme & refresh you blog website you will se there is no contact form in your sidebar.
How To Create Stylish, Fancy Contact Us Page?
To give permission to visitors to communicate with you it is thumping to add contact us page in your blogger website so that visitors easy communicate with you. It isn't hard to add a custom blogger page into your Blogger Website.
Fist of all you need to do some changes in your page options, Fill the title Contact Us, Go to Html edit > Page Settings Disallow Some Features > Don't Allow, Reader Comments, Show Html literally, Compose Mode, Use <br> tags line break.
&
<style type="text/css">
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px;background:#fff}.contact-title{text-align:center;font:41px fantasy;color:#121212;margin-bottom:25px}.contactf-name,.contactf-email{float:left;width:47%}.contactf-name{margin-right:6%}.name-icon img,.email-icon img{background:transparent!important;border:medium none!important;box-shadow:none!important;padding:11px 0!important;width:16px !important;height:16px !important;}.name-icon,.email-icon{position:absolute;z-index:1}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 25px;padding:10px 10px 10px 25px;font:bold 16px cursive;text-shadow:0 1px 2px #ddd;color:#121212;background:transparent!important;border-color:#121212;border-width:0 0 2.5px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message,.contact-form-email-message:hover,.contact-form-email-message:focus{padding:10px!important}.contact-form-email-message{height:150px;border-width:2.5px!important}.contact-form-button-submit,.contact-form-button-submit:hover{background:#121212!important;width:30%;height:37px;font:bold 13px "Lucida Grande";letter-spacing:2px;color:#fff;text-align:center;border:medium none;cursor:pointer;display:block;margin:0 auto;outline:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;}
</style>
<div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><h2 class="contact-title">Get in touch.</h2><div class="form"><form name="contact-form"><div class="contactf-name"><div class="name-icon"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmX9ysdEH8OMo5n3qC4YXyOAiAIKexQPmFqAbR0ZX-O8gSjdbnqZ1XMXPYXCLjBSzhO05jhElve1cCuLB9ejpANSgE0ui8iDGwt_w5q5nyTsiSCBk-9P4tqQDCvT3jyfxI-uAIvyDTtm9Z/s1600/avatar%25281%2529.png" width="16" height="16" /></div><input class="contact-form-name" id="ContactForm1_contact-form-name" name="Name" size="30" type="text" value="Name" onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}' /></div><div class="contactf-email"><div class="email-icon"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHTIfmr9Qk15TQiRjY2HeTy4pl8SJhrFAjLBVKZH_SkbU6oUllGJFExPg_J-oq_TL6U4fp6x5RLBNjPeS8ONhmyhPCSCjqfYw3FsDJ5JoY8nx2eaXrbv4is5cYP1LZRsRWV21qvv4rpWf2/s1600/envelope%25281%2529.png" width="16" height="16" /></div><input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" size="30" type="text" value="E-mail address" onblur='if (this.value == "") {this.value = "E-mail address";}' onfocus='if (this.value == "E-mail address") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." rows="5" value="Type your message here..." onblur='if (this.value == "") {this.value = "Type your message here...";}' onfocus='if (this.value == "Type your message here...") {this.value = "";}'></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND" /><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form></div></div></div>Copy this above code and paste into your blogger Contact Page Html section and simply Published it.
Conclusion
In this article I've explained you How to add custom stylish contact us page into your blogger website hope you guys got it and implement all the above steps into your blog & created custom stylish contact us page.
If so then let's me know in comment section below :)
0 Comments