To create a contact form, you can use the Blogger Contact Form widget feature. Another choice, you can use the blogger contact form generator service, such as 123FormBuilder. You can create any Type of Form and Set It Up in Minutes with No Coding. Very simple and quick set up, just drag and drop fields.
But, this tutorial is very different, you can create a contact form on the Blogger static page with Coding (CSS, HTML and Javascript) without the need to activate the Contact Form in the Blogger widget or third party contact service (contact us generator for Blogger).
Here is how to create / add the Blogger Contact Form on a static page.
1. Login Blogger, select Blog that you want to add contact form page.
2. Select "Pages", then click the "New page" button.
3. Create a page title, such as Contact Us, or Contact Me.
4. Add this code on HTML mode.
<!--contact us html code for blogger-->
<div class="Form">
<form name="contact-form">
<p></p>
Name
<br />
<input class="contact-form-name" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
Email
<span style="font-weight: bolder;">*</span><br />
<input class="contact-form-email"style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Message
<span style='font-weight: bolder;'>*</span>
<br />
<textarea class="contact-form-email-message" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirim" />
<p></p>
<div style="max-width: 400px; text-align: center; width: 100%;">
<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>
<!--contact us Js code for blogger-->
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '11111111111111111';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d11111111111111111','//www.alikw.ga/','11111111111111111');
_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': '11111111111111111', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>5. Change the code
//www.alikw.ga/ with your site url.6. Change all the code
11111111111111111 with your blogID.To get the code, you can see it on the bar address on any page from your blog's dashboard. Look at the picture!
7. Disable the comment box, then publish the contact form page in HTML mode.
Notes:
- During the process of creating a contact us / contact form page, you should not change the writing mode.
- If you want to edit after the contact form page is published, try to enter directly into HTML mode.
Tambahkan Komentar