How to Create Contact Form in Blogger: Adding a contact form to Blogger is a difficult task, as it does not allow plugins like WordPress. Most bloggers of BlogSpot take help of third-party sites (like foxyform, jotform).
Blogger has its own contact form widget available, but they are not nice or attractive to use. So today we will learn how to create a custom contact form for blogger.
Create Blogger Stylish Contact Page – Contact Form in Blogger
I have divided this tutorial into three sections, add Contact Gadget, Hide Gadget and implement the official code in a new page.
1. Add Contact Gadget
First of all, you need to add blogger contact form widget to your blog. This will enable the functionality of your contact form. What to do for this?
Step 1: Go to your Blogger Dashboard / Overview.
Step 2: Select the Layout section from the menu.
Step 3: Click on Add a Gadget here.
Step 4: A popup show and click on More Gadgets.
Step 5: Click on the Blue Plus Button on the Contact Form Gadget and then save it.
Now you have successfully added Blogger Contact Form Widget to your blog. Next You have to hide this default contact widget to make Contact Us page more stylish.
2. Hide the Gadget
To hide the default Blogger contact form, you have to follow these steps.
Step 1: Click on the Template menu and go to the Edit HTML button.
Step 2: Now tap on HTML area and press ctrl + F button on keyboard.
Step 3: A search box will appear, here you enter this code by typing ]]></b:skin>.
Step 4: Now just paste the small CSS code above this code ]]></b:skin>.
div#ContactForm1 {
display: none !important;
}
Save your template and you are done.
3. Add Contact Form to Page
Now you can create a static Contact Us page for blogger. To do this, we need to create a contact page on our blog.
- Go to the Pages section and click on the New page button.
- Fill the page title with Contact Us/Contact and click on the HTML tab.
- Now copy the following code and paste it in the HTML mode of the page.
Copy Complete Code from Here
<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><div><a href="https://oyepandeyji.com/instagram-malik-kis-desh-ka/"><span style="color: white;">Instagram</span></a></div>Now you go to Options. Under Readers Comments, select Don’t allow, hide existing and click on Done button.
Publish the page, you can see the contact form on your blog.
The messages sent from this contact form are delivered to the admin email.
Read More:
- How to start blogging
- Benefits of YouTube for Blogging
- How to Auto Blogging
- How to Create a Micro Niche Blog
- How to Become a Successful Blogger
- Top 10 WordPress Themes Free
- How to Upload WebP Files on WordPress?
I hope now you have got to know how to add contact us page in Blogger. If you do not get any message even after the success message, then I would recommend to reinstall the Contact widget.
If you have enough knowledge in dealing with CSS and JavaScript snippets, then you can customize the page for better visualization.
Do not forget to share this post with your blogger friends.
