Create a contact us page ready | Code Contact Us HTML for Blogger Acceptable for Google Adsense


 Many bloggers are looking for how to create a ready-made contact us page and how to make contact us form for blogger blogs. As it is a prerequisite for submitting blogs for Google Adsense ads. In this article, create a contact us page + explain the code and how to add a contact us code. HTML works on all templates to solve the problems of templates that contain a problem. The contact us page does not work.

Create a contact us page ready | Code Contact Us HTML for Blogger  Acceptable for Google Adsense

How to create a ready-made contact us page in blogger blogs

The Contact us or Cull us form is an essential component of the blog or website if you want to profit from adding Google Adsense ads. If you are using a paid blogger template, it will most likely have an effective contact form built into it. But if you are using a free Blogger template then you will most likely encounter the problem of no contact form or contact us page not working. So we will explain how to add contact us HTML code for blogger blogs easily and it works with all templates without problems.

Steps to create a contact us page and create a contact form in blogger

  • Go to your blogger dashboard from the blogger website
  • From the side menu in Blogger, access the pages
  • Click on a new page to add a contact us page to the blog
  • Enter a title for the page, preferably in English, such as Contact us
  • From the top right of the page, click on the pen icon and choose View HTML
  • Scan any content on the page and add the Contact Us HTML code for Blogger blogs
  • On the left side, in the page settings section, click on Options, then Reader Comments, and choose Do not allow adding comments
  • From the page settings on the left also, click on the tabs dedicated to robots. Click on noindex, noarchive, and noodp.
  • Then click Publish to save the changes.

Contact Us HTML Code for Blogger Blogger Ready

After explaining the steps for creating a Contact Us form, and among the many contact form codes available on the Internet, we chose an HTML Contact Us code that works on all Blogger blogs without problems.

Copy the following code

<div dir="rtl" style="text-align: right;" trbidi="on">

<div id="contact-form">

<form name="contact-form">

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

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

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

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

<br />

<div style="text-align: center;">

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


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





<style type="text/css">#contact-form{background:#ececec;padding:10px;box-shadow:0 0 0 1px #d9dce1}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email,# ContactForm1_contact-form-email-message{margin:5px auto;border:1px solid #e3e3e3;transition:all .5s ease-out;width:100%;border-radius:10px;padding:8px 15px;margin-bottom:10px ;font-family: 'bein',Roboto, sans-serif}#ContactForm1_contact-form-submit{border:1px solid #e3e3e3;font:unset;text-shadow:1px 1px 5px #111;font-weight:700;font -size:14px;padding:5px 15px;background-color:#06de15;border-radius:5px;color:#fff;font-family:'bein',Roboto,sans-serif;letter-spacing:1px;cursor: pointer} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;border-color:rgba(81,203,238,1);box-shadow: 0 0 5px rgba(81,203,238,0.7)}.contact-form-error-message-with-border{color:#b90000;font-weight:700}</style>

<script src="" type="text/javascript"></script>

<script type="text/javascript">


_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'contact-sec', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg'...'act:'Sm'M'sconsending
) Your message has been sent.', 'contactFormMessageNotSentMsg': 'The message could not be sent, please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': The message field could not be is blank.', 'title': 'contact form', 'blogId': '**Put your blogger id here**', 'contactFormNameMsg': 'Name is required', 'contactFormEmailMsg': 'Email is required', ' contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': ''}, 'displayModeFull')));


After placing the ID number of the blogger blog in the code, place the color red, put the code on the page you created, and then click on Publish (see the explanation of the steps for making a form contact us easily in Blogger).

Explanation of adding a contact us page to the home page of the Blogger blog

After explaining how to create a ready-made Contact us page, and adding the HTML code for Blogger blogs, it remains for us to show the Contact us page to the home page of the blog, so that your site is ready for submission in Google AdSens.

Steps to add a blogger contact form

1- Go to formatting from the side menu of your Blogger dashboard.
2- Search for the pages in your blogger template management tools and if you do not find them, you can click on add a tool and choose the pages from the list of blogger plugins.
3- Click on the pages, you will find all the pages that you created on your blog, choose from them the contact us page, the contact form, or according to your name for this page previously.
4- Click Save to save these changes and you will see that your contact form page has appeared on your blog's homepage.

So here we are, we have come to the end of our topic How to create a ready-made contact us page for a Blogger blog. And if you encounter any problems in adding the contact form, you can leave it in the comments and we will help you solve its problems, God willing.

Post a Comment

Post a Comment (0)