Cara Membuat Form Kontak di Halaman Kontak Blogger

Baca Juga

Berikut Cara Membuat Form Kontak di Halaman Kontak Blogger. Buat halaman kontaknya, misalnya dengan nama KONTAK. Lalu hapus dan tambahkan kode tertentu sebagaimana dishare dalam postingan bawah ini.

Ini penampakan Contact Formnya di Halaman Statis "Kontak" Blogger.

Contact Form di halaman Kontak memudahkan pembaca menghubungi admin blog tanpa harus buka email.

Cara Membuat Form Kontak di Halaman Kontak Blogger

1. Tambahkan Widget Kontak

Di dashboard Blogger Anda, klik menu Tata Lelat (Layout), lalu tambahkan gadget Contact.

2. Tambahkan Kode CSS

Klik menu Template/Tema > Edit HTML. Tambahkan (copy & paste) kode CSS Form Kontak berikut ini di atas kode ]]</b:skin>

/* 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;

} 

3. Hapus Kode HTML Contact Form

Temukan kode widget HTML Contact Form seperti di bawah ini, lalu hapus bagian kode yang warna merah.

  <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <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 + &quot;_contact-form-name&quot;' 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 + &quot;_contact-form-email&quot;' 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 + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' 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 + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>

4. Save Template!

5. Buat Halaman KONTAK

Di dashboard Blogger Anda, klik menu Halaman (Page) > Buat Halaman Baru (New Page) > Judul Isi KONTAK.

Klik mode HTML, lalu Copas kode berikut ini di bagian Isi Halaman:

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

6. Publish/Update!

Publikasikan atau Perbarui halaman Kontak blog Anda.

Setelah terpasang dengan baik,  Anda bisa tes dengan mengisi formulir kontak tersebut. Nantinya, pesan yang terkirim akan masuk ke inbox email admin blog. Nama Pengirimnya "Blogger Contact Form <no-reply@blogger.com>"

Silakan cek inbox email Anda. Untuk membalasnya, akan ada alamat email pengirim pesan.

Demikian Cara Membuat Form Kontak di Halaman Kontak Blogger. 

Good Luck and Happy Blogging!

Sumber