Membuat Formulir Kontak Paling Simple di Halaman Blog

Formulir kontak pada situs blog mempunyai peranan yang sangat penting bagi sebuah situs blog. Formulir kontak adalah media yang digunakan oleh pengunjung, perusahaan, dan merek untuk menghubungi pemilik situs blog dan oleh karena itu fitur kontak formulir wajib dimiliki setiap blog. Kadang tidak semua pemilik blog nyaman dengan berbagi alamat email utama langsung di situs blognya, maka kontak formulir adalah cara yang efektif agar orang dapat dengan mudah menghubungi pemilik situs blog tersebut.

Kali ini kita akan membuat Formulir kontak paling simple di halaman untuk situs blog dan ada juga beberapa pilihan untuk membuat Formulir kontak bagi situs blog anda. Simak langkahnya sebagai berikut.

Namun terlebih dulu anda harus sudah memasukan widget formulir kontak pada situs blog anda.

Langkah Membuat Formulir Kontak Paling Simple di Halaman Blog

1. Pasang font awesome pada template anda, tempelkan kode berikut ini sebelum tag </head>

2. Buka menu Tema → Edit HTML

3. Tempelkan kode berikut ini sebelum tag </style> atau ]]></b:skin>

#ContactForm1 {
display: none;
}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
width: 300px;
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: 450px;
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;
}

4. Klik Simpan

5. Buat postingan baru di halaman baru dalam mode HTML

6. Tempelkan kode berikut ini pada halaman

<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>

7. Klik simpan dan lihat hasilnya

Untuk font yang digunakan dan lainnya silahkan sesuaikan dengan template anda.