Script dan Cara Membuat Contact Form Blogger Tinggal Copy

Tahun 2019 makin banyak anak muda yang ingin memiliki sebuah blog yang bisa menghasilkan uang dari google adsense. salah satu halaman statis yang harus di buat selain About , Disclaimer, Privacy Policy , Term of Service, yaitu Contact Form atau bisa di sebut dengan formulir yang berisi nama, email, pesan, yang di gunakan untuk mengirim pesan / berkomunikasi langsung dengan penulis blog/ website tersebut.

Kenapa contact form blogger harus di buat? nah jadi gini, syarat dari daftar google adsense supaya cepat di approve, website/ blog harus memliki navigasi yang jelas salah satunya navigasi contact from ini. juga sebagai tanda bahwa pemilik blogger / website tersebut serius menggarap websitenya secara profesional.

Membuat contact from di internet sangat banyak sekali jenis dan tampilanya supaya menarik dan selaras dengan tema blog / website yang di terapkan.

Baca : Kumpulan Keyword HPK Tinggi Free Download | Daftar Short Link / Pemendek Url Terlengkap,

Di kesempatan kali ini Caricara.web.id akan membagikan script dan cara membuat contact from dengan sangat mudah yaitu tinggal copy paste saja.

Berikut Script dan Cara Membuat Contact Form Blogger

1. Masuk ke Blogger, log in ke akun anda
2. Pilih Halaman/page kemudian buat halaman baru ( tampilan seperti posting blog)
3. Pilih HTML sebelah kanan tulisan compose
4. Copy kode html yang ada di bawah ini , dan paste kan di halaman yang anda buat tadi.

<style type="text/css">
.contact-form-widget {margin-left:auto;
 margin-right:auto;
 width:100%;
 max-width:540px;
background:#fff
}
.first-line {
  display: table;
  width: 100%;
  margin-bottom: 20px;
}
.contactf-name,.contactf-email {
 float:left;
 width:47%;
 display: table-cell;
}
.contactf-name {
 margin-right:6%
}
.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus {
 width:100%;
 margin:0 0 25px;
color:#999;
 background:transparent!important;
 border:2px solid #ddd;
 box-shadow:none;
 padding: 10px;
 box-sizing: border-box;
}
.contact-form-email-message {
 height:50px;
}
.contact-form-button-submit{
 background:#f1592a;
 min-width:20%;
 font:700 16px Work Sans;
 color:#fff;
 border:0;
 cursor:pointer;
 outline:none;
 border-radius:2px;
 -webkit-box-shadow: 0px -5px 10px 5px rgba(0,0,0,0.1);
 -moz-box-shadow: 0 1px 4px 0 rgba(0,0,0,0.1);
 box-shadow: 0 4px 15px 0 rgba(0,0,0,0.1);
 padding: 10px;
 margin-bottom: 10px;
}
.contact-form-button-submit:hover {
 background:#333;
}
.contact-form-cross {
 border:medium none!important;
 box-shadow:none!important;
 padding:0!important
}
</style>




<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div class="first-line">
<div class="contactf-name">
Your name

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your name&quot;;}" onfocus="if (this.value == &quot;Enter your name&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Enter your name" /></div>
<div class="contactf-email">
Email

<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email address&quot;;}" onfocus="if (this.value == &quot;Enter your email address&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Enter your email address" /></div>
</div>
<div class="contactf-message">
Message

<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." onblur="if (this.value == &quot;&quot;) {this.value = &quot;Type your message here...&quot;;}" onfocus="if (this.value == &quot;Type your message here...&quot;) {this.value = &quot;&quot;;}" rows="5" value="Type your message here..."></textarea>

<div class="sendme">
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit →" />

<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>
</div>
</form>
</div>
</div>
</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'] = '2078107117448571256';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2078107117448571256','//www.caricara.web.id/','2078107117448571256');
_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': '2078107117448571256', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

5. Ganti warna nomor ini 134777113111111111 yang ada di kode html di atas dengan ID blog anda
6. ID blogger bisa di lihat di URL blog anda seperti gambar di bawah ini

7. Langsung publikasi kan halaman Contact from tersebut
8. Done

Baca: Cara Mendaftar Google Adsense Full Approve 2019

Demikianlah Cara membuat contact from blogger yang bisa saya share untuk anda. semoga bisa membantu kalian yang baru belajar di dunia blogging dan google adsense. Terus kunjungi website ini untuk tutorial menarik lainya. boleh di simpan di bookmark atau di share jika memang berguna untuk anda.