Cara membuat kustom contact form di blogspot Terbaru

Login ke blogger
Tata Letak
Tambahkan gadget sidebar /footer pilih Formulir kontak
Buka Tab halaman dan buat halaman baru
Kasih judul contact
Paste kode di bawah simpan html jangan di compose lihat gambar dibawah

Kita ambil css dari w3scholl

<style>
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}

input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}

input[type=submit]:hover {
background-color: #45a049;
}

}
</style>

Tambahkan kode ini di bawah kode atas

Contact form here:
<div class="container">
<form 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" placeholder="Email" size="30" 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="Kirim" />
<div class="clear">
</div>
<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" 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'] = 'ID BLOG ANDA';BLOG_attachCsiOnload('');
}_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dID BLOG ANDA','//t3pemula.com/','ID BLOG ANDA');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar3', 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': 'ID BLOG ANDA', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email',
'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>
</div>

Ganti tulisan ID BLOG ANDA dengan id blog anda, untuk melihat dan mengetahui id blog bisa di lihat di bar halam url ketika anda sudah login ke blog

Ganti tulisan t3pemula.com dengan alamat blog anda,
jangan lupa matikan komentar kemudian save
sekarang buka tema dan edit html di edit html lompat ke widget dan pilih cari contactform

Disini contactform yang saya buat dengan id ContactForm1 copi id itu dan scroll ke atas di bagian css
tambahkan

#ContactForm1{display:none}

kemudian save dan coba buka url halaman contact form yang tadi sudah di buat dan coba tes kirim pesan kalau tidak ada kesalahan pasti akan masuk pesan ke email yang di pakai buat blog anda

untuk contoh contact form di atas bisa di tes dan lihat punya saya

DISINI