Contact Form Style With Css & Html In Blogger / Blogspot

Contact Form Style With Css & Html In Blogger / Blogspot

How are you?
I am fine always.

Today have a Good Day.
I am sharing some of Contact Form Style with css.

Its easy for making custom contact Form.
Many people search in google...

  1. How to create custom contact form
  2. How to style contact form with css and html
  3. How to setup contact form widget in blogger / blogspot
  4. How to customize contact form
All quiestion solution here.

Now have a quiestion What is contact form?
Many people use contact form for communication any help.

Lot of people created stylish contact form.
How nice.

Todays tutorial is going on how to create looking nice custom contact form.
We are use only css and html code.
Lets start going on create best.

How to Add Blogger Contact Form Gadget?
Before adding a custom Blogger contact form to a static page, we need to add the default contact form in the blog's sidebar to make it functional.

Log into your Blogger dashboard and go to "Layout" > click on the "Add a gadget" link on the page elements area.
Select "More Gadgets" below the "Basics" tab and click the "+" button to add the Contact Form Gadget.


Hiding Blogger Contact Form from the Sidebar

Once the contact form has been added, next step is to hide it so that it will appear only in the static page.

1. Go to "Template" and press the "Edit HTML" button. Once the code editor opens, click anywhere inside the code area and press CTRL + F keys (or Command + F for mac) to open the search box.

2. Type or paste the following tag inside the search box and hit Enter to find it: ]]></ b:skin>

3. Just above the  ]]></ b:skin> tag,  add this CSS code:

#ContactForm1{display: none !important;}

4. Click the "Save template" button on the upper left side and view your blog. The contact form widget should be gone.

Adding Custom Blogger Contact Form in a Static Page

Finally, now that we enabled the functionality of the contact form, let's add a custom contact form in our Blogger blog...

1. Go to "Pages" and click the "New page" button. If you already have a Contact us page, just click the "Edit" link below the page title.

2.Once the Page editor opens, fill up the page title with Contact/Contact Us or any title you want to show. It is recommended doing this before anything in order to make the permalink SEO friendly.

3. Click on the HTML tab as there we will add the code to make the custom Blogger contact form work. On the right site, change the Page settings to hide ("Don't allow" or "Don't allow, hide existing") the reader comments, then click the "Done" button:

4. Below are a custom Blogger contact form styles. Pick your favorite and copy the code provided, then paste the code inside the HTML box of your page editor:

Simple Contact Form
Simple Contact Form
Simple Contact Form

DownLod this Code...

পোস্ট রেটিং করুন
About Author

টিউটোরিয়ালটি কেমন লেগেছে মন্তব্য করুন!