How to create Contact us Form in Blogger in 2021?

Posted on

If you are using google blogspot then you have already know that you can not use any plugins on google blogspot, where as if you are using WordPress then you can use different contact us form plugins and creat contract us form page. But that’s doesn’t mean you can’t creat contract us form in google blogger, of course you can and today in this article i am going to tell you how you can creat contact us form in google blogspot.

What is contact us form?

Contact us form is a form that we creat and upload that form as post, with help of contact us form the website visitors, brands, can easily contact free of cost.

Is important yo have contact us form?

Yes. I think is very important to have contact us form page in your blog say yor blog is very popular and some other brands would like to work with you then the only way they can contact you is by contact us form.

Please note when i say contact us form i mean having a contact option in your blog. You can do that in tow way first creat a contact page and give contact email. Second create page and creat a custom contact us form.

Which is better normal contact page or contact from?

I personally think contact us form page is better because if you want to look your blog side professional then is important to have good visual looking as well. If you are only creat normal contact page just with the text and given business email then it won’t look at professional there for brands might not deal with you due to low quality contact us page.

Step 1 – Get you blog id code below i have provider you an example of id code. You will find your google blogspot, your own blog id code when you first open to your blog dashboard, look your URL carefully and replace your blog id code to giving code below.

Step 2 – if you are not sure about coding then not to worry. Go to your page section of your blog and creat new page, switch to HTML mode, which means switch to code mode, then simply copy and paste the contact us form given below.

<div id='ContactForm153' class='ContactForm'>

  <div class="contact-form-widget">

    <div class="form">

      <form name="contact-form">

        <input id="ContactForm153_contact-form-name" class="contact-form-name" name="name" placeholder="Name" type="text" value="">

        <input id="ContactForm153_contact-form-email" class="contact-form-email" name="email" placeholder="Email *" type="text" value="">

        <textarea id="ContactForm153_contact-form-email-message" class="contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>

        <input id="ContactForm153_contact-form-submit" class="contact-form-button contact-form-button-submit" type="button" value="Send">

        <div class="contact-form-message-box">

          <p id="ContactForm153_contact-form-error-message" class="contact-form-error-message"></p>

          <p id="ContactForm153_contact-form-success-message" class="contact-form-success-message"></p>
  (function(){var Bid="000000000000000";document.addEventListener("DOMContentLoaded",function(){_WidgetManager._RegisterWidget("_ContactFormView",new _WidgetInfo("ContactForm153","sidenav_section",document.getElementById("ContactForm153"),{contactFormMessageSendingMsg:"Sending...",contactFormMessageSentMsg:"Your message has been sent.",contactFormMessageNotSentMsg:"Message could not be sent. Please try again later.",contactFormInvalidEmailMsg:"A valid email address is required.",contactFormEmptyMessageMsg:"Message field cannot be empty.",title:"Contact Form",blogId:Bid,contactFormNameMsg:"Name",contactFormEmailMsg:"Email",contactFormMessageMsg:"Message",contactFormSendMsg:"Send",submitUrl:""},"displayModeFull"))})})();


Important – Change the 000000 code on the above code to your blog id code, that you have used before.

Step 3 – Now you have contact form read before you public this contact is form one last thing to do is replace few text given above code that way when someone use this form to contact you, you receive that email directly to your email. Below i gave giving you what to replace.

About the above code:

[199887760000000000]: write your blog id that you have write above as blog code.
[The person Name, Email, Message]: this is will be the title in the contact form
[Submit]: This is for when someone summit.
[Sending …]: After summit now sending

Step 4 – Now you can public your post. Tips, remember to hide comments for contact us page, because it not necessary having comments on contact us page, but is up to you if you want you can leave it on.


You can follow the normal Email writing just like above i give you an example that way you can change any word, please do not change any coding words if you stressing not sure about anything.

Lastly if you any questions reading this contact us form then let us know in the comments section below.

Leave a Reply

Your email address will not be published. Required fields are marked *