Cara Dan Metode Menciptakan Contact Form Di Halaman Statis Blog

Cara dan metode Membuat Formulir Kontak (Contact Form) di Halaman Statis Blog

BLOGGER sudah menyiapkan widget "Formulir Kontak" untuk dipasang di sidebar blog. 

Widget contact form ini memudahkan pengunjung menghubungi admin blogger untuk "kepentingan pribadi" atau "pesan khusus" yang tidak ingin diketahui pengunjung lain.

melalui atau bersama ini adanya halaman khusus Form Kontak ini, maka pengunjung/pembaca tidak mesti mengirimkan pesan via email, cukup di contact form ini. What a User Friendly!

Berikut ini CB share cara membuat halaman khusus (halaman statis) formulir kontak sehingga Contact Form tidak muncul di sidebar.

Contoh lengkap atau demo halaman kontak di blogger ini dapat dilihat di Halaman Kontak.

Jika ada pengunjung  yang mengisi contact form tersebut, maka pesannya akan masuk ke Inbox Email Gmail kita sebagai admin blog, yaitu email yang dipakai untuk membuat blog.

Jika tidak ada di folder email utama (Primary), maka akan masuk di folder "Social".

UPDATE! Cara dan metode Membuat Form Kontak di Halaman Statis Blogger

Cara dan metode Membuat Formulir Kontak (Contact Form) di Halaman Statis Blog

Berikut ini cara membuat formulir kontak di halaman statis yang dishare Sneet.

Tahap #1: Tambahkan Gadget Contact Form 

1. Klik Layout > Add a Gadget > Klik More Gadgets > pilih "Contact Form".

2. Klik Save!
3. Seret dan pindahkan posisi widget Contact Form tadi ke bawah elemen "Blog Posts"

4. Klik Save arrangement!

Tahap #2: Sembunyikan Widget "Contact Form"

1. Template > Edit HTML
2. Copas instruksi berikut ini di atas instruksi ]]></b:skin>

.widget.ContactForm { display: none; }

Tahap #3: Membuat Halaman Kontak 

1. Page > New Page
2. Isi judul dengan, misalnya, Kontak
3. Klik mode HTML
4. Copas instruksi berikut ini di kolom content:

<style type="text/css">
.widget.ContactForm { display: block; }
.post-footer { display: none; }
#blog-pager { display: none; }
.blog-feeds { display: none; }
.widget.ContactForm .title { display: none; }
.widget.ContactForm * { max-width: 100%; }
</style>

5. Klik Publish !

Kini halaman kontak sudah ada di blog Anda. Yang di atas ialah tampilan simple atau sederhana, ibarat pada gambar di atas.

Tampilan Form Kontak Lainnya

Berikut ini instruksi dan tampilan halaman kontak dari widget contact form lainnya --ini yang dipakai CB-- dari Kang Ismet.

Tahapannya membuat halaman kontaknya ibarat cara di atas:

1. Layout > Add a Widget  > Contact Form
2. Page > New Page > Isi judul dengan Kontak
3. Klik mode HTML dan copas instruksi ini:

<form name="contact-form">
<p></p>
Nama
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
Alamat Email <span style="color: red; font-weight: bolder;">*</span>
<p></p>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Isi Pesan <span style="color: red; font-weight: bolder;">*</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<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>

<style type="text/css">
/* Menyembunyikan elemen dalam postingan */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

Pada Menu Pilihan, pilih/centang "Enter" untuk baris baru.

Publikasikan!

Sekarang klik "Template" > "Edit HTML" > Copas instruksi berikut ini:

/* CSS Contact Form */
#ContactForm1{
display:none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px;
height:auto;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{
background: #fffff7;
}
#ContactForm1_contact-form-email-message{
width: 450px;
height: 175px;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
font-family:Arial, sans-serif;
}
#ContactForm1_contact-form-submit {
width: 101px;
height: 35px;
float: left;
color: #FFF;
padding: 0;
margin: 10px 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
border-radius:3px;
}
#ContactForm1_contact-form-submit:hover {
background:#435c74;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 450px;
margin-top:35px;
}

Save Template!

CARA LAIN Membuat Form Kontak di Halaman Statis

1. Tema > Edit HTML
2. Copas instruksi berikut ini di atas instruksi ]]></b:skin>

#ContactForm1,#ContactForm1 br {display:none}

3. Save!

4. Layout > Add a Gadget > Pilih Contact Form
5. Save!

Bikin Halaman Statisnya:

1. Laman > klik Laman Baru
2. Copas instruksi ini:

<form id="kontak-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" size="30" placeholder="Email *" 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="Send Message" />
<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>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
#kontak-form{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#95a5a6;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover{background:#e74c3c;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0}
.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}
img.contact-form-cross{line-height:40px;margin-left:5px}
.post-body input{width:initial}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>

3. Save! Beres.

Form Kontak sudah dibentuk dan sudah muncul.  Kini blog Anda sudah punya halaman khusus Kontak meliputi Contact Form!

Untuk menampilkan di Navigasi Menu, silakan ke tutorial berikut ini: Menampilkan Halaman Statis di Navigasi Menu Blog.

Good Luck & Happy Blogging! (www.contohblog.com).*

Sumber http://www.contohblog.com/

Artikel Terkait

Cara Dan Metode Menciptakan Contact Form Di Halaman Statis Blog

4/ 5

Oleh Unknown

Unknown Agustus 28, 2016