How to create contact form in blogger 2022 ?

 

     A blog should have a contact us page. This is to help users when they want to contact the blog admin, and also the requirements if the blog will be registered with google adsense later. There are several ways to add a contact us page in

Blogger. This post will help you set up a contact us page for Blogger or Blogspot. It's easy to add our HTML contact page into a page. There is a way to get a free contact form for Blogger in the sidebar of your blog. 

Then How to Create Contact Form For Free?

Here are the steps:

Step 1. Login to Blogger Dashboard.

Step 2. Hide the contact form from side bar, the method  copy code below

div#ContactForm1{display: none !important;}

 

go to "Theme" menu and select "Edit HTML" Click on the box and " CTRL + F " to search type "skin" >> press Enter until you can see code like below :

margin: 0;

padding-top:10px;

}

]]></b:skin>

    <b:template-skin>

 

and paste the code before "]]></b:skin>". so will become :

margin: 0;

padding-top:10px;

}

div#ContactForm1{display: none !important;}

]]></b:skin>

    <b:template-skin>

and then Save.

Step 3. Again, search for </body> or /body and paste the code above it.

<b:if cond='data:blog.url == &quot;https://thrizthan.com/p/contact-us.html&quot;'>

<script src="https://www.blogger.com/static/v1/widgets/2575128383-widgets.js" type="text/javascript"></script>

<script type="text/javascript">

_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1637580704763150463','//thrizthan.com','8832479442475146632');

_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', document.getElementById('ContactForm1'), {'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': '1637580704763150463', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

</script>

</b:if> 

Note :

# Replace https://thrizthan.com/p/contact-us.html with your blog post address.

## Replace 8832479442475146632 with your blog ID [ Check below to find out your BLOG ID]

### Replace thrizthan.com with your website address. No need to add https or http.

Step 4. Go to "Page" and Create new page, Fill the title " Contact Us".

Step 5. In the page editor change view to "HTML View" and copy code below:

<style>

.page-contact-form input,.page-contact-form textarea {width: 100%;max-width: 100%;margin-bottom: 10px;}

.page-contact-form input.contact-form-button.contact-form-button-submit {height:40px;padding: 10px;background: #2c6a02; color: #fff;border: none;}

.page-contact-form input.contact-form-button.contact-form-button-submit:hover {background: #62eb07;color: #fff;}

</style>

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

<div class="form">

<form name="contact-form">

Name:<br />

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

E-mail: <span id="required">*</span><br />

<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

Message: <span id="required">*</span><br />

<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>

<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" />

<br />

<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">

</div>

<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">

</div>

</form>

</div>

</div>

 

Then paste it to page editor. then Save the page, and then preview your page.

For detail step by step yo can watch this video below.

Okay, that's enough for now from me, if you have any questions, please comment in the comments column. If something goes wrong I apologize. Hopefully helpful, and thank you.