Contact Form: Bagaimana cara membuatnya di Blogger

10 Jan, 2015

Contact form adalah halaman yang disediakan oleh pemilik blog untuk mengisi nama, alamat email, dan isi pesan yang digunakan user untuk menghubungi pemilih blog jika user tersebut ingin menanyakan sesuatu ke admin melalui email. dapat menggunakan contact form. Karena dengan mengirimkan pesan melalui contact form pesan tersebut akan masuk ke inbox email admin (pemilik blog).

Tentunya kita sudah memahami. semua, platform blog sudah menyediakan widget contact form yang dapat langsung kita pasang, tentu dengan gaya dan caranya masing-masing contohnya blogger. Untuk menambahkan widget contact form kita tinggal masuk kehalaman Tata Letak, tambahkan widget kemudian kita cari dan pilih untuk menambahkan contact form. Insyallah teman-taman sudah paham ya cara menambahkan widget.

Jika sobat menggunakan contact form bawaan blogger secara defoult kolom-kolom contat form seperti kolom nama, email dan isi pesan akan muncul di semua halaman beranda maupun halaman artikel blog, Nah, untuk menghilangkan halaman tersebut supaya lebih terlihat keren tampilan blog namun tetap menyediakan halaman contact form kita dapat menyiasati dengan menambahkan dan menghapus beberapa elemen widget contact form. Demo silahkan sobat buka contact form blog saya dan untuk cara nya sebagai berikut:

Menambahkan contact form

Untuk membuat halaman contact form yang pertama kali harus sobat lakukan adalah menambahkan widget contact form. Dengan cara sebagai berikut: permana silahkan login ke blogger, kemudian klik Tata Letak, kemudian klik tambahkan Gadget, kemudian klik Gadget, kemudian klik formulir kontak (contact form).

Menambahkan kode CSS

Setelah menambahkan contact form sekarang kita masuk ke halaman template untuk menambahkan kode CSS berikut :

/* Contact Form Container */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}

/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}

/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}

/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}

Tepat di atas kode ]]></b:skin> Untuk mempermudah pencarian tekan tombol CTRL dan F dan masukan kode ]]></b:skin> kemudian klik Enter.

Menghapus sebagian kode contact form.

Setelah kita menambahkan kode CSS sekarang kita menghapus sebagian kode HTML contact form mulai dari kode:

<b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
        </div>
      </form>
    </div>
</div>
<b:include name='quickedit'/>

Sehingga kode widget contact form menjadi seperti

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
letak kode yang sudah dihapus.
</b:includable>
</b:widget>

Menambahkan kode contact form di halaman page

Dan tahap terakhir menambahkan kode:

<div class='widget ContactForm' id='ContactForm1'>
<div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>Name</p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>E-mail *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Message *</p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
      </form>
    </div>
</div>
</div>

di halaman laman (pages) Untuk caranya pilih "laman" klik "Laman baru" klik HTML dan pastekan kode tersebut dan klik "publikasikan" selesai.