Membuat Form Kontak Menggunakan ID Blogger ~ e-LEARNING

Form Kontak sangat dioerlukan untuk melengkapi blog anda sebagai media komunikasi. Pengunjung bisa berkirim informasi atau pertanyaan dengan sistem tinggal pesan dan akan langsung masuk ke alamat email anda. Membuat form kontak seperti ini bisa menggunakan ID blogger agar pesan bisa terkirim (submit). Form kontak bisa dilengkapi pula dengan google map yang memuat lokasi atau tempat tinggal kita agar pengunjung bisa mengetahui alamat dimana kita berada. Form kontak yang disertai dengan google map dapat dilihat pada contoh di bawah ini.

Silahkan Kirim Pesan Anda Disini

Silahkan copy paste kode berikut ini di halaman mandiri anda, dan gantilah tulisan yang berwarna cyan dan kuning sesuai dengan data yang anda miliki. Pastikan bahwa anda sudah memiliki akun google map dan akun blogger.com:

ganti tulisan yang berwarna cyan dengan alamat google map anda
ganti tulisan yang berwarna kuning dengan ID blogger anda

<html>
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
/* Style inputs */
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
/* Style the container/contact section */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 10px;
}
/* Create two columns that float next to eachother */
.column {
float: left;
width: 50%;
margin-top: 6px;
padding: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<div class="container">
<div style="text-align: center;">

Silahkan Kirim Pesan Anda Disini<br />
</div>
<div class="row">
<div class="column">
<iframe allowfullscreen="" frameborder="0" height="250" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3989.655475936585!2d117.1119988151339!3d-0.5176651996223246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2df67e47bd43b285%3A0x4205e77abd7c9263!2sBOSTRAVELINDO%20Tour%20%26%20Travel!5e0!3m2!1sid!2sid!4v1568158469944!5m2!1sid!2sid" style="border: 0;" width="320"></iframe>
</div>
<div class="Form">
<form name="contact-form">
Nama
<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" style="max-width: 300px; width: 300;" type="text" value="" />
<br />
Email
<span style="font-weight: bolder;">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" style="max-width: 300px; width: 300;" type="text" value="" />
<br />
Pesan
<span style="font-weight: bolder;">*</span>
<br />
<textarea class="contact-form-email-message" cols="100" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" style="max-width: 300px; width: 300;"></textarea>
<br /> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirim" />
<div style="max-width: 300px; text-align: center; width: 300;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<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'] = '7170612646087666643';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7170612646087666643','//bomlapak.blogspot.com/','7170612646087666643');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Terimakasih! Pesan Anda Sudah Terkirim.', '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': '7170612646087666643', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
</div>
</div>
</body>
</html>