Contact Form for Blogger on Specific Static Page with CSS only


Contact Form for Blogger on Specific Static Page
Contact Form for Blogger on Specific Static Page
I received many requests to make a contact form for Blogger on Static page instead widget, because widget is on side bar and it’s not polite to contact or not friendly with visitors who usually contact us from a stand alone page.
Now, I have a workaround solution will help you display contact form for Blogger on static page with css only. I will release many tips to make contact form with js, jquery, but now, please enjoy with CSS first.

Step 1: Add contact form gadget


Access your blog Layout. Click on any Add a Gadget link. An Add a Gadget window will be shown, click on More Gadgets, and choose add Contact Form.

On Configure Contact Form Widget window, click Save button.

Add contact form for Blogger window

Then just save your contact form
After added Contact form gadget, please drag and drop it below Blog Posts gadget, then click Save arrangement button.
Drag and Drop contact gadget under Blog Posts and Save arrangement

Step 2: Hide contact form widget

Access your blog Template, and click Edit HTML. In HTML editor, find

]]></b:skin>
Then, insert before with the code

.widget.ContactForm {
 display: none;
 }
Open template editor and paste the code

Step 3: Make contact page

Access Page, then create a blank page with a name mean “Contact” or any text you want.
Add Contact Page
In page editor, switch to HTML mode and paste the below code into content field

<style type="text/css">
 .widget.ContactForm {
 display: block;
 }
 .post-footer {
 display: none;
 }
 #blog-pager {
 display: none;
 }
 .blog-feeds {
 display: none;
 }
 .widget.ContactForm .title {
 display: none;
 }
 .widget.ContactForm * {
 max-width: 100%;
 }
 </style>
Then Publish the page.
Add code to static page
Now, you can access your new page and enjoy your contact form.

Here is Example of contact form - View Demo

COMMENTS

Name

Ads Earning Guide,4,AdSense Alternatives,1,Affiliate Marketing,1,Anti-Hacking Solution,2,Bitcoin,1,Blogger SEO,1,Blogger Tutorials,26,Blogger Widget,1,Blogging Tips,11,Business and Marketing,9,BuySellAds,1,Content Marketing,3,Contextual Marketing,2,Copyrighting,1,CPC Keywords,1,Digital Marketing,7,Download,1,Drupal Theme,1,Drupal Tutorials,8,Earning Guide,4,eCommerce Solution,1,Email Marketing,3,Facebook Marketing,1,Games Source Code,2,Google AdSense,4,HTML Script,1,Infographics,2,Information Technology,8,Instagram Marketing,1,Joomla Tutorials,1,jQuery Script,1,JS Script,1,Keyword Research,3,Learn Code,3,Learn CSS,1,Learn HTML,1,Learn XML,2,Make Money Online,6,Media Dot Net,1,MySQL Tips,1,Off Page SEO,1,On Page SEO,2,Online Tools,4,Paid URL Shortener,1,PC Tutorials,7,PHP Development,1,PHP Script,3,PPD File Sharing,1,Reviews,1,SEO Tips,4,Social Marketing,3,Template and Theme,2,Video Marketing,3,Web Design,8,Web Hosting Reviews,1,Website Script,4,WordPress Plugin,2,WordPress Script,1,WordPress Security,2,WordPress Theme,1,WordPress Tools,1,WordPress Tutorial,2,WordPress Tutorials,5,YouTube,1,
ltr
item
Teach Sansar - Leading Digital Technology: Contact Form for Blogger on Specific Static Page with CSS only
Contact Form for Blogger on Specific Static Page with CSS only
Make a contact form for Blogger on Static page instead widget, because widget is on side bar and it’s not polite to contact or not friendly with visitors who usually contact us from a stand alone page.
https://1.bp.blogspot.com/-Fp6rIBjDdCc/WmA2NpVPJfI/AAAAAAAAA6E/HzcdtKfecoYt3Y-m8RHHnBCuTqJSh2F-wCLcBGAs/s640/Contact%2BForm%2Bfor%2BBlogger%2Bon%2BSpecific%2BStatic%2BPage.png
https://1.bp.blogspot.com/-Fp6rIBjDdCc/WmA2NpVPJfI/AAAAAAAAA6E/HzcdtKfecoYt3Y-m8RHHnBCuTqJSh2F-wCLcBGAs/s72-c/Contact%2BForm%2Bfor%2BBlogger%2Bon%2BSpecific%2BStatic%2BPage.png
Teach Sansar - Leading Digital Technology
https://www.teachsansar.com/2018/01/contact-form-for-blogger-on-specific-static-page-with-css-only.html
https://www.teachsansar.com/
http://www.teachsansar.com/
http://www.teachsansar.com/2018/01/contact-form-for-blogger-on-specific-static-page-with-css-only.html
true
5329405941980539054
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy