Displaying Our Contact Widget on a Static Page

Admin
April 27, 2021
Displaying Our Contact Widget on a Static Page

While the blogger contact widget does not work on the blogspot version of the domain, this widget only works on blogs that already use a Custom Domain.

One of the pending widgets from blogger is Contact Form. Some people are sometimes uncomfortable putting a number to be contacted on the blog, so this widget is an alternative choice for them to put on the blog.

With this widget, users who want to contact both for cooperation, advertising, writing reviews and so on will be easier because the messages that are sent will automatically go to the email.

How to Add a Contact Form on a Static Page

Create a page (page) by going to the Blogger dashboard and going to the menu Page then click the button New page. Pay attention to the open url, the format is more or less like this:

/www.blogger.com/blog/page/edit/1234567890000000000/xxxxx

1234567890000000000 is your blog ID, please copy it first because this section will be needed later.

Copy all the code below into the text editor, make sure you select HTML mode when copying to the text editor

<div class="ContactForm" id='ContactForm1'>  <form name="contact-form">    <div class="input-area">      <label for="Nama Anda</label>      <input class="contact-form-name" id='ContactForm1_contact-form-name' name="name" type="text" value="" />    </div>    <div class="input-area">      <label for="Email<span>*</span></label>      <input class="contact-form-email" id='ContactForm1_contact-form-email' name="email" type="text" value="" />    </div>    <div class="input-area">      <label for=">    <div class="notif-area">      <p class="contact-form-error-message" id='ContactForm1_contact-form-error-message'></p>      <p class="contact-form-success-message" id='ContactForm1_contact-form-success-message'></p>    </div>  </form></div><script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js"></script><script>if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1234567890000000000';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d1234567890000000000','//www.namablog.com/','1234567890000000000');_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, 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': '1234567890000000000', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); </script>

Information:
Replace some of the code and color-block sections with your own data

  • Your Name, Email, Message: Input title on the contact form
  • Send Message : Text on the submit button
  • 1234567890000000000: Your blog id, there are 4 times writing in the code above
  • www.namablog.com: Your blog address (without http / https)

Click the publish button and check whether the widget is working properly or not, if the method is done correctly then the widget should work properly.

Note: While the Contact Form widget does not work on the blogspot.com domain, the cause of this error is still unknown. But this widget still works well on blogs that already use a custom domain (.com, .net and so on).

Reference: igniel.com/2018/07/widget-contact-form-blogger.html