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

New comments are not allowed.

Archive

Labels

7zip for pc 7zip how to password protect adb fastboot driver all gsm dongle price all latest flashing tool all model edl test point all usb driver for mac and windows all usb driver mac and pc APPLE icloud BYPASS unlock asus frp Backuptrans Android iPhone WhatsApp Transfer blogger tutorial coolpad up down stuck cpu type driver eft dongle latest free frp apk frp download frp tool frp unlock file FRP UNLOUK ALL SAMSUNG WITHOUT PC NO LOCK SIM AND NO TALKBACK gionee s11 frp grt dongle final grt dongle pro free grt lg frp free gsm flasher pro How can I get back out of the adb sideload screen? How to Block Adblock Detection how to find locked smartphone model number huwaei frp tool inferno tool free insurance company KEYBOARD SHORTCUTS latest frp tool working without box lava z series frp lenovo k8 note frp and fix dl mac os x 7zip make money online without investment make money with cse mi a1 a2 a2 lite redmi go mi a3 frp tool mi8pro frp Miracle Box 2.82 thunder edition free miracle box bootdata err fix miracle box tutorial miracle box v3.02 working miracle start button fixer MIUI 11 Latest Fastboot Flashing ROM moto cplus frp file moto frp tool mrt 3.19 working without dongle mrt 3.53 working without dongle mrt dongle download 2.60 free MTK Security Unlock Tool nokia 1 (ta-1066) frp 124 kb small file oppo a71 cph1801 frp pattern remove original setup PassFab iPhone Unlocker latest push notification for blogger qpt tool latest read pattern redmi 6 and 6a miaccount frp remeve tool redmi note 5 pro frp and mi account remove redmi note 7 frp mi account samsung firmware downloader smartkey frp tool sp tool error fix spd frp stylish contact form for blogger uat 5.01 free uat frp tool free umt umt dongle setup free umt qc fire virtual serial port pro for miracle box unstable comport vivo model checker vivo y71 frp vivo y81 y83 y83pro y85 y91 y93 frp done by miracle box 2.82 Vivo Y91 Y93 Y95 V11 Qualcomm Screen Lock remove windows errors and fix with dongle z3x pro samsung frp tool free

Contact Form

Send