Today in this post we will know that Create a Stylish Contact Form Page for Blogger/Blogspot. Here I will tell you the method that will give a professional look to the Contact Us page of your blog which will almost look like a WordPress blog.
Read More: How to Add Responsive Bottom Sticky Ads in Blogger
Blogger is a Free Platform where you do not get the facility to create a Stylish Contact Us Page whereas there are many Plugins available to create Contact Us Page in WordPress.
Although the Contact Form Widget is also given in the Layout section of Blogger, they are not attractive at all, to those who are good bloggers.
Benefits of Contact Us Form Page
Contact Us Page Form is very important for all bloggers, so definitely make it –
- If our visitors have any problem and want to contact us directly.
- Someone can make direct contact with you for advertising.
- Adsense also gives importance to it and approves Adsense Accounts quickly.
How to Create a Stylish Contact Form Page for Bloggers
First you have to enable the Default Contact Form Widget by going to the layout of your blog . For this you follow the steps mentioned below.
1. First of all go to Blogger Dashboard and click on Layout
2. Now click on Add a Gadget anywhere in the Layout
3. Now click on + in front of the Contact Form and save the template.
Now we will hide this Default Contact Form because we want a Stylish WordPress-like Contact Form. So first of all copy the codes given below and follow the further steps carefully.
div#ContactForm1 {
display: none !important;
}
Step 1.
Go to Blogger’s Dashboard and click on Theme.
Step 2.
Now you have to click on the Down Arrow on the side of Customization and go to Edit HTML.
Note: Before changing to coding, you must take a backup of the theme.
Step 3.
Now search ]]></b:skin in the search bar and paste the codes just above it, now save the theme.
Just in this way, now half of our work is done. We added a Default Contact Form and then Hide it through a little code and now we are going to make the Form Stylish through HTML Code, so let’s know how to make it Stylish.
Step 1.
First of all the codes given below copy them.
<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;">*</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;">*</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:100%;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><div><a href="https://www.codebarta.com/"><span style="color: white;">CodeBarta</span></a></div>
Note : At the bottom of this code will be the URL and name of my blog, replace it with the URL and name of your blog.
Step 2.
Now go to Blogger>>Dashboard>>Pages and create a new page and give it the title of Contact Us.
Step 3.
Now click on the Pencil Icon and select HTML View
Step 4.
Now paste the codes you copied in this page.
So friends now select Compose View and preview and see that your Stylish Contact Form has been added.
I hope you must have liked this post and your problem would have been solved by How to Create a Stylish Contact Form Page for Blogspot. If this post has helped you, then definitely tell me by commenting so that I also get motivation to give you similar information.