How to Add Stylish Contact Us Page(Contact Form) in Blogger?

How to Add Stylish Contact Us Page(Contact Form) in Blogger?



If you have a Blog in Blogger then you must need a Contact us Page to give your viewers to communicate with you. Blogger has its own Contact page Widget available in the Blogger’s default layout. But these are not good looking or attractive to use it. So today

 I will teach you how to create stylish contact 

form (page) for blogger.



Step 1
First of all, you need to add the blogger contact form widget on your blog. This will enable the functionality of the contact form. So what to do?

Go to your Blogger Dashboard
Select Layout




Click on the Add a Gadget on Sidebar 1 or 2

A popup will show and click add More Gadgets.
Click on the Blue Plus Button on the Contact Form Gadget and then Save it.
I already added so there is no plus button




Now you have added the Blogger Contact Form on your blog. now you have to hide this default blogger contact form widget and make its eye-catching stylish contact form in a  Contact Us page.


Step 2:
To hide default Blogger Contact widget Form

 Click on the Template tab and go to the Edit HTML button.





 Now click edit  HTML  and press ctrl+F button on the keyboard under HTML code box (important)
A search box will appear, where you type the code: ]]></b:skin> and hit Enter.
Now just paste the small CSS code just above this ]]></b:skin>.
Save your template

Code:       
             div#ContactForm1 {
               display: none !important;
               }



Reload your blog and you will see the default contact widget disappears.


Step 3

we have used some Font Awesome icons in these blogger contact widget form. So you will have to put this style sheet into your blogger

on the HTML area search for </head> tag.
Copy the code below and paste it right above the </head>.
Click the Save Template button.

Code:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>



Step 4
finally, you can create static Contact Us page for the blogger. For doing this, now we must create a contact us page form on our blog.

 Go to the Pages and click on the New page button.
Fill up the Page Title with Contact Us/Contact ME/Contact and click on the HTML tab.
 Now copy the following code and paste it into the HTML mode of the page, not on the compose mode

code

<form name="contact-form"><span><i class="fa fa-pencil-square-o"></i> Name </span><br /> <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> <br /> <br /> <span><i class="fa fa-envelope-o"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span> <br /> <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <br /> <br /> <span><i class="fa fa-keyboard-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span><br /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br /> <input id="ContactForm1_contact-form-submit" type="button" value="Send" /> <br /> <div style="max-width: 222px; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><br /><style scoped="" type="text/css"> #comments,.post_meta,#blog-pager {display:none;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{ height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;} #ContactForm1_contact-form-email-message{width:95%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);} #ContactForm1_contact-form-submit{font-family:'Open Sans';float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease} #ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;} .contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;} .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}} </style>



 go to the Options
 Select Readers Comments tick Don’t allow, hid existing.
on compose mode slect show html literally
on line break slect use <br> tag
click done and publish

COMMENTS

BLOGGER
Name

7zip for pc,2,7zip how to password protect,1,802.11 n driver for windows and mac,1,adb fastboot driver,2,all gsm dongle price,1,all latest flashing tool,2,all model edl test point,1,all usb driver for mac and windows,1,all usb driver mac and pc,1,apple icloud unlock,2,asus frp,1,Backuptrans Android iPhone WhatsApp Transfer,1,blogger tutorial,1,BLOGGING,3,coolpad up down stuck,1,cpu type,1,disable windows defender,1,eft dongle latest free,1,FLASHING TOOL,2,frp apk,1,frp download,2,frp tool,27,frp tutorial,22,frp unlock file,8,FRP UNLOUK ALL SAMSUNG WITHOUT PC NO LOCK SIM AND NO TALKBACK,1,gionee s11 frp,1,grt dongle final,1,grt dongle pro free,1,grt lg frp free,1,gsm flasher pro,1,How can I get back out of the adb sideload screen?,1,How to Block Adblock Detection,1,how to find locked smartphone model number,1,huwaei frp tool,1,inferno tool free,1,insurance company,1,KEYBOARD SHORTCUTS,1,LATEST FRP DONGLE WORKING WITHOUT DONGLE,21,latest frp tool working without box,22,lava z series frp,1,lenovo k8 note frp and fix dl,1,mac os x 7zip,1,make money online without investment,1,make money with cse,1,mi a1 a2 a2 lite redmi go mi a3 frp tool,1,mi8pro frp,1,Miracle Box 2.82 thunder edition free,1,miracle box bootdata err fix,1,miracle box tutorial,3,miracle box v3.02 working,1,miracle start button fixer,1,MIUI 11 Latest Fastboot Flashing ROM,1,moto cplus frp file,1,moto frp tool,1,mrt 3.19 working without dongle,1,mrt 3.53 working without dongle,1,mrt dongle download 2.60 free,1,MTK Security Unlock Tool,1,nokia 1 (ta-1066) frp 124 kb small file,1,oppo a71 cph1801 frp pattern remove,1,original setup,1,PassFab iPhone Unlocker latest,1,PC,6,push notification for blogger,1,qpt tool latest,1,read pattern,1,redmi 6 and 6a miaccount frp remeve tool,1,redmi note 5 pro frp and mi account remove,1,redmi note 7 frp mi account,1,samsung firmware downloader,1,smartkey frp tool,1,sp tool error fix,1,spd frp,1,stylish contact form for blogger,1,uat 5.01 free,1,uat frp tool free,1,umt,1,umt dongle working without dongle,1,umt qc fire,1,USB DRIVERS,4,virtual serial port pro for miracle box unstable comport,1,vivo model checker,1,vivo y71 frp,1,vivo y81 y83 y83pro y85 y91 y93 frp done by miracle box 2.82,1,Vivo Y91 Y93 Y95 V11 Qualcomm Screen Lock remove,1,windows errors and fix,1,with dongle,1,z3x pro samsung frp tool free,1,
ltr
item
TECH&TIPS NEWS: How to Add Stylish Contact Us Page(Contact Form) in Blogger?
How to Add Stylish Contact Us Page(Contact Form) in Blogger?
https://1.bp.blogspot.com/-PvPFFckQlbk/XTxfXTeW8SI/AAAAAAAAAJs/zH1rGH2DjjM3DbbaGmfJJ6ejapT4m3QeACLcBGAs/s320/How%2Bto%2BAdd%2B_Stylish%2BContact%2BUs%2B_Page%2528Contact%2BForm%2529%2Bin%2BBlogger_WWW.TECHANDTIPSNEWS.COM.jpg
https://1.bp.blogspot.com/-PvPFFckQlbk/XTxfXTeW8SI/AAAAAAAAAJs/zH1rGH2DjjM3DbbaGmfJJ6ejapT4m3QeACLcBGAs/s72-c/How%2Bto%2BAdd%2B_Stylish%2BContact%2BUs%2B_Page%2528Contact%2BForm%2529%2Bin%2BBlogger_WWW.TECHANDTIPSNEWS.COM.jpg
TECH&TIPS NEWS
https://www.techandtipsnews.com/2019/07/how-to-add-stylus-contact-us.html
https://www.techandtipsnews.com/
https://www.techandtipsnews.com/
https://www.techandtipsnews.com/2019/07/how-to-add-stylus-contact-us.html
true
4969091555394999229
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 PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network 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 Table of Content