Cara Membuat Contact Us yang Ringan dan simpel di Blog

Caricara.co.id - Hay temen-temen blogger pemula, sudahkah membuat contact us / contact from di blog anda. Mungkin jika anda belum tahu kalao sebuah contact from/ formulir kontak di dalam blog itu sangat penting gunanya yaitu agar para pembaca blog/ website anda dapat menghubungi anda secara pribadi.

Dan juga sebagai syarat agar di terima oleh google adsense anda harus membuat formulir kontak di halaman statis blog anda. karena google tidak akan menerima blog / website yang tidak lengkap navigasinya.

Cara Membuat Contact Us
Cara Membuat Contact Us

Selain contact form anda juga harus membuat disclaimer, privacy policy, about us dan sitemap di halaman stastis blog anda ya, syarat ini harus di lengkapi jika ingin bergabung jadi publisher google adsense lewat blog / website.

Di kesempatan kali ini saya ingin berbagi cara membuat formulir kontak pada halaman statis yang mudah menggunakan kode html contact us tanpa foxyform ataupun 123contactfrom. langsung saja ikuti langkah-langkahnya sebagai berikut:


Baca Juga : Tools Riset Keyword Gratis Terbaik Untuk SEO Blogger Pemula

Cara Membuat Contact Us Keren di Blog

1.Pertama silahkan masuk di blogger.com
2. Pilih Laman/ pages dan buat pages baru
3. Kasih judul pages/ laman tersebut "Contact Us" atau "Kontak Kami"
4. Terus Pilih HTML jangan compose 
4. Lalu Copy kode html contact us dibawah ini dan paste kan di laman 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'] = '1061492620238640983';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1061492620238640983','//www.caricara.co.id/','1061492620238640983');
_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': '1061492620238640983', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

5. Kemudian ganti '1061492620238640983' angka berwarna merah tersebut dengan id blog anda
6. Jika tidak tau id blog anda silahkan lihat gambar di bawah ini.
Cara Membuat Contact Us Keren di Blog
7. Terahir Publish Laman yang anda buat
8. Done


Preview Contact Us Simpel



Jika masih ada pertanyaan atau belum jelas silahkan komen saja di bawah atau hubungi langsung melalui contact us yang telah saya sediakan.

Baca Juga: Cara Pasang Script Anti Copy Paste di Blog Lengkap dengan Anti CTRL+U dan Klik Kanan | 3 Sitemap Seo Friendly Keren dan Cara Memasang Di Halaman Blogspot

Demikian Tutorial blogging kali ini tentang Cara Membuat Contact Us yang Ringan dan simpel di Blog, Semoga bisa bermanfaat buat anda khususnya blogger pemula seperti saya ini. Dan kunjungi terus website ini untuk tutorial menarik lainnya. Terimakasih


Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel