Membuat Contact Form di Blog Dengan Mudah

Membuat Contact Form di Blog Dengan Mudah - Halaman statis Contact Form hampir atau bahkan semua blog ada. Memang setiap blogger pasti membuat atau memasang Formulir Kontak pada blognya agar memudahkan pengunjung untuk berinteraksi dengan pemilik blog selain lewat kolom komentar. Bayangkan jika Blogmu tidak memiliki contact form atau apapun yang bida dihubungi, pasti orang akan bingung jika ada perlu denganmu. Oke, jika seseorang itu sudah kenal denganmu bisa menghubungi via telepon atau medsos. Tetapi bagi orang yang belum kenal dan hanya menjadi pembaca bahkan hanya tidak sengaja membaca pasti bingung jika tidak ditinggalkan jejak untuk menghubungi sekiranya ada hal yang memang perlu disampaikan.

Tujuan dibuat karena ingin membantu pengunjung untuk menghubungi author yang sekiranya memang perlu atau penting. Tetapi terkadang bisa juga hanya "say Hello" saja. Penamaan widgetnya pun berbeda-beda masing-masing blog. Ada yang memberi nama "Hubungi Kami, Contact me, Contact us". Penyebutan itu tergantung maunya pembuat blog. Mereka punya alasan tersendiri.

Manfaat memasang contact form di blog

1. Pengunjung bisa bertanya mengenai topik diluar artikel yang dibahas
2. Dapat menanyakan isi artikel yang kurang jelas
3. Berdiskusi mengenai suatu topik tertentu
4. Seseorang bisa menawarkan kerjasama lewat form ini
5. Menjalin hubungan lebih dekat antara visitor dan admin

Mengenai nama tak usah dipermasalahkan. Yang penting kita bisa membuat kontak form untuk blog dan menerapkannya di blog masing-masing. Bagiamana cara membuat contact us agar kelihatan elegan tetapi sederhana? Berikut panduannya. Panduan ini mengapdosi milik arlina design dan template kerensive.

1. Pasang font awesome di template Kamu tepat di atas kode </head> 

 <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

2. Buka template blog > edit html >  pasang kode di bawah ini sebelum </style> atau ]]></b:skin> dan simpan template.

#ContactForm1 {
    display: none;
}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
    width: 600px;
    height: auto;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-email-message {
    width: 600px;
    height: 175px;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    font-family: 'Roboto',sans-serif;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
    background: #fff;
    outline: none;
    border: 1px dashed #f8a82a;
}

#ContactForm1_contact-form-submit {
    font-family: 'Roboto';
    font-size: 15px;
    width: 101px;
    height: 35px;
    float: left;
    color: #fff;
    padding: 0;
    margin: 10px 0 3px 0;
    cursor: pointer;
    background: #aaa;
    border: none;
    border-radius: 2px;
    transition: background 0.4s linear;
}

#ContactForm1_contact-form-submit:hover {
    background: #f8a82a;
}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
    width: 450px;
    margin-top: 35px;
}

3. Buat halaman baru, copy paste kode di bawah ini pada tab HTML.

<div class='post-body entry-content' id='post-body-2699414411090996206'>
<p><div class="separator" style="clear: both; text-align: center;">
<a href="#contact" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Contact Us" border="0" data-original-height="600" data-original-width="800" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh_IKvUNeyxxl5eRbZS_3KU9WFtW4Qz9zTFTChk8nXG0zUHbJEPfc2_laSNWuohc-iKVtLF11lT2foQ-v7xM33U4ATrW54Cv5z8Q8rOrF5dAcdpoqhThvYPEJdwFN4EETMoS2qFdtX73ux/s640/short_mailbox.gif" title="Contact Us" width="640" /></a></div>
<br />
We love being a web designer and we&#8217;re incredibly thankful that we decided to join this industry many years ago. Contact us so we can help free . I&#8217;m usually available from 24 hour. I do also custom copywriting, storiewriting etc. I am currently accepting new freelance projects, and always excited to hear interesting proposals.
<br />
<div id="contact"></div>
<form name="contact-form">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i> Nama</span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope"></i> Alamat Email <span style="color: red; font-weight: bolder;">*</span></span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil"></i> Isi Pesan <span style="color: red; font-weight: bolder;">*</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />  
<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>

4. Kemudian lihat di bagian setelan entri > pilihan > pilih nonaktifkan komentar pembaca dan gunakan tekan "enter" untuk baris baru agar terlihat rapi.

Alangkah baiknya pratinjau terlebih dahulu untuk melihat Widget Contact Form, jika dirasa sudah bagus dan benar tinggal dipublikasikan kontak formnya. Kamu juga bisa mengubah jenis, ukuran teks, atau tampilannya sekreatif mungkin.

Demo