Fix Error in Blogger Contact Form Widget/Page

Fix Error in Blogger Contact Form Widget

Today in this post, Dgntemplate will share a tutorial on how to fix error in blogger contact form widget that that doesn't work properly or send messages to email.

This error is caused by hiding the default blogger bundle widget resulting in some blogger gadgets does not perform properly. But you can use the Dgntemplate-style contact form widget, which definitely works.

In custom templates, the default Blogger bundle widgets are deliberately removed because it is generally not used by most bloggers. These features only contribute to heavy blog loading.

When you click the send button a working Contact form Indicates a notification like this  "Sending ...". In addition, it indicates that "Your message has been send" which means that the message has been sent to the email admin or blog owner.

Well, for those who are using a custom template, please try to check the contact form on your blog that the contact form works properly or not? If there is no notification that says "Sending ..." and "Your message has been send" it means the contact form has a problem and you will not receive a single message from visitors who use the contact form to send you a message.

To respond to this problem let's start the tutorial.

How to fix error in Blogger Contact Form Pages / Widgets

Go to Blogger Dashboard >> Theme >> Edit HTML.
Add the following CSS code Before/Above Head Tag
<b:if cond='data:view.isPage'><style>
/* Contact Form */
#comments,.post_meta,#blog-pager{display:none}form{color:#666} #kontak{margin:auto;max-width:640px} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid #1d2129;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid #1d2129;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}#ContactForm1_contact-form-submit{float:left;background:#008c5f;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}#ContactForm1_contact-form-submit:hover{background:#1d2129;color:#fff}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}.contact-form-error-message-with-border{background:#1d2129;border:none;box-shadow:none;color:#fff;padding:5px 0}.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}img.contact-form-cross{line-height:40px;margin-left:5px}.post-body input{width:initial}
</style></b:if>
Click on Save Theme button.
Now it's time to create blogger Contact Form Widget on a static page
Go to Blogger Dashboard >> Pages >> New Page.  When creating a new Page, make sure to choose the mode HTML, NOT Compose. Now Paste the following code
<form id="kontak" name="contact-form">
  <input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
  <input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email" type="text" value="" />
  <textarea 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="Send Message"/>
  <div style="max-width: 222px; text-align: center; width: 100%;">
    <div id="ContactForm1_contact-form-error-message"></div>
    <div id="ContactForm1_contact-form-success-message"></div>
  </div>
</form>

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js"></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '860480000000000003956';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d860480000000000003956','//www.dgntemplate.in/','860480000000000003956');
_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': '860480000000000003956', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>

Attention: Replace some of the codes with your own.
1. Replace www.dgntemplate.in with your blog address.
2. Replace the code 860480000000000003956 with your blog ID number. Your blog id on here:
blog id

When finished, click Publish button.

conclusion

That's it! I hope you like this widget! Stay tuned with us for more interesting widgets!.

1 Comments

Don't miss the latest template notification from Dgntemplate