Jumat, 30 Oktober 2015

Cara Membuat Form Contact Us di Blogger

Assalamu'alaikum wr wb

    Dalam membuat blog harus diketahui bahwa ada beberapa halaman yang harus ditambahkan agar blog kita terlihat resmi, salah satunya adalah halaman contact us yang berbentuk formulir, jadi ketika kita mengunjungi halaman tersebut maka akan nampak beberapa kotak yang harus diisi yang digunakan untuk menghubungi admin dari blog tersebut.

    Sebenarnya dalam blogger juga sudah ada fasilitas formulir contact us, tetapi hanya saja form tersebut bertempat pada widget dan bukan pada laman. Ada cara untuk menerapkannya di halaman, tetapi dengan cara memodifikasinya sedikit agar bisa diterapkan pada laman tersebut. Berikut akan kita bahas.

Cara Membuat Form Contact Us di Blogger

  Ada beberapa cara untuk membuat form contact di halaman, ada yang dari blogger dengan sedikit mengedit HTMLnya, dan ada juga yang menggunakan jasa dari website lain. Supaya lebih jelas urutan langkah-langkahnya, saya sudah membuat sebuah video, dan juga langkah-langkah yang berbentuk teks. Berikut...

Langkah-langkah membuat form contact us di blogger

Silakan tonton videonya:

Atau dengan mengikuti instruksi dibawah ini:

1. Pasang terlebih dahulu widget Formulir kontak pada blog kita.
2. Pergi ke Template, Edit HTML dan cari widget tersebut dengan menekan CTRL+F dan masukan keyword contact, maka kurang lebih seperti ini:


    <b:widget id='ContactForm1' locked='false' title='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'>

        SAMPAI...

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

3. Hapus kode yang berwarna merah, lalu Simpan.
4. Buat sebuah Laman baru, lalu pilih tombol HTML kemudian copy dan pastekan kode sumber dibawah ini

Cara Membuat Form Contact Us di Blogger
Cara Membuat Form Contact Us di Blogger

Kode sumbernya:


    <div dir="ltr" style="text-align: left;" trbidi="on">

    <div class="widget ContactForm" id="ContactForm1">

    <div class="contact-form-widget">

    <div class="form">

    <form name="contact-form">

    Name: <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

            <br />

    <br />

    E-mail:<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

            <br />

    <br />

    Message:

    <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br />

    <input class="contact-form-button contact-form-button-submit fa-user" id="ContactForm1_contact-form-submit" type="button" value="Submit" />

            <br />

    <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">

    </div>

    <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">

    </div>

    <br /></form>

    </div>

    </div>

    </div>

    </div>

5. Publikasikan.

    Sekarang coba test apakah sudah berfungsi atau belum. Untuk contoh hasil yang sudah jadi bisa mengklik ini.

Langkah-langkah membuat form contact us dengan bantuan website lain


    Jika tidak ingin ribet edit HTML segala, kita bisa menggunakan jasa dari website lain yang menyediakan jasa tersebut secara gratis, disini kita menggunakan jasa Foxyform, untuk langkah-langkahnya sebagai berikut:

  1. Kunjungi Foxyform.com.
  2. Pada kotak yang pertama, centang apa saja yang diperlukan, misalnya nama dan email saja. Misalkan belum cukup, pilih show further options, dan centang sesuai kebutuhan. Centang required field artinya formulir tersebut wajib untuk diisi.
  3. Kotak yang kedua digunakan untuk kostumisasi tampilan, seperti warna background, warna font, jenis font, dan ukuran font.
  4. Kotak yang terakhir isi dengan alamat email kita.
  5. Jangan lupa untuk mencentang I'm not a robot.
  6. Tampilan formulir yang ada di paling bawah adalah contoh formulir yang sudah disesuaikan oleh kita.
  7. Pilih Create Formular maka akan tampil kode sumbernya, copy kode tersebut.
  8. Buat sebuah laman, pilih tombol HTML, paste-kan kodenya, dan publikasikan.

    Tidak hanya form contact saja yang harus ditambahkan diblog, berikut beberapa laman yang harus diterapkan dan tutorialnya.

Cara membuat disclaimer pada blog.
Cara membuat privacy policy pada blog.

    Mungkin sekian dari saya tentang cara membuat form contact us di blogger, terimakasih sudah mengunjungi blog saya, dan semoga bermanfaat.

Silakan untuk berkomentar.

Wassalamu'alaikum wr wb.

Orang biasa yang senang belajar. Senang ngoprek dan menulis sesuatu yang berbau teknologi, desain grafis, dan hal random lainnya.

1 komentar

Silakan Berkomentar