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.
 |
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>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<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="https://www.blogger.com/static/v1/widgets/227587253-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
_WidgetManager._Init('');
_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': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')));
</script></div>
