How to Create Contact Us Page for Blogger/Blogspot Website
Hello Guys, welcome to ASThemesWorld. In this post, I'm going to guide you step by step on adding the contact page on the blogger. So, follow the easy steps and learn more about how to add a contact page in the Blogspot.
Preparation
The first thing you have to do is get your blog Id code, the way is very easy on the blogger page look at the address bar then you will find examples of links like below:
https://www.blogger.com/blog/themes/1234567890000000000The marked part is your blog id code, please copy it because this code will be needed when creating our contact page
Tutorials
Step 1. Create a new page, don't forget to fill in the search description on your new page.
Step 2. Switch to HTML mode then copy and paste the code below into your page content.
<div class='ContactForm' id='ContactForm1'>
<form name='contact-form'>
<div class='input-area'>
<label for='ContactForm1_contact-form-name'>Name</label><input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' type='text' value='' /></div>
<div class='input-area'>
<label for='ContactForm1_contact-form-email'>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='ContactForm1_contact-form-email-message'>Message<span>*</span></label><textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message'></textarea></div>
<div class='input-area'>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send' /></div>
<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>//<![CDATA[
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?blogID\x3d1234567890000000000','//www.your_blog.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>Change the part marked in the code above with your blog id, there are at least three of the same codes that you must change to your blog id.
Information:
- [1234567890000000000]: Your blog id, there are 4 times writing in the code above.
- [www.your_blog.com]: Your blog address (without http / https)
- [Your Name, Email, Message]: Input title in the contact form.
- [Submit]: Text on submit button.
- [Sending ...]: Text when sending messages
- [Your message has been sent. ]: Message notification text sent.
- [Message could not be sent. Please try again later. ]: The message notification text was not sent.
- [A valid email address is required. ]: Invalid email notification text.
- [A Message field cannot be empty. ]: Text notification when message body is blank.
Step 3. Publish your page and please test whether the contact widget is successful or not.
At this point, your contact page has been completely created, if you follow all the steps correctly we can guarantee that the contact page is working properly. If there are questions or sections that are not understood, please write down questions through the comments column provided.
Reference
www.jagodesain.com