Table of Contents
Hey beautiful people, are you searching tutorial for how to add a contact form in blogger static page, then this is the right place for you. Here, we will discuss step by step how to add a contact form in blogger static page.
Contact form is one of the important form in the blogger static page with which visitors can easily contact you through e-mails. Contact form is very helpful widget as anyone with intention to invite collaboration can easily contact you.
Now, let's discuss about how to add contact form in blogger static page.
How to Add a Contact Form in Blogger Static Page
Here, we will discuss step by step guide to add a contact form in blogger static page;
1. Go to blogger site and Sign-in with your Google account.
2. In the left side, go to Themes > Edit Html
and add the following code Above/Below </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>
4. Click on Save Theme to save changes.
5. Now, its time to create a Contact Us page in blogger site. For this, go to Pages > New Page. After this give a name for this page then select the Html mode (not compose)
Note: Pay attention to link that opens. It contains blogger id that will help you to add stylish contact form for blogger. Let's have a look in link format;
https://www.blogger.com/blog/posts/6600000000000000066
6600000000000000066 is your blog id. Save this blog it because it will be used later.
5. Now, paste the following code into a text editor of Contact Us page;
<form id="kontak" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" 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="Your Message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send"/>
<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'] = '6600000000000000066';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6600000000000000066','//www.answersjet.com/','6600000000000000066');
_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': '6600000000000000066', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>
6. Replace the 6600000000000000066 with your blog id(4 times in the code) and also replace www.answersjet.com blog Address with your blog Address (without http/https).
7. After replacing these values, just hit Publish button to add a Contact Form in Blogger Static Page.
Conclusion
Above we have discussed the tutorial for How to Add a Contact Form in Blogger Static Page. Contact form is one of the important form in the blogger static page with which visitors can easily contact you through e-mails. Contact form is very helpful widget as anyone with intention to invite collaboration can easily contact you. By following above mentioned steps anyone can easily add a contact form in blogger static page. I hope this information is helpful to you all.